Swift轮播图的实现及原理

原理:

总共只用三个UIImageView,放在一个UIScrollView上。滑动后,更换前后的图片,并把ContentOffset设置成显示中间图片的数值,这样就可以无限左右滑动了。

  1. 首先赋值: 显示三个image,把数据源中的第一个Image赋值在中间的UIImageView上,两边依次找到应该赋值的image。
    // 得到上一张图片的下标
    private func getLastImageIndex(indexOfCurrentImage index: Int) -> Int{
        var tempIndex = index - 1
        if tempIndex == -1 {
            return self.imageArray.count - 1
        }else{
            return tempIndex
        }
    }
    
    // 得到下一张图片的下标
    private func getNextImageIndex(indexOfCurrentImage index: Int) -> Int
    {
        var tempIndex = index + 1
        return tempIndex < self.imageArray.count ? tempIndex : 0
    }
  1. 更改数据: 滑动后,把数据源中应该显示的image赋值在中间的UIImageView上,然后更改两边的UIImageView上的数据,把scrollView的contentOffset的偏移量设为显示中间图片的偏移量(赋值后肉眼根本无法分辨,但是用户又可以左右滑动了,这就造成了无限循环滑动的假象)。
Circle.gif

描述:

swift版的无限循环轮播图,可自定义时间间隔,设置本地、远端图片或混设,目前配合Kingfisher一起使用(url图片赋值ImageView和缓存)。

功能:

  • 无限循环轮播

  • 图片点击闭包

  • 本地、远端图片混设

  • 支持codexibstoryboard调用

  • 支持旋转

  • 支持iPhoneiPad

运行展示图:

iPhone:

iPhone
iPhone

iPad:

iPad
iPad

安装:

下载后直接把GLLoopView文件夹(里面有CircleView.swift和CircleView.xib2个文件)拉进项目中。

(因有xib文件,支持cocoapods在storyboard和xib中使用时,会报编译错误,对运行无影响,所以暂缓支持cocoapods)

pod添加kingfisher(或者其它方法)

使用方法:

xib || storyboard:

        let imageArray: [GLImageModel] = [GLImageModel("first.jpg", type: .local), GLImageModel("second.jpg", type: .local), GLImageModel("third.jpg", type: .local)]
        
        self.circleView.imageModelArray = imageArray
        self.circleView.timeInterval = 5
        self.circleView.clickCircleViewClosure = { currentIndex in
            print(currentIndex, terminator: " ");
        }

code: (能用可视化就用可视化,不要再代码创建了)

        let imageArray: [GLImageModel] = [GLImageModel("first.jpg", type: .local), GLImageModel("second.jpg", type: .local), GLImageModel("third.jpg", type: .local)]
        
        self.circleView = GLCircleView(frame: CGRect(x: 0, y: 64, width: self.view.frame.size.width, height: 200))
        self.circleView.imageModelArray = imageArray
        self.circleView.timeInterval = 5
        self.circleView.clickCircleViewClosure = { currentIndex in
            print(currentIndex, terminator: " ");
        }
        self.view.addSubview(circleView)

添加:

        let urlImageModel = GLImageModel(self.circleView.imageModelArray.count % 2 == 0 ? url1 : url2, type: .url)
        self.circleView.imageModelArray.append(urlImageModel)

demo中注释很清晰

github: swift无限自动循环轮播图


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,812评论 4 61
  • 前言 我们常见的一些广告位、图片轮播都是可以无限轮播的,以前参考文章 iOS开发系列--无限循环的图片浏览器,自己...
    四月_Hsu阅读 4,771评论 1 2
  • 国考,国家公务员考试。外人看来,反中式教育考试,反9年义务教育考试,打破常规思维,考你脑洞有多大。于是乎,国考如同...
    公考界的传奇人物阅读 2,187评论 0 0

友情链接更多精彩内容