UIStackView快速构建首次轮播效果

根据轮播的效果，首先定义轮播的配置参数，这里使用元组,设置别名

//（加载的图片名，标题，描述）
typealias pageConfigItem = (String, String, String)

    //MARK: Property

    //配置的图片及展示的标题文案 
    let pagesConfig = [("launch_guide_1".localImageName(), "", ""),
                       ("launch_guide_2".localImageName(), "", ""),
                       ("launch_guide_3".localImageName(), "", "")]

    //滚动用的scrollView，并设置isPagingEnabled为true
    lazy var scrollView: UIScrollView = {
        let view = UIScrollView(frame: .zero)
        view.isPagingEnabled = true
        view.showsHorizontalScrollIndicator = false
        view.showsVerticalScrollIndicator = false
        // 用来监听当前滑动到第几页
        view.delegate = self
        return view
    }()
    
    //加载展示用的UIStackView，设置axis为水平，distribution为fill
    lazy var pagesView: UIStackView = {
        let view = UIStackView(frame: .zero)
        view.axis = .horizontal
        view.distribution = .fill
        return view
    }()
    
    // 轮播的indecator
    lazy var bubbleView: YFPageControl = {
        let view = YFPageControl(pageCount: pagesConfig.count)
        view.backgroundColor = .red
        return view
    }()

使用UIScrollView 的delegate配合 计算变量 来记录页面切换时的下标及操作

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        let offset = scrollView.contentOffset.x
        let width = scrollView.bounds.size.width
        let safeWidth = width == 0 ? 1 : width
        currentPage = Int(round(offset / safeWidth))
    }
  
    var currentPage = 0 {
        willSet {
            if currentPage != newValue, newValue < pagesConfig.count {
                bubbleView.currentPage = newValue
                ensureBtn.isHidden = newValue != pagesConfig.count - 1
            } else {/* do nothing */}
        }
    }

进行UI布局，这里使用 snapkit

    func setupSubviews() {
        view.addSubview(scrollView)
        scrollView.addSubview(pagesView)
        view.addSubview(bubbleView)
        
        if #available(iOS 11, *) {
            scrollView.contentInsetAdjustmentBehavior = .never
        } else {
            automaticallyAdjustsScrollViewInsets = false
        }
     
        scrollView.snp.makeConstraints { (make) in
            if #available(iOS 11.0, *) {
                make.edges.equalTo(view.safeAreaLayoutGuide)
            } else {
                make.edges.equalToSuperview()
            }
        }
        
        pagesView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()

           //这里必须要设置高度，否则无法确定frame
            if #available(iOS 11.0, *) {
                make.height.equalTo(view.safeAreaLayoutGuide)
            } else {
                make.height.equalTo(UIScreen.main.bounds.height)
            }
        }
        
        bubbleView.snp.makeConstraints { (make) in
            make.left.equalToSuperview().offset(40)
            make.height.equalTo(8)
            if #available(iOS 11.0, *) {
                make.bottom.equalTo(view.safeAreaLayoutGuide).inset(60)
            } else {
                make.bottom.equalToSuperview().inset(60)
            }
        }
    }

配置好后仅需要在viewDidLoad调用相关的UI布局及数据的渲染即可

    override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationBarHidden = true
        setupSubviews()
        configPages()
    }
    
   //
    func configPages() {
        pagesView.subviews.forEach { (view) in
            view.removeFromSuperview()
        }
        
        pagesConfig.forEach { (tuple) in
            let page = YFGuidePageView(frame: .zero)
            page.config(imageName: tuple.0, titleTxt: tuple.1, contentTxt: tuple.2)
            page.snp.makeConstraints { (make) in
                make.width.equalTo(UIScreen.main.bounds.width)
            }
            pagesView.addArrangedSubview(page)
        }
    }