使用Swift 2自动布局进行iOS开发

当我们制作iOS应用程序并在该应用程序中添加UI元素时，它们在一台设备上看起来很完美。不过，现在我们应该在其他设备上尝试相同的应用程序。我们肯定会看到用户界面发生重大变化，但有些元素可能也不会出现。

自动布局是我们将用于解决此问题的技术。在本章中，我们将了解如何使自动布局，应用约束和堆栈视图使您的应用程序在每个设备上看起来完美和最佳。

我们将从创建一个新的单一视图应用程序开始。

添加元素

在视图的顶部中心添加标签，在视图的右下角添加一个标签，如下所示 -

现在，尝试更改方向，我们将看到右下方没有出现，而中心不在中心。

（ 提示 - 您不需要运行模拟器来查看布局，只需单击屏幕底部的View as - iPhone x，如下面的屏幕截图所示。）

选择iPhone版本和方向。我们将看到UI元素没有正确排列。因此，当我们更改方向，设备或两者时，右下标签将消失，中心将不在中心。

发生这种情况是因为我们没有指定元素的固定位置。要解决这个问题，我们将使用约束。

将约束应用于UI元素

单击中心标签，按控制并拖动视图内的任何位置，然后释放。现在你必须看到 -

在Container中 选择“ 水平居中” 。再次，重复上述步骤并选择“垂直间距到顶部布局指南”。

现在，单击Add new constraint按钮并选择height和width，然后单击Add 2 Constraints。

单击右下角标签，控制从标签拖动到视图内的任何位置，然后选择“尾随空间到容器边距”。同样选择，垂直间距到底部布局指南。

（提示 - 要一次选择多个选项，请按shift并选择选项。确保在选择所有选项之前不释放班次。）

应用所有约束后，视图应如下所示 -

堆栈视图

堆栈视图通过在堆栈中排列元素来工作。排列后，我们只定义一次约束，并相应地排列所有元素。要从堆栈视图开始，请创建以下视图，这在其他设备中看起来不会更好。但是，我们将使其适用于本节中的其他设备。

现在，选择前两个按钮 - 选择一个按钮，按下命令，然后选择第二个按钮。要将它们嵌入堆栈视图，请转到编辑器→嵌入→堆栈视图。

要么

在右下角，有一个选项选择此选项，这会将视图嵌入到堆栈视图中。

水平堆栈视图

水平堆栈视图将如下面的屏幕截图所示。

选择此堆栈视图时，请转到属性检查器。将分配更改为同等填充和间距为10。

现在，选择此堆栈视图和底部按钮，然后再次嵌入堆栈视图。这次堆栈视图轴将是垂直的，而在上一个堆栈视图中，它是水平的。

垂直堆栈视图

现在您的视图看起来像 -

选择此堆栈视图时，请转到其属性检查器并确保它与下面的屏幕截图相匹配。

现在，您的观点应如下所示 -

最后一步是为此堆栈视图设置约束。

选择堆栈视图→单击添加新约束按钮。

这将打开一个新窗口，我们必须按照下一个屏幕截图中显示的步骤操作。

向堆栈视图添加约束

以下屏幕截图将介绍如何向堆栈视图添加约束。

这就是我们对自动布局所做的一切。在下一章中，我们将讨论动画。

这就是我们对自动布局所做的一切。在下一章中，我们将讨论动画。