swift 利用scrollView实现图片无线轮播(snapK

2018-09-12  本文已影响0人  MrLSX
效果图: QQ20180912-143121.gif

原理: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)

上一篇下一篇

猜你喜欢

热点阅读