教你写个图片轮播

图片轮播.gif

这是一个图片轮播的 Demo，上半部分用 CollectionView 实现，没有无限循环效果，下半部分是用 ScrollView 实现的，自动无限轮播。代码地址在这里。

上次用 CollectionView 实现了一个多表视图，这次本来想用同样的思路实现个图片轮播，结果发现并不是很方便。主要是“无限循环滑动”的效果单纯用 CollectionView 的接口的话基本做不到，要做也只能是把待显示图片的数量 ＊ N（N是一个很大的数），可以做到在比较长的时间内一直向后轮播，因为 Cell 的复用机制，真正使用的只有两个 Cell 对象，所以不用担心内存爆炸。但是这样做不到手势滑动的“首尾连接”，就是无论往左还是往右都可以无限滑动，要达到这样的效果，还是得用到 ScrollView 的接口，所以我觉得还不如直接用 ScrollView 写好了。

用 ScrollView 实现“首尾连接”有一种常见的思路：

frame_content.png

白色边框代表 ScrollView 的 frame，蓝色部分是 content。简单来说就是在要显示的图片的左右两边各加一张图片作为桥接。譬如当前显示的是第一张图片（img1)，按理说再用手往右滑动的话啥都没有了，但现在我在img1的左边又加了一张img3，这样在向右滑动的时候我们还能看到 img3，然后在滑动即将停下的时候，快速切换到第四个位置的 img3，所以最左边的 img3 永远不会在静止的时候显示。现在如果再向右滑动的话，就正常滑到 img2。向左滑动的时候同理，在滑到最后的那张 img1的一瞬间，切换到第二个位置的 img1。代码如下：

extension AutoScrollView: UIScrollViewDelegate {
    //速度变慢，即将停下的时候调用
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        //因为可以左右滑，所以不能简单地加1，而要通过contentofff计算要滑到第几张图片
        let page = Int(scrollView.contentOffset.x / width)
        if page == 0 {
            scrollView.contentOffset.x = width * CGFloat(imageCount)
        } else if page == imageCount + 1 {
            scrollView.contentOffset.x = width
        }
        
        pageCtrl.currentPage = Int(scrollView.contentOffset.x / width) - 1  
    }
}

上面说的主要是对手势滑动部分的处理，至于按固定时间间隔向右轮播更简单。只要判断一下当前显示的是否是最后一张图片（img3)，如果是，那下一张就显示第一张(img1)，否则正常显示下一张图片：

func slideByTime() {
    var page = pageCtrl.currentPage + 1
    
    if page == imageCount {
        scrollView.contentOffset.x = width
        page = 0
    } else {
        self.scrollView.contentOffset.x = self.width * CGFloat(page + 1)
    }
    
    pageCtrl.currentPage = page
}

然后用一个计时器定时调用上面这个方法就好了。有的同学可能会直接调用NSTimer的scheduledTimerWithTimeInterval方法，但是这个方法有个潜在的危险，一旦将target参数设为self，repeat参数设为true，NSTimer就会获取当前对象的一个引用，而且极难打破这个引用，这样当前对象就不能被正确释放，极易造成内存泄漏。

解决方法是把要执行的方法作为一个 block 传给 NSTimer的userInfo属性，把target参数设为NSTimer自己，给NSTimer增加一个扩展方法sy_procInvoke，在方法体中执行userInfo：

typealias Proc = @convention(block) () -> ()
extension NSTimer {
    class func sy_scheduledTimeerWithTimeInterval(interval: NSTimeInterval, repeats: Bool, repeatHandler: Proc) {
        scheduledTimerWithTimeInterval(interval, target: self, selector: "sy_procInvoke:", userInfo: unsafeBitCast(repeatHandler, AnyObject.self), repeats: true)
    }
    
    class func sy_procInvoke(timer: NSTimer) {
        let proc = unsafeBitCast(timer.userInfo, Proc.self)
        proc()
    }
}

因为userInfo的类型是个 AnyObject，而 Swift 中的闭包是不能转化为AnyObject的，所以得定义一个block类型，就是这一句typealias Proc = @convention(block) () -> ()，然后在传给userInfo的时候转化为AnyObject类型。

调用的时候用weak修饰self：

//计时器
NSTimer.sy_scheduledTimeerWithTimeInterval(1, repeats: true) { [weak self] in
    self?.slideByTime()
}

这样每隔1秒就会执行slideByTime方法，而且NSTimer没有持有当前对象的引用，任务完成。