写一个图片轮播器(使用collectionView)

 

1、属性oop

咱们须要一个 collectionView 和一个 NStimer 。collectionView 用来存放须要循环播放的对象, NSTimer 用来定时滚动collectionViewatom

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>

@property(nonatomic,strong)UICollectionView* showCollection;

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

提示:须要用到UISCrollView 或者 UICollectionView,咱们能够直接遵照其代理、数据源。spa

 

2、初始化对象代理

初始化collectionView:code

#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:orm

#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须要加入到运行循环对象

 

3、数据源方法blog

实现数据源方法:此处设置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一个静态的ci

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

 

4、代理方法

1,用户本身查看的时候须要暂停timer;二、用户中止查看,从新开启timer;三、最后一个的时候,设置从第一个从新开始

#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);
    }
}

 

5、自定义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

 

注意点:一、初始化collectionViewCell别忘记注册

    二、跟tableView不一样的是,咱们只须要写出重用cell 的代码,系统会建立

 

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

 

初入博客园,你们多多关照。

相关文章
相关标签/搜索