iOS之轮播图（collectionView）加定时器

今天为大家分享一波轮播图，本人不才，希望此分享对大家有用。今天为什么写这个呢，之前写过项目用scrollView封装写过轮播图，但是感觉不是很好，而且传值也很不好写，所以今天用collectionView写的轮播图，传值也很是好写的。

5517BA7A-0DE8-43B6-8C97-7BACA687416D.png

<1>先定一些我们需要的属性

@property (nonatomic, retain) UICollectionView *collection;@property (nonatomic, retain) NSMutableArray *marr;// 存图片的数组@property (nonatomic, retain) UIPageControl *page;@property (nonatomic, retain) NSTimer *timer;// 调用的一些方法- (void)viewDidLoad {    [super viewDidLoad];    [self createCollectionView];    [self createPhone];    [self createPage];    [self addTimer];    // Do any additional setup after loading the view, typically from a nib.}

<2>//先做一些事前工作，把collectionView铺好

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];    layout.itemSize = CGSizeMake(WIDTH, 300);    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;    layout.minimumLineSpacing = 0;    self.collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, 300) collectionViewLayout:layout];    [self.view addSubview:self.collection];    self.collection.backgroundColor = [UIColor whiteColor];    self.collection.pagingEnabled = YES;//开启翻页效果    self.collection.delegate = self;    self.collection.dataSource = self;    self.collection.showsHorizontalScrollIndicator = NO;//滑条不出现    [self.collection registerClass:[CellOfFirst class] forCellWithReuseIdentifier:@"pool"];

<3>collectionView 的协议方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return self.marr.count;// 返回图片的个数}// 说一下为什么返回100个分区// 我们可以将第50个分区的一组图片作为用户看到的第一组图片，这样就实现轮播的效果了。（100分区足够了，除非脑残划100次）- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {    return 100;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {// 自定义的Cell类    CellOfFirst *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pool" forIndexPath:indexPath];   cell.pic.image = self.marr[indexPath.row];    return cell;}

// 本地的图片

- (void)createPhone {    self.marr = [NSMutableArray array];    for (int i = 1; i < 12; i++) {        NSString *name = [NSString stringWithFormat:@"123_%d.jpg",i];        UIImage *image = [UIImage imageNamed:name];        [self.marr addObject:image];    }    //设置起始位置    [self.collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];}

// 获取pageControoler

// 被忘记调用呦- (void)createPage {    self.page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 250, WIDTH, 50)];    [self.view addSubview:self.page];    self.page.numberOfPages = self.marr.count; }

// 当图片划得时候已经减速时

// collectionView继承于scrollview 所以我们可用此方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    // 计算page算法    int page = (int) (scrollView.contentOffset.x / WIDTH + 0.5) % self.marr.count;    self.page.currentPage = page;}

// 我们可以添加定时器了 （一样别忘记获取完图片调用）

- (void)addTimer {    self.timer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];    [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];}

- (void)nextImage {    //设置当前 indePath    NSIndexPath *currrentIndexPath = [[self.collection indexPathsForVisibleItems]lastObject];    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currrentIndexPath.item inSection:50];    [self.collection scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];    // 设置下一个滚动的item    NSInteger nextItem = currentIndexPathReset.item +1;    NSInteger nextSection = currentIndexPathReset.section;    if (nextItem==self.marr.count) {        // 当item等于轮播图的总个数的时候        // item等于0, 分区加1        // 未达到的时候永远在50分区中        nextItem=0;        nextSection++;    }    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];      [self.collection scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];}

// 当用户自己划图片时 当然我们也需要定时器被移除 （时机很重要）

- (void)removeTimer{    [self.timer invalidate];    self.timer = nil;  }

// 当图片即将开始被拖拽时 我们将定时器移除

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {    [self removeTimer];}

// 当图片已经完成被拖拽时 我们还需加上定时器

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {    [self addTimer];}

这些做完我们基本就完成轮播图自动轮播了，大家有兴趣的可以尝试下。

B7DE72A0-B1F9-42D6-8010-5E15563C887B.png

文／其实你懂的（简书作者）
原文链接：http://www.jianshu.com/p/e56b7eb90ba9
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。