swift 简单的轮播原理

最近在练习swift，偶然看到一个轮播的demo，之前在oc里，轮播直接想到的就是三方SDCycleScrollView，也没有研究过原理。
现在移到swift里了看到demo，就研究了一下轮播的原理，其实挺简单的。下面进入正文吧

核心构造控件：

   var bgScrollView = UIScrollView()
    let imageName : [String] = ["1","2"]//轮播内容
    var leftImage,middleImage,rightImage:UIImageView?//轮播控件
    var autoTime : Timer?//自动轮播计时器
    var page = UIPageControl()//小圆点控件
    let w = UIScreen.main.bounds.size.width//轮播控件宽
    var index = 0//当前轮播到第几内容

UIScrollView是滑动试图的基础，使用三个控件来搭载轮播内容分为左中右三个，层级关系如图

image

轮播控件内容设置方法：

    func setImage() {

        if index == 0{

            leftImage?.image = UIImage(named: self.imageName.last!)

            middleImage?.image = UIImage(named: self.imageName.first!)

            rightImage?.image = UIImage(named: self.imageName[1])

        }else if index == self.imageName.count - 1 {

            leftImage?.image = UIImage(named: self.imageName[index - 1])

            middleImage?.image = UIImage(named: self.imageName.last!)

            rightImage?.image = UIImage(named: self.imageName.first!)

        }else{

            leftImage?.image = UIImage(named: self.imageName[index - 1])

            middleImage?.image = UIImage(named: self.imageName[index])

            rightImage?.image = UIImage(named: self.imageName[index + 1])

        }

    }

轮播的起始状态为显示中间的轮播控件，假设轮播控件宽度为w则控件内容的初始状态应为这样

image

复用的核心方法：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let contentOffX = scrollView.contentOffset.x
        if imageName.count > 0 {
            if (contentOffX >= 2 * w){
                bgScrollView.contentOffset = CGPoint(x: w, y: 0)
                index += 1
                if index == imageName.count{
                    index = 0
                }
            }
            if (contentOffX <= 0){
                bgScrollView.contentOffset = CGPoint(x: w, y: 0)
                index -= 1
                if index == -1{
                    index = imageName.count - 1;
                }
            }
            setImage()
            page.currentPage = index
        }
    }

轮播核心逻辑为：通过复用控件，利用定时器不断的循环调用方法来实现轮播效果。首先来解释简单的复用原理，核心为在展示了即将轮播的内容后调整scrollview的contentoffset，所以复用方法应该写在scrollViewDidScroll里。下面举例简单解释一下复用核心方法：例如在我们展示轮播内容的第一个后，假设我们向左滑，那么我们即将看到的是轮播内容的第二个，在完全展示了第二个轮播内容的时候，scrollview的X轴偏移量变成2*w，此时调整scrollview的X方向的contentoffset变为w。那么此时我们已经偷偷的将右控件调整为了中控件。因为你会发现此时展示的控件的frame是中间控件的frame，这样我们的控件相对布局就有回到了初始状态，相当于我们始终在展示中间控件，这样我们就实现了复用效果。然后我们再调整轮播控件展示的内容，

利用定时器：

    func autoCycle() {
        autoTime = Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(auto), userInfo: nil, repeats: true)
    }
    @objc func auto() {
        let contentOffsetX = CGPoint(x: w * 2, y: 0)
        bgScrollView.setContentOffset(contentOffsetX, animated: true)
    }

不断的重复第二个控件开始的偏移位置w到第二个控件结束的位置2*w，从而达到轮播效果。

最后编辑于：2019.01.11 10:31:18