最近在练习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，从而达到轮播效果。
网友评论