iOS 那些“垃圾”的轮播

sungkmile 2017-01-03

展开全文

来源：xiAo__Ju

链接：http://www.jianshu.com/p/97037c126d7c

轮播视图通常也叫Banner，90%以上App都会用到的一个控件，网上有很多开源代码，但是至今我觉得比较好的一个是SDCycleScrollView，因为他解决了我接下来要吐槽的两个问题。

通常实现定时自动滚动Banner的思路大体有三种

1. 3个`UIImageView`
2. N 2个`UIImageView`思路
3. N * section(个人不推荐，因为这将代码写死了，当有个无聊的人真的滚动到最后一个section时，程序就会crash了)

前两种思路又分为用UIScrollView和UICollectionView实现，个人没有用过第一种思路，都是第二种，本文也是基于第二种思路，这两种思路的中心思想其实都是运用了视觉误差。

具体思路请跳转

中文 http://www.jianshu.com/p/7123a07cc552
英文 https:///archives/2013/07/building-a-circular-gallery-with-a-uicollectionview/

快速滑动时卡顿

先来看看那些“垃圾”Banner

卡顿问题一（3个UIImageView思路）

通过卡顿频率，我猜想这两个项目的Banner思路应该一样，用的三个UIImageView。

不知道你是否看得到动图中卡顿的问题，如果你手机上恰好装了这两个App，可以自己试一下，很简单，只要快速滑动就可以复现问题。

但是这两个的PageControl还是处理得很好的，能实时滚动到相应的位置。

卡顿问题二（（N 2）个UIImageView思路）

这个问题不好看出，因为他的卡顿频率比较低，刚好是一组轮播视图的周期。必须在第N 1张时才会复现。想看得清楚的小伙伴，如果自己项目Banner是这个思路可以测试一下自己项目的。

再看看这个PageControl的位置，在你快速滑动时，它是不动的，我猜想他控制PageControl的位置应该是在这个方法里做的

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { }

卡顿原因

就是这个两个方法其中一个里计算cell位置的判断条件不对

func scrollViewDidScroll(_ scrollView: UIScrollView) { }

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { }

Tab切换卡中间，不能复位

由于这个问题比较难复现，我就用自己的Demo测试的

UICollectionView实现，会自动修复

UIScrollView实现，需手动修复

动图中应该可以清楚的看到滚动视图滚动的坐标不对。

原因

这个具体原因我也不知道，这是所有轮播都会发生的问题，我猜想是跟内部的RunLoop应该有关。

还有的Banner是pageControl和cell联动不及时，比如咸鱼

因为是在这里处理控制pageControl的位置的

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { }

简书Banner的pageControl向左手动拖动时又太灵敏。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let page = scrollView.contentOffset.x / scrollView.frame.width
        if page = CGFloat(urlStrs.count - 1) {
            // 向左
            pageControl?.currentPage = 0
            collectionView?.scrollToItem(at: IndexPath(item: 1, section: 0), at: .centeredHorizontally, animated: false)
        } else {
            let value = page.truncatingRemainder(dividingBy: 1)