“我报名参与金石方案1期挑战——瓜分10万奖池，这是我的第3篇文章，点击检查活动概况”

前言

在前两篇文章讲述了UIStackView布局思维，运用办法以及一些实用的事例，在事例中运用xib结合UIStackView，缺少一些对纯代码的弥补，这篇文章，我们主要聊聊怎么运用StackView来写纯代码布局。

  • 运用UIStackView来简化iOS的界面布局
  • UIStackView之一问一答

即便说过许多StackView的好，可是仍是许多人认为杂乱的页面用不上，其实真实理解了StackView的布局思维，不论是结构层级简略的布局亦或许杂乱的布局，也不论是运用Inferface Builder来构建UI，仍是运用纯代码，都能够游刃有余。

下面，我会运用swift演示运用纯代码是怎样布局的。如果有爱好，点击下载Demo检查效果。下面所展示的代码只是截取的布局部分。

简略布局

简略布局，我概括为，一行或许一列的元素组成的。一般有类页面如设置页、通讯录。如下布局中，一个hStack包含了image、label、button，组成了一个简略的布局。

纯代码布局，也可以一样的简洁

结构如下：
HStack: image + label + Button

/// 懒加载 
private lazy var vStack = VStack(spacing: 16)

Note： 这儿的VStack实际上是对UIStackView的封装以及增加了便携式的初始化，并不是SwiftUI中VStack。

/// 布局代码
addSubview(hStack)
hStack.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16))
}
/// 这儿是运用的扩展办法
iconView.sizeConstraint = CGSize(width: 40, height: 40)
title.heightConstraint = 30
follow.sizeConstraint = CGSize(width: 60, height: 30)
hStack.addArrangedSubviewsMakeConstraint([iconView, title, hStack.spacer(), follow])

Note： sizeConstraint、heightConstraint、widthConstraint、addArrangedSubviewsMakeConstraint、spacer()这些都是自己增加分类办法。

嵌套布局

嵌套布局，我概括为，界面的元素多样化，需要运用两个以上StackView的布局（不同摆放方向）。

纯代码布局，也可以一样的简洁

结构如下：
HStack：image + VStack + Button
VStack：label + label

/// 懒加载
private lazy var hStack = HStack(spacing: 8, alignment: .center, distribution: .fill)
private lazy var vStack = VStack(spacing: 4, alignment: .fill, distribution: .fill)

Note：swift能够写出比OC更多的语法糖，这是语法的特性所在。从初始化办法上就能够看出。

addSubview(hStack)
hStack.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16))
}
iconView.sizeConstraint = CGSize(width: 50, height: 50)
helpView.sizeConstraint = CGSize(width: 30, height: 30)
hStack.addArrangedSubviewsMakeConstraint([iconView, vStack, hStack.spacer(), helpView])
vStack.addArrangedSubviews([title,
                            detail])

动态更新布局

动态更新布局，我概括为，界面的元素多样化，一些界面上的元素会有种状态，继而影响到其他的元素，最终会影响到整体的布局。

纯代码布局，也可以一样的简洁

结构如下：
HStack：image + VStack + Button
VStack：HStack + label
HStack：label + label

其实整体的布局，与上面的比如中仅仅只要纤细的差别，这儿想要体现的是，修改stackView的特点以及修改stackView中的摆放视图的width、height或许hidden相关的特点，都会使stackView重新布局。

private lazy var hStack = HStack(spacing: 8, alignment: .center, distribution: .fill)
private lazy var vStack = VStack(spacing: 4, alignment: .fill, distribution: .fill)
private lazy var titleHStack = HStack(spacing: 4, alignment: .center, distribution: .fill)
private var isFollow: Bool = false {
    didSet {
        self.follow.isHidden = isFollow
        self.followLabel.isHidden = !isFollow
    }
}

addSubview(hStack)
hStack.snp.makeConstraints { make **in**
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16))
}
iconView.sizeConstraint = CGSize(width: 50, height: 50)
follow.sizeConstraint = CGSize(width: 60, height: 30)
hStack.addArrangedSubviewsMakeConstraint([iconView, vStack, hStack.spacer(), follow])
vStack.addArrangedSubviews([titleHStack,
                            detail])
followLabel.sizeConstraint = CGSize(width: 50, height: 15)
titleHStack.addArrangedSubviewsMakeConstraint([title, followLabel, titleHStack.spacer()])

滚动布局

StackView有时候也能够运用配合ScrollView一同运用，效果好像TableView，可是这个则需要运用好ScrollView的contentSize，运用frame布局，则需要手动设置；运用主动布局，则需要ScrollView中的contentView来填充，最终ScrollView的contentSize取决于contentView。

纯代码布局，也可以一样的简洁

有时候，写个简略的页面，真的不需要那么多署理，这不是更简略吗？

view.addSubview(scrollView)
scrollView.snp.makeConstraints { make **in**
    make.edges.equalTo(view.safeAreaLayoutGuide)
}
scrollView.addSubview(vStack)
vStack.snp.makeConstraints { make **in**
    make.edges.equalToSuperview();
    make.width.equalToSuperview()
}

结尾

文章运用了几个简略的实例，一点点的演变了不同的布局方法，在我们日常开发中，或许有那些简略极致的页面，或许也有那些花里胡哨的页面，不论怎么，布局的思路都不会变，其实从实例中能够看出，布局代码所占篇幅并不多，在配合运用一些扩展类，其实运用StackView纯代码布局是不是比幻想中要香许多呢。