UIStackView简介

UIStackView是iOS 9+支持的布局控件，主要用于线性布局，可以简化布局，减少约束的使用。之前学过些WPF，它也有一个类似的布局控件。不得不说用起来确实很方便。

应用场景

主要用于线性布局，支持横向和纵向

主要属性

axis属性决定布局方向，水平或垂直；
distribution设置布局方向的布局方式；
alignment设置垂直于布局方向的方向的布局方式；
spacing，使用该属性可以设置子视图的最小间距；
isBaselineRelativeArrangement，该属性决定了垂直方向的视图间距是否从基准线开始计算；
isLayoutMarginsRelativeArrangement，该属性决定了子视图的布局是否相对于他的 layout margins。

本文没有涉及最后两个属性。

为什么要使用UIStackView

UIStackView可以在一定程度上减少约束，简化布局，并且使用灵活。在下一节，我将用两种布局思路实现一个简单的登录界面。

使用UIStackView需要注意的地方

UIStackView本身是基于Auto Layout实现的，也就是说它会自动帮你生成一些约束。因此，当你给子视图添加约束时，注意不要跟这些隐含的约束冲突。
在处理含有intrinsicContentSize属性控件的时候，注意Content Hugging和Content Compression Resistance约束的优先级，否则会造成拉伸错误。
UIStackView没有intrinsicContentSize属性。

使用UIStackView实现简单的登录界面

这一节，我将使用两种思路实现一个简单的登录界面。思路一参照 Auto Layout Guide，将一个UILabel和一个UITextField放入到同一个UIStackView中，也就是有几行就会有几个UIStackView我称之为以行为主。思路二，将所有的UILabel放入到一个UIStackView中，将所有的UITextField放入到一个UIStackView中，也就是有几列数据就会有几个UIStackView，我称之为以列为主。

思路一：以行为主

这种思路参照了Auto Layout Guide，比较容易想到。每当需要添加一行时，添加一个UIStackView就好了，如下图所示：

以行为主

图中，

白色的矩形框表示UIStackView
粉色的矩形框表示UILabel
绿色的矩形框表示UITextField

需要的约束有：

对于最外层的UIStackView，为垂直方向布局：

leading等于父视图的leadingMargin
trailing等于父视图的trailingMargin
top等于topLayoutGuide的bottom

对于所有的UILabel

Content Hugging的优先级为251

对于所有的UITextField

Content Hugging的优先级为250
width相等

思路二：以列为主

这种思路以列为先，有几列数据就设置几个UIStackView。

以列为主

需要的约束有：

对于最外层的UIStackView，为垂直方向布局：

leading等于父视图的leadingMargin
trailing等于父视图的trailingMargin
top等于topLayoutGuide的bottom

对于所有的UILabel

Content Hugging的优先级为251

对于所有的UITextField

Content Hugging的优先级为250

对于所有的子UIStackView

高度相等

另外，需要注意的是，为了使UILabel和UITextField更好地对齐，需要设置UILabel所在的UIStackView的Distribution为 * Fill Equally*。

对比

上述两种思路均可以达到目的，复杂性也比较类似。但是就灵活性而言，思路二更好一些。每当需要添加或删除一行时，思路一可能需要重新设置宽度约束，而思路二不需要调整约束。但是，Content Hugging的优先级二者都需要考虑。

讨论

苹果引入UIStackView的初衷是为了降低布局的复杂度，并建议优先采用它解决布局问题。从本文可以看出，UIStackView的使用比较简单，可以手动额外添加所需的约束，比较灵活。此外，本文中还有其他一些UIStackView特性没涉及到，比如说动态添加元素等，你可以参考下官方的文档。项目示例代码见GitHub