美文网首页
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