collectionView自动无限轮播,顺便实现向上滚动的跑马灯

先上效果图:


collectionView自动无限轮播,顺便实现向上滚动的跑马灯_第1张图片
自动轮播.gif

正文:实现思想

collectionView自动无限轮播,顺便实现向上滚动的跑马灯_第2张图片
示意图.png

如上图所示,当处于图1状态时,ok,不用考虑太多。
1.当处于图2状态时,需要在0元素前补上new元素2
2.当处于图3状态时,需要在2元素之后补上元素0
3.当图2状态元素补上之后,继续左滑到new元素2时,将控件的偏移量改为元素2
4.当图3状态元素补上之后,继续右滑到new元素0时,将控件的偏移量改为元素0

1.构造新的数据源数组

这里可以重新构造一个新的数据源数组,也就是说将原数组

 @[@"0",@"1",@"2"]

重新构造为

 @[@"2",@"0",@"1",@"2",@"0"]

如下图:


collectionView自动无限轮播,顺便实现向上滚动的跑马灯_第3张图片
重新构造后的数据源.png
2.修改偏移量

    核心方法为- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView; // called when scroll view grinds to a halt
    在该方法中计算当前是第几个元素,如果处于示意图.png的图2 和 图 3状态时,默默的将其偏移量修改一下。
    修改偏移量可以使用- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; // animate at constant velocity to new offset方法,注意将animated设置为NO

3.添加timer

    添加timer实现自动轮播功能,timer的添加需要注意用户手动滚动时对collectionView的影响,需要注意两个方法:

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

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

    即在方法- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;中取消timer,在方法- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;中重新添加timer。

至此即实现了使用collectionView自动无限轮播的功能

向上滚动的跑马灯实现和以上思想类似,只需要改一下collectionView的布局即可,具体可以查看demo。
附上简单的demo地址:戳我

取巧方式实现collectionView自动无限轮播的功能

  1. collectionView的数据源方法- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;,返回999。
  2. 这样有999个一样的分区,也可以一定程度上实现轮播的功能,用户也不会咸蛋的看到第999个分区。

    取巧方式并不能完全实现左右边界元素的无限循环滚动,但在于比较简单,如果产品无强制要求也是可以使用这种方式来快速撸功能的。

你可能感兴趣的:(collectionView自动无限轮播,顺便实现向上滚动的跑马灯)