原理:1.准备好一个UIScrollView,上面依次放上去三个UIImageView
2.只显示中间的imageView,左右两个view值提供滑动特效,滑动之后,scrollView跳回到中间的imageView,修改相应的图片(跳回时间超级短,对于人眼是不可见的)
由于本文使用的是变量代替值,只需要改变存储属性的值就可以变成自己想要的效果(图片的数量必须大于等于三张)
具体实现如下
1.定义四张图片,,3个imageView,一个ScrollView
var scrollView = UIScrollView()
let images = [image1,image2,image3]
let imageView1 = UIImageView()
let imageView2 = UIImageView()
let imageView3 = UIImageView()
2.设置约束,ScrollView在屏幕上,imageView在scrollview内
//屏幕宽度
let mainWight = UIScreen.main.bounds.width
//轮播图的高度
let hight:CGFloat = 250
//设置ScrollView的约束
view.addSubview(scrollView)
scrollView.snp.makeConstraints { (make) in
make.left.top.equalToSuperview()
make.height.equalTo(hight)
make.width.equalTo(mainWight)
}
//设置imageview的约束
scrollView.addSubview(imageView1)
scrollView.addSubview(imageView2)
scrollView.addSubview(imageView3)
imageView1.frame = CGRect(x: 0, y: 0, width: mainWight, height: hight)
imageView2.frame = CGRect(x: mainWight * 1, y: 0, width: mainWight, height: hight)
imageView3.frame = CGRect(x: mainWight * 2, y: 0, width: mainWight, height: hight)
//scrollView的内容长宽(scrollview能滑动的基础)
scrollView.contentSize = CGSize(width: mainWight * CGFloat(images.count), height: hight)
//整页滑动
scrollView.isPagingEnabled = true
3.设置图片,由于图片的index不太好取,我用的是取余的方式设置图片的index
var index = 0
//设置index的值
index = images.count * 2
//图片修改方法
func imageChange() {
//当滑动之后,判断是左滑动还是右滑动
//右滑
if scrollView.contentOffset.x > mainWight{
index += 1
}
//左滑
else if scrollView.contentOffset.x < mainWight{
if index == images.count{
index = images.count * 2
}
index -= 1
}
//替换图片
imageView1.image = images[(index - 1)%images.count]
imageView2.image = images[index%images.count]
imageView3.image = images[(index + 1)%images.count]
//显示中间的imageview
scrollView.contentOffset.x = mainWight
}
//由于要使用到ScrollView的代理方法,所以vc需要继承UIScrollViewDelegate,并设置
scrollView.delegate = self
//调用代理方法
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
imageChange()
}
这样就可已无限滑动的
4.完成轮播下方的button按钮
//轮播图下面的半透明背景视图
let liView = UIView()
//装轮播图下方小按钮的数组
var buttons = [UIButton]()
//装轮播图下方小按钮
let buttonsView = UIView()
//当前选中的按钮下标
var buttonIndex = 0
//添加liView
view.addSubview(liView)
liView.snp.makeConstraints { (make) in
make.left.equalToSuperview()
make.top.equalTo(hight-30)
make.width.equalTo(mainWight)
make.height.equalTo(30)
}
//生成button
for index in 0..<images.count {
let tempButton = UIButton(type: .custom)
tempButton.backgroundColor = UIColor.white
//tag值(标签值)
tempButton.tag = index + 1
//点击事件
tempButton.addTarget(self, action: #selector(clickButton(_ :)), for: UIControlEvents.touchUpInside)
//圆角半径为5
tempButton.layer.cornerRadius = 5
buttons.append(tempButton)
}
//添加buttonView
liView.addSubview(buttonsView)
buttonsView.snp.makeConstraints { (make) in
make.height.equalTo(10)
make.width.equalTo(20*buttons.count)
make.center.equalTo(liView)
}
//摆放button
//遍历buttons
for (index,button) in buttons.enumerated() {
buttonsView.addSubview(button)
button.snp.makeConstraints { (make) in
make.width.height.equalTo(10)
make.top.equalToSuperview()
make.left.equalTo(20*index)
}
}
//button事件
@objc func clickButton(_ sender:UIButton){
buttonIndex = sender.tag - 1
index = buttonIndex + images.count
imageChange()
}
//修改imageChange方法为
func imageChange() {
if scrollView.contentOffset.x > mainWight{
index += 1
buttonIndex += 1
if buttonIndex == images.count{
buttonIndex = 0
}
}
else if scrollView.contentOffset.x < mainWight{
if index == images.count{
index = images.count * 2
}
index -= 1
buttonIndex -= 1
if buttonIndex == -1{
buttonIndex = images.count - 1
}
}
imageView1.image = images[(index - 1)%images.count]
imageView2.image = images[index%images.count]
imageView3.image = images[(index + 1)%images.count]
for button in buttons {
button.backgroundColor = UIColor.white
}
buttons[buttonIndex].backgroundColor = UIColor.red
scrollView.contentOffset.x = mainWight
}
最后git代码:https://github.com/Liushaungxi/LearnSwift(List2)
网友评论