美文网首页
Swift学习笔记之三种方式实现无限轮播

Swift学习笔记之三种方式实现无限轮播

作者: 华子的学习之路 | 来源:发表于2017-08-01 16:37 被阅读38次

先上效果

无限轮播.gif

实现思路:

第一种: 在原图片集合的基础上, 分别在原数据的开始及结尾处插入一张图片, 内容分别是原图片集合的最后一张和第一张, 新图片集合.count = 原图片集合.count + 2; 当滑动到第一张或者最后一张图片时, "偷偷地"将当前偏移位置切换到对应图片的位置(展示第一张图片或者最后一张图片的ImageView所在位置), 详见下图:

无限轮播方式一.png

核心代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let index = scrollView.contentOffset.x / self.bounds.width
        let currentIndex = (index - 1.0).truncatingRemainder(dividingBy: CGFloat(imageBox.imageArray.count - 2)) + 0.5
        pageControl?.currentPage = Int(currentIndex) == (imageBox.imageArray.count - 2) ? 0 : Int(currentIndex)
        
        if index >= CGFloat(imageBox.imageArray.count - 1) {
            scrollView.contentOffset = CGPoint(x: self.bounds.width, y: 0)
        } else if index <= 0 {
            scrollView.contentOffset = CGPoint(x: CGFloat(imageBox.imageArray.count - 2) * self.bounds.width, y: 0)
        } else if index <= 0.5 { // 此处只是为了在第一张向前滚动到展示最后一张时, pageControl可以及时变化
            pageControl?.currentPage = imageBox.imageArray.count - 2
        }
    }

第二种: 只需要左, 中, 右三个UIImageView, 默认只展示中间位置的UIImageView, 然后动态调整UIImageView上应该放置的image; 例如: 刚开始时, 左中右分别放置的是图片数组中最后一张,第0张,第1张图片, 此时用户看到是第0张图片, 当用户向右滑动时, 此时展示应该是第1张图片,当滑动结束时, "偷偷地"将scrollView的偏移量调整为中间UIImageView位置, 同时调整对应imageView上展示的图片, 此时左中右分别对应的应该是 第0, 1, 2张图片; 详见下图:

无限轮播方式二.png

核心代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let index = scrollView.contentOffset.x / self.bounds.width
        if index >= 2 || index <= 0 {
            
            self.currentIndex = index >= 2 ? (self.currentIndex + 1) : (self.currentIndex - 1)
            
            setImage()
            
            scrollView.contentOffset = CGPoint(x: self.bounds.width, y: 0)
            
        }
        
        pageControl?.currentPage = self.currentIndex
    }

第三种: 最简单, 最不费脑的实现方式了, 简单粗暴的将图片数组成倍的扩充, 没明白是吗? 举个简单例子: 新图片集合.count = 原图片集合.count * 150(一张图片的情况除外); 然后开始时默认展示的是偏移量为(新图片集合.count / 2) * 图片宽度的位置(也是原图片集合的第一张图片), 由于这种方法可能需要占用较多的内存, 所以建议使用UICOllectionView, 基于其cell的重用机制, 可以降低内存占用.

核心代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        let offsetIndex = scrollView.contentOffset.x / self.bounds.width

        let currentIndex = Int(offsetIndex.truncatingRemainder(dividingBy: CGFloat(self.imageBox!.imageArray.count)) + 0.5)
        
        if Int(offsetIndex) >= actualItemCount {
            
            scrollView.contentOffset = CGPoint(x: self.bounds.width * CGFloat(actualItemCount) / 2, y: 0)
        }
        
        pageControl?.currentPage = currentIndex == imageBox.imageArray.count ? 0 : currentIndex
                
    }

源代码

相关文章

网友评论

      本文标题:Swift学习笔记之三种方式实现无限轮播

      本文链接:https://www.haomeiwen.com/subject/qynjlxtx.html