教你写个图片轮播

图片轮播.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
}

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

解决方法是把要执行的方法作为一个 block 传给 NSTimeruserInfo属性,把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没有持有当前对象的引用,任务完成。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Arcgis for Javascript之featureLayer图和属性的互操作

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果:

70520
来自专栏拂晓风起

Flash:DisplayObject的矩阵旋转(移动/修改注册点,修改旋转点)

12120
来自专栏点滴积累

使用bokeh-scala进行数据可视化

目录 前言 bokeh简介及胡扯 bokeh-scala基本代码 我的封装 总结 一、前言        最近在使用spark集群以及geotrellis框架(...

62080
来自专栏小狼的世界

Firefox与IE的一些Javascript编程小技巧

说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elemen...

11520
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

207100
来自专栏林德熙的博客

WPF 如何在 WriteableBitmap 写文字

最近看到WPF 使用不安全代码快速从数组转 WriteableBitmap 可以快速从数组转 WriteableBitmap 所以就让他画一些元素,但是发现元素...

36010
来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

25090
来自专栏竹清助手

jQuery架构设计与实现(2.1.4版本)

15940
来自专栏swag code

双缓冲原理在Awt和Swing中实现消除闪烁方法总结

AWT是抽象窗口工具箱的缩写,它为编写图形用户界面提供了用户接口,通过这个接口就可以继承很多方法,省去了很多工作。AWT还能使应用程序更好地同用户进行交互。

18320
来自专栏别先生

JAVA学习Swing章节标签JLabel中图标的使用

package com.swing; import java.awt.Color; import java.awt.Component; import jav...

23060

扫码关注云+社区

领取腾讯云代金券