无限轮播专题系列之UICollectionView篇

无限轮播专题系列之UICollectionView篇

开题概述

• 之所以将无限轮播作为专题来讲是因为使用的太广泛，几乎99%以上的 APP 都有这个功能，而且涉及到的知识点也不少，另外作为个人对技术总结角度来看，很值得把一些想法力求用最简单的语言记录下来让每一个需要的人都能看懂，也方便自己回顾。

开发思路

• 功能展示：

  
  

• 思维图如下

  
  
  

• 思路详解：

  • 功能划分：每一个复杂的界面，我们需要将它细化，就向解答代数题一样，一步一步来，化繁为简。从我们需要实现的功能看，可拆分为：创建滚动的view（这里用UICollectionView），一个pageControl，一个提示label（可选）
  • 创建UICollectionView:

  // flowLayout
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.itemSize = self.frame.size;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    flowLayout.minimumLineSpacing = 0;
    flowLayout.minimumInteritemSpacing = 0;
    
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:flowLayout];
    collectionView.backgroundColor = [UIColor clearColor];
    collectionView.showsHorizontalScrollIndicator = NO;
    collectionView.pagingEnabled = YES;
    collectionView.bounces = NO;
    collectionView.dataSource = self;
    collectionView.delegate = self;
    /** 创建 collectionView 的时候就让滚蛋到100倍位置时防止一开始用户向右滚动没有数据*/
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_imageStringArray.count *100 inSection:0];
    [collectionView selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally ];
    [collectionView registerClass:[WLCollectionViewCell class] forCellWithReuseIdentifier:kCollectionCellID];
    [self addSubview:collectionView];
     _collectionView = collectionView;

• 创建pageControl + 提示label

 UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 37, self.frame.size.width, 37)];
    bgView.backgroundColor = [UIColor grayColor];
    bgView.alpha = 0.8;
    [self addSubview:bgView];
    // UIPageControl
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    CGSize size = [pageControl sizeForNumberOfPages:_imageStringArray.count];
    pageControl.bounds = CGRectMake(0, 0, size.width, size.height);
    pageControl.center = CGPointMake(bgView.frame.size.width/2, bgView.frame.size.height/2);
    pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
    pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
    pageControl.numberOfPages = _imageStringArray.count;
    [bgView addSubview:pageControl];
    _payControl = pageControl;
    
    // label
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(pageControl.frame) + 50, 0, 100, bgView.frame.size.height)];
    label.backgroundColor = [UIColor clearColor];
    label.font = [UIFont systemFontOfSize:14.0];
    label.textColor = [UIColor orangeColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = @"这是第0张图片";
    [bgView addSubview:label];
    _tipLabel = label;

• 实现UICollectionViewDataSource 方法：

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    // 设置为1000倍时为了当向左滚动超出数组个数的时候就自动从0开始，不用担心会创造这么多对象消耗内存，UICollectionView会自动复用
    return _imageStringArray.count * 1000;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    WLCollectionViewCell *cell = [_collectionView dequeueReusableCellWithReuseIdentifier:kCollectionCellID forIndexPath:indexPath];
    NSInteger index = indexPath.row % _imageStringArray.count;
    cell.imageView.image = [UIImage imageNamed:_imageStringArray[index]];
    
    return cell;
    
}

• 完成上一步基本可以看到滚动的数据图片了，下面实现UICollectionViewDelegate方法，让滚动的时候更新pageControl当前显示的页数：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    /** 此处注意滚动到一半的时候才让分页控制器显示下一个 */
    CGFloat offsetX = scrollView.contentOffset.x + scrollView.bounds.size.width * 0.5;
    NSUInteger index = (NSUInteger ) (offsetX / scrollView.bounds.size.width) % _imageStringArray.count;
    _payControl.currentPage = index;
    _tipLabel.text = [NSString stringWithFormat:@"这是第%lu张图片",(unsigned long)index];
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    /** 开始拖拽到时候停止定时器的操作 */
    [self removeTimer];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    /** 拖拽完成的时候 开启定时器 */
    [self addTimer];
}

• 添加定时器实现无限滚动

- (void)addTimer {
    
    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(timerHandler) userInfo:nil repeats:YES];
    [NSRunLoop.mainRunLoop addTimer:timer forMode:NSRunLoopCommonModes];
    _timer = timer;
}
- (void)timerHandler {
    
    CGFloat currentoffsetX = _collectionView.contentOffset.x;
    CGFloat offSetX = currentoffsetX + _collectionView.bounds.size.width;
    _tipLabel.text = [NSString stringWithFormat:@"这是第%f张图片",offSetX];
    _collectionView.contentOffset = CGPointMake(offSetX, 0);
}
- (void)removeTimer {
    [_timer invalidate];
    _timer = nil;
}

• 滚动超出区域自动到下一个

  collectionView.delegate = self;
    /** 创建 collectionView 的时候就让滚蛋到100倍位置时防止一开始用户向右滚动没有数据*/
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_imageStringArray.count *100 inSection:0];
    [collectionView selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally ];
    
    // 设置为1000倍时为了当向左滚动超出数组个数的时候就自动从0开始，不用担心会创造这么多对象消耗内存，UICollectionView会自动复用
    return _imageStringArray.count * 1000;

同时献上源码，写的不好请勿喷，能帮到您是我最大的荣幸与动力。下载地址：github链接 https://github.com/VinlorJiang/WLRecycleScrollView.git

非常感谢您的阅读，也欢迎加入QQ群：39232584，为尊重作者劳动果实，转载请注明出处！