美文网首页
swift 利用scrollView实现图片无线轮播(snapK

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

作者: MrLSX | 来源:发表于2018-09-12 15:22 被阅读0次
    效果图: 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)

    相关文章

      网友评论

          本文标题:swift 利用scrollView实现图片无线轮播(snapK

          本文链接:https://www.haomeiwen.com/subject/aubvgftx.html