在本教程中，我们将讨论和实现自iOS 9以来引入的功能强大的组件UIStackViews，以在我们的iOS应用程序中构建更快，更强大的UI。

iOS UIStackView

顾名思义，它可以水平或者垂直堆叠子视图。
这意味着在一列或者一行内。
UIStackViews是构建UI的首选方式，因为它们会自动为您创建大多数约束。
同样，从StackView添加或者删除子视图非常容易。

UIStackView包含以下重要属性：

axis：子视图所沿的轴：水平或者垂直。
distribution：子视图如何在堆栈内部排列。
分布包括以下四种类型：

• fill
• fillEqually
• equalSpacing
• fillProportionally
• equalCentering

对齐：子视图如何对齐：

• 前导–左对齐
• 尾随–右对齐
• 居中
• 填充–占用空间

启动XCode并创建一个新的单视图应用程序。
在视图控制器场景内，添加三个不同大小的视图。

创建一个UIStackView

我们可以通过选择UI元素并将其嵌入来创建UIStackView：

在上面的插图中，我们演示了不同的对齐方式如何改变子视图在UIStackView中的位置。

让我们创建另一个示例，其中我们将使用distribution属性。

在上图中，我们在UIStackView中水平堆叠了三个Button。
请注意，在左侧窗格中，当分布未设置为均匀填充时，会弹出红色错误图标。
如下所示：

为什么显示此错误？ UIStackView不是要自动设置子视图的约束吗？此错误是什么意思，以及如何解决？

我们将在下一节中讨论所有这些。

当视图堆叠在UIStackView中时，视图的先前约束将被删除。

内容拥抱和内容压缩抵抗优先

内容拥抱优先级意味着拥抱/拥抱视图的内容大小。
当UIStackView大小增加时，具有较低优先级的View会展开，反之亦然。
默认值为250。
这意味着值为251或者更大的视图将具有较小的尺寸。
值等于或者小于249的视图将占用UIStackView中的可用空间。

内容压缩抵抗优先级意味着抵抗视图大小的压缩。
具有较高值优先级的View表示，如果减小UIStackView的大小，则不会压缩视图的大小。
默认值为750。

我们已将其中一个按钮的内容拥抱属性设置为较小的值。
因此，它占用更多空间。

当您在UIStackView中添加UILabel和UITextField时，默认情况下，XCode使UITextField的内容较少，具有优先级，并且具有更多可用空间。

让我们玩一下内容压缩优先级：

我们通过更改文本来更改了按钮的宽度。
现在，阻力越大，其产生的阻力就越大。
因此，"使用Google按钮登录"(752)保持其完整的固有大小，因为它的值大于"使用Facebook登录按钮"(751)。
尽管在正常情况下，"使用Facebook登录"按钮由于其长度应占据更多部分。

UIStackView的力量

UIStackView使我们不必在"自动布局"中设置约束。
我们也可以将StackViews彼此嵌套。
另外，我们可以为不同的方向和屏幕尺寸设置不同的属性。
在以下示例中，我们将调整StackViews内子视图的间距，并更改横向模式下的属性。

例子3

我们将方向更改为横向模式，并且在无需编写任何代码的情况下，在该模式下看起来就很漂亮。

我们也可以将UIStackView属性更改为不同的模式：

让我们看一下使用UIStackView的漂亮UI：

使用StackView的精美UI第1部分

我们在情节提要的ViewController中添加了一些随机视图。

让我们将一堆堆在自己的UIStackView中，并用父堆将其围起来。

我们将它们分别堆叠，然后平均地堆叠在垂直的UIStackView中。
但是我们需要确保尊重各个UIStackView属性：

我们创建UI的速度。
我们也可以在这些元素中进一步嵌套子视图或者UIStackViews。
让我们其中添加按钮：

我们在Orange View元素内添加了一个水平StackView。
请注意，在纵向模式下按钮的文本将被截断，而在横向模式下则不会被截断。
为了解决这个问题，我们可以在纵向模式下将StackView设置为垂直。

使用StackView的精美用户界面第2部分

让我们使用StackView创建另一个漂亮的UI。

将StackView添加到ViewController上：

我们现在创建了一个Vertical StackView，其中设置了边距和宽度。

在UIStackView中添加UIImageViews。

确保已将图像添加到资产文件夹。

按住选项并拖动UI元素以将其克隆。

使所有UIImageView的宽度和高度相等。

添加一个水平StackView。

添加一个大的UIImageView

使右侧列为屏幕宽度的三分之一

我们最初已将宽度硬编码为120。
现在，让我们删除该约束，使其成为视图宽度的三分之一：