无限轮播器1 - (CollectionView)

1.数据容器 (轮播器的图片容器)

@property (strong,nonatomic) NSArray *imgDataArr;

2.实现CollectionView的UICollectionViewDataSource数据源方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    //将容器数组长度*2 (多出一组Item)
    return self. imgDataArr.count * 2;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    static NSString * const reuseIdentifier = @"Cell";
    JSCycleCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    //这里设置背景色是因为ImageView的Size小于itemSize,留个边框的效果
    cell.backgroundColor = [UIColor whiteColor];
    /*
      因为item个数*2, 但容器的真实长度并未改变,所以取数据源的时候对容器长度取模,就可以取到对应索引的图片
        拿总长度为4 举例
      (原始的数据源cycleList的长度是4,  但是我们现在item有8个, 我们不能直接根据 indexpath.item 去取数据)
        0%4 = 0 , 1%4=1,  2%4=2,  3%4=3;
        4%4 = 0 , 5%4=1,  6%4=2,  7%4=3
    */
    //这里我自定义了一个Cell,传递属性并赋值与这里直接设置Item里的ImageView原理一样
    cell.imgModel = self. imgDataArr[indexPath.item % self. imgDataArr.count];
    
    return cell;
}

3.实现CollectionView的UICollectionViewDelegate代理方法(UICollectionView继承自UIScrollView)计算滑动停止时,当前显示哪一个Item

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //获取当前CollectionView的偏移量
    CGFloat offSetX = scrollView.contentOffset.x;
    /*
      拿总长度为4 举例:
      初始时,让索引为4的Item为默认显示的Item(第2组第1张)
      当偏移量等于0时(第1组第1张,也就是第一张图片),以无动画的方式悄悄的跳转回索引为4的Item(第2组第1张)
      当偏移量等于7倍CollectionView的宽度时(第2组第4张,也就是最后一张图片),同样以无动画的方式跳转回索引为3的Item(第1组第4张)
      因为两组图片是一致的,又是以无动画无察觉的方式跳转的,所以就可以实现无限轮播的效果了
    */
    if (offSetX == 0) {
        
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.cycleModelArr.count inSection:0];
        
        [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
        
    }else if (offSetX == scrollView.bounds.size.width * ( self.cycleModelArr.count * 2 - 1 )){
        
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.cycleModelArr.count - 1 inSection:0];
        
        [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
    }
    
}

细节:
1.FlowLayout:让collectionView的item 自动适配
因为在VIewDidLoad中并不能获取到真实有效的Frame,所以在设置FlowLayout时,要写在viewDidLayoutSubviews或者是viewDidAppear中

- (void)viewDidLayoutSubviews{
    self.flowLayout.itemSize = self.collectionView.bounds.size;
}

2.防止滚动条出卖自己,需要将滚动条指示关掉(根据情况选择禁用垂直\水平方向),并设置分页效果

self.collectionView.showsVerticalScrollIndicator = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.pagingEnabled = YES;

3.初始的时候,让CollectionView默认显示索引为4的那个Item(第2组第1张图片)

NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.imgDataArr.count inSection:0];
        
 [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];

这样就能简单的实现一个无限轮播器效果了.