UIStackView 线性文档流布局

WechatIMG393.png

WechatIMG394.png

会员中心.gif

以上三个页面全部使用UIStackView 作为容器搭建完成

首先看一下 UIStackView 实现线性布局结构图

UIStackview线性布局框架.jpg

具体步骤

创建相关视图

    override func viewDidLoad() {
        super.viewDidLoad()
        let scrollView = UIScrollView()
        scrollView.backgroundColor = UIColor.red
        let stackView = UIStackView()
        stackView.axis = .vertical // 纵向布局
        stackView.distribution = .equalSpacing // 每个item之间间距相同
        stackView.spacing = 20 // 相邻item之间间距
        stackView.alignment = .center // 居中对齐，不对item进行横向拉伸
        view.addSubview(scrollView)
        scrollView.addSubview(stackView)
        
        for i in 0..<10 {
            let itemView = UIButton()// 为了演示效果这里采用 uibutton，点击消失对 UIStackView 布局的影响
            itemView.setTitle("View\(i)", for: .normal)
            itemView.addTarget(self, action: #selector(handle), for: .touchUpInside)
            itemView.backgroundColor = .green
            stackView.addArrangedSubview(itemView)
        }
    }
    @objc func handle(btn:UIButton) {
        UIView.animate(withDuration: 0.25) {
            btn.isHidden = true
        }
    }

UIScorllview 约束设置

        scrollView.snp.makeConstraints { (make) in
            make.edges.equalTo(self.view)
        }

UIStackView 约束设置,关键步骤，设置 stackView 定宽或者像下面这样，依赖于 scrollView 的父视图宽度，高度依赖栈内子视图将其撑开，并撑开 scrollView 的 contentSize

        stackView.snp.makeConstraints { (make) in
            make.left.right.equalTo(self.view)
            make.top.bottom.equalTo(scrollView)
        }

UIStackView 栈内子视图约束设置

            itemView.snp.makeConstraints { (make) in
                make.height.equalTo(200)
                make.width.equalTo(self.view.frame.width - 40)
            }

预览效果

线性布局效果.gif

总结

UIStackView 是 苹果官方在iOS 9.0 推出的非常先进的容器视图，结合自动布局能够快速的帮助开发者完成各种布局效果。我在开发《海马体照相馆》app 的过程中大量的使用了 UIStackView，有时间的话分享一篇 UIStackView 的其他方面的应用。

Demo 地址（欢迎大家留言，相互学习）：https://github.com/muxueChen/learnStackView