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

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

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

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

添加元素

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

中心

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

(提示您不需要运行模拟器看到布局,只需点击屏幕底部的View as iPhone x,如下面的截图所示。)

Iphone

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

中心更改

这是因为我们没有为元素指定固定位置。要解决此问题,我们将使用约束。

将约束应用于UI元素

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

中心水平

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

垂直间距

现在,单击"添加新约束"按钮并选择高度和单击添加2约束。

添加2个约束

单击右下角标签,控制从标签拖动到视图内的任意位置,然后选择"尾随空间到集装箱保证金"。同样选择,垂直间距到底部布局指南。

(提示要一次选择多个选项,请按shift并选择选项。确保在选择所有内容之前不释放班次。)

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

应用约束后的视图

堆栈视图

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

Stack View

现在,选择前两个按钮 - 选择一个按钮,按command然后选择第二个。要将它们嵌入到堆栈视图中,请转到editor→嵌入In→堆栈视图。

OR

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

水平堆栈视图

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

水平堆栈视图

选择此堆栈视图后,转到属性检查器。将分布更改为等于填充并且间距为10.

分布

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

垂直堆栈视图

现在您的视图看起来像

垂直堆栈视图

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

属性检查器

现在,您的视图应如下所示

按钮视图

最后一步是为此堆栈设置约束查看。

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

新约束按钮

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

向堆栈视图添加约束

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

添加约束到Stack

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

自动布局

这就是我们对自动布局所做的全部工作。在下一章中,我们将讨论动画。