美文网首页
collectionView自动无限轮播,顺便实现向上滚动的跑马

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

作者: kurt_wang | 来源:发表于2017-04-11 15:24 被阅读788次

    先上效果图:


    自动轮播.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自动无限轮播的功能

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

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

    相关文章

      网友评论

          本文标题:collectionView自动无限轮播,顺便实现向上滚动的跑马

          本文链接:https://www.haomeiwen.com/subject/vlnyattx.html