先上效果图:
自动轮播.gif
正文:实现思想
示意图.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"]
如下图:
重新构造后的数据源.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自动无限轮播的功能
- collectionView的数据源方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
,返回999。- 这样有999个一样的分区,也可以一定程度上实现轮播的功能,用户也不会咸蛋的看到第999个分区。
取巧方式并不能完全实现左右边界元素的无限循环滚动,但在于比较简单,如果产品无强制要求也是可以使用这种方式来快速撸功能的。
网友评论