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

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

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

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

添加元素

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

现在，尝试改变方向，我们会看到右下角没有出现，而中心也不在中心。

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

选择 iPhone 版本和方向。我们会看到 UI 元素排列不正确。因此，当我们改变方向、设备或两者时，右下标签将消失，并且中心不会位于中心。

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

单击中心标签，按下 Control 并将其拖动到视图内的任意位置，然后释放。现在你一定看到了 -

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

现在，单击“添加新约束”按钮并选择高度和宽度，然后单击“添加 2 个约束”。

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

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

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

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

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

或者

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

水平堆栈视图将如下图所示。

选择此堆栈视图后，转到属性检查器。将分布更改为均匀填充，并将间距更改为 10。

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

现在您的视图将如下所示 -

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

现在，您的视图应如下所示 -

最后一步是对此堆栈视图进行约束。

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

这将打开一个新窗口，我们必须在其中执行下一个屏幕截图中显示的步骤。

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

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