前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >教你写个图片轮播

教你写个图片轮播

作者头像
Sheepy
发布2018-09-10 12:20:25
3K0
发布2018-09-10 12:20:25
举报
文章被收录于专栏:我杨某人的青春满是悔恨

图片轮播.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。代码如下:

代码语言:javascript
复制
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),否则正常显示下一张图片:

代码语言:javascript
复制
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
}

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

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

代码语言:javascript
复制
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

代码语言:javascript
复制
//计时器
NSTimer.sy_scheduledTimeerWithTimeInterval(1, repeats: true) { [weak self] in
    self?.slideByTime()
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015.12.31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档