小而美的Swift&iOS教程04-BasicImageSlider

BasicImageSlider.gif

这个教程会涉及如下内容

---

• 最基础的ScrollView实现轮播效果
• 给Navigation Item添加图片元素
• 使用PageControl显示当前页面位置

ScrollView

---

ScrollView可以使的大小超出屏幕范围的内容得以在设备上显示与交互，之前的TableView滚动列表也是基于ScrollView实现的，那么ScrollView一个比较常规的应用就是轮播，今天我们就来实现一个高大上的全屏轮播效果。

添加ScrollView

同样的，我们使用storyboard拖拽加入一个ScrollView，然后在Layout中设置为全屏。
建立一个数组用来存放轮播图片相关信息

    struct scrollContent{
        var image: String!
        var slogan: String!
        init(image: String, slogan: String){
            self.image = image
            self.slogan = slogan
        }
    }
    var scrollContentList = [scrollContent(image: "iPhone7-red", slogan: "Now in red"),
                             scrollContent(image: "iPhone7-black", slogan: "This is 7")
                            ]

向ScrollView中添加图片

//初始化ImageView
let imageView = UIImageView(image: UIImage(named: "iPhone7-red"))
//设置ImageView的位置和大小
imageView.frame = CGRect(x: imageScrollView.frame.width * CGFloat((imageViewList.count)), y: 0, width: imageScrollView.frame.width, height: imageScrollView.frame.height)
//向数组中添加图片
imageViewList.insert(imageView, at: (imageViewList.endIndex))
//将图片加入ScrollView
imageScrollView.addSubview(imageView)

我们可以把依照数组信息向制定ScrollView添加信息的操作封装成一个函数

    func addImageView(to srcollView: UIScrollView? ){
        
        if let myScrollView = srcollView{
            
            let width = myScrollView.bounds.width
            let height = myScrollView.bounds.height
            
            if scrollContentList.count > 0{
                for index in 0...(scrollContentList.count-1){
                    let imageView = UIImageView(image: UIImage(named: scrollContentList[index].image))
                    imageView.frame = CGRect(x: width * CGFloat(index), y: 0, width: width, height: height)
                    myScrollView.addSubview(imageView)
                }
            }
        }
    }

接下来实现scrollViewDelegate来响应滑动操作

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        print(scrollView.contentOffset.x,scrollView.contentOffset.y)
        let offset = scrollView.contentOffset.x
        if offset == scrollView.frame.width{//停留在第一页时淡入slogan
            UIView.animate(withDuration: 1, animations: {
                self.sloganLabel.text = self.scrollContentList[1].slogan
                self.sloganLabel.textColor = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
                self.sloganLabel.alpha = 1
            })
        } else if offset == 0{//停留在第2页时淡入slogan
            UIView.animate(withDuration: 1, animations: {
                self.sloganLabel.text = self.scrollContentList[0].slogan
                self.sloganLabel.textColor = UIColor(red: 0.85, green: 0.17, blue: 0.23, alpha: 1)
                self.sloganLabel.alpha = 1
            })
        } else { //开始滑动时淡出slogan
            UIView.animate(withDuration: 0.5, animations: {
                self.sloganLabel.alpha = 0
            })
            
        }
    }

添加pagecontrol来指示当前页数

@IBOutlet weak var pageControl: UIPageControl!
 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let page = scrollView.contentOffset.x / scrollView.frame.width
        pageControl.currentPage = Int(page)
    }

加入navigationcontroller避免scrollView整体向下偏移，在viewDidLoad加入如下语句

self.automaticallyAdjustsScrollViewInsets = false

这样我们的图片轮播就完成啦～