码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-12 13:35:26      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

 

一、属性

我们需要一个 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 的代码,系统会创建

 

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

 

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

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

标签:

原文地址:http://www.cnblogs.com/yeschenbaby/p/5764495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!