写一个图片轮播器（使用collectionView）

 

一、属性

我们需要一个 collectionView 和一个 NStimer 。collectionView 用来存放需要循环播放的对象， NSTimer 用来定时滚动collectionView

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>

@property(nonatomic,strong)UICollectionView* showCollection;

@property(nonatomic,strong)NSTimer* timer;
@end

提示：需要用到UISCrollView 或者 UICollectionView，我们可以直接遵守其代理、数据源。

 

二、初始化对象

初始化collectionView:

#pragma mark - 初始化collectionView
-(void)initCollectionView{
    //layout
    UICollectionViewFlowLayout* layout = [[UICollectionViewFlowLayout alloc]init];
    
    self.showCollection = [[UICollectionView alloc]initWithFrame:CGRectMake(120, 120, 200, 180) collectionViewLayout:layout];
    _showCollection.delegate = self;
    _showCollection.dataSource = self;
    [self.view addSubview:_showCollection];
    
    //基本设置
    _showCollection.pagingEnabled = YES;
    _showCollection.showsHorizontalScrollIndicator = NO;
    layout.itemSize = CGSizeMake(200, 180);
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    layout.minimumLineSpacing = 0;
    layout.minimumInteritemSpacing = 0;
    
}

 

添加timer:

#pragma mark - 添加timer
-(void)addTimer{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop]addTimer:_timer forMode:NSRunLoopCommonModes];
}

-(void)nextPage{
    //当前偏移量
    CGPoint current = _showCollection.contentOffset;
    
    if (current.x == _showCollection.frame.size.width*6) {
        current.x = 0;
    }else{
        current.x += _showCollection.frame.size.width;
    }
    
    //UIScrollView自带方法
    [_showCollection setContentOffset:current animated:YES];
    
}

 

提示：NSTimer需要加入到运行循环

 

三、数据源方法

实现数据源方法：此处设置section为1，有六张图片设置item为7，最后一个item放跟第一张图片一样的，这样就可以给用户一种假象：用户会以为是第一张，我们在这个地方需要修改偏移量offset（在后边会上代码）

#pragma mark - 数据源方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 7;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    ShowCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:key forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    
    cell.icon = [NSString stringWithFormat:@"%zd",indexPath.item+1];
    return cell;
}

注意：自定义我们需要的cell，需要注册，”key“最好static一个静态的

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建
    [self initCollectionView];
    
    //注册
    [_showCollection registerClass:[ShowCollectionViewCell class] forCellWithReuseIdentifier:key];
    
    //添加timer
    [self addTimer];
}

 

四、代理方法

1,用户自己查看的时候需要暂停timer；2、用户停止查看，重新开启timer；3、最后一个的时候，设置从第一个重新开始

#pragma mark - 代理方法
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    [_timer invalidate];
}
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    [self addTimer];
    
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //所在页数
    int pageNumber = _showCollection.contentOffset.x/_showCollection.frame.size.width;
    //如果是最后一页，设置偏移量为0，重新循环
    if (pageNumber == 6) {
        _showCollection.contentOffset = CGPointMake(0, 0);
    }
}

 

五、自定义collectionViewCell

在这里直接粘代码，开发中根据不同的需求自定义

在collectionViewCell.h文件中：

@property(nonatomic,copy)NSString* icon;

在collectionViewCell.m文件中：实现初始化方法，setter方法

#import "ShowCollectionViewCell.h"
@interface ShowCollectionViewCell()
@property(nonatomic,strong)UIImageView* imageView;
@end

@implementation ShowCollectionViewCell

-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        _imageView = [[UIImageView alloc]init];
        [self addSubview:_imageView];
    }
 
    return self;
}

-(void)setIcon:(NSString *)icon{
    _icon = [icon copy];
    _imageView.image = [UIImage imageNamed:icon];
}


-(void)layoutSubviews{
    [super layoutSubviews];
    
    _imageView.frame = self.bounds;
}
@end

 

注意点：1、初始化collectionViewCell别忘记注册

　　　　2、跟tableView不同的是，我们只需要写出重用cell 的代码，系统会创建

　

以上就可以写出一个简单实用的轮播器了。

 

初入博客园，大家多多关照。