使用Swift从头开始安装iOS：自动布局基础

在上一篇文章中，我们创建了一个简单的应用程序，仅带有标签和按钮。 尽管简单，但该应用程序仍然存在一些布局问题。 在本教程中，您将学习如何使用Apple的布局系统“自动布局”解决这些问题。 让我们从一个新项目开始。

介绍

选择“ 单一视图应用程序”模板，打开Xcode并创建一个新项目。 将应用程序命名为“ 自动布局” ，并将“ 设备”设置为“ 通用” 。 告诉Xcode将项目保存在何处，然后单击Create 。

请记住，在本系列前面的文章中，通用应用程序可以在iPad和iPhone（以及iPod Touch）上运行。 这意味着用户界面需要适应正在运行的设备。 让我们探讨一下它是如何工作的以及实现该目标需要解决的问题。

在项目中，打开Main.storyboard并将五个标签添加到视图控制器的视图。 正如您在下面的屏幕截图中所看到的，我在视图的中心放置了一个标签，在每个角落放置了一个标签。

您可能已经注意到，Xcode试图帮助您定位标签，当您接近视图的边缘或中心时会显示蓝色的虚线基准。 坚持使用Xcode的建议，并使标签在视图的边缘和中心处固定到位。

因为我们正在创建通用应用程序，所以该应用程序在iPad和iPhone上都应该看起来不错。 在模拟器中运行该应用程序，然后选择iPad Retina （或任何其他iPad模拟器）作为目的地。

哎哟。 用户界面在iPad上看起来并不那么好。 仅左上角标签正确放置。

将目的地更改为iPhone 6（或任何其他iPhone模拟器），然后再次运行该应用程序。

用户界面在iPhone上看起来更糟。 在iPhone上甚至看不到两个标签。 与在iPad上一样，只有左上角的标签位置正确。

本教程的目的是通过自动版式解决这些用户界面问题。 在应用自动版式之前，我们需要知道它是什么以及它如何对我们提供帮助。

什么是自动版式？

几年前，随着iOS 5的发布，自动布局是在iOS上引入的。 自动布局是一种描述性且基于约束的布局系统。 这只是意味着您告诉布局引擎您希望如何布置用户界面。 换句话说，您无需描述布局引擎需要将按钮放置在特定位置，而是描述了按钮的放置位置。

约束用于定义或描述布局。 例如，您告诉布局引擎，按钮必须在其包含的视图中水平居中。 布局引擎采用一组约束，将其转换为方程式，并在用户界面中设置元素的框架。 为了使这项工作有效，您应该添加尽可能多的约束以避免对元素位置的任何歧义。

自动版式的优点很简单。 由于自动版式具有描述性，因此版式引擎可以更新用户界面，而不管您的应用程序所运行的设备的尺寸或方向。 这也使您的应用程序永不过时。 当Apple推出具有新屏幕尺寸的设备时，您的应用程序将自动调整其用户界面以适应新屏幕尺寸。 如果您对应用程序的用户界面进行硬编码，则情况并非如此。

既然您知道了什么是自动版式及其工作原理，现在该探讨我们如何应用自动版式来解决项目中的版式问题。

添加约束

您还记得在将标签添加到视图控制器的视图时看到的蓝色准则吗？ 这些不是您要查找的约束。 就像我说的，它们是帮助您放置用户界面元素的准则。 它们不过是Xcode提示您遵守Apple的人机界面指南的提示 。

有多种方法可以向用户界面元素添加约束。 一种方法是使用Interface Builder底部的Pin菜单。 选择左上方的标签，然后单击底部的“ 固定”菜单。

左上方的标签还没有任何限制。 让我们通过将标签固定在其父视图或父视图的左上方来更改它。 使用“ 固定”菜单，我们可以同时添加多个约束。 我们还要添加约束，通过选中标记为Width和Height的复选框来将标签的宽度和高度设置为固定。 这就是“ 固定”菜单的外观。 请注意，未选中“ 限制到边距 ”复选框。

现在，在“ 固定”菜单的底部，按钮的文本显示为“ 添加4个约束” 。 Xcode告诉我们我们还没有添加任何约束。 单击按钮添加我们在“ 引脚”菜单中指定的约束。 标签的位置现在由四个约束定义或描述。 这在情节提要中通过标签周围的四根蓝色线条可视化。

在继续之前，请在右上，左下和右下标签上添加约束。 将每个标签固定到其父视图的最近边缘很重要。 例如，右下角的标签需要固定在视图控制器视图的底部边缘和右侧边缘。 这是右下角标签的“ 固定”菜单的外观。

在适当的约束条件下，在模拟器中运行应用程序。 这就是您应该在iPhone 6模拟器中看到的内容。 看起来好多了。 中心标签还没有任何限制。 让我们现在添加一些。

使用底部的“ 固定”菜单，选择中心标签并添加两个约束以固定标签的宽度和高度。 您是否期望看到两条蓝线？ 如果正确添加了约束，则应该看到红线，而不是蓝线。 这是为什么？ 红线表示有些不对劲。 Xcode告诉我们，标签没有足够的约束来避免歧义。 标签位置的描述目前不完整。

我们已经告诉Xcode，标签应具有固定的宽度和固定的高度。 我们尚未定义标签的水平和垂直位置。 您可以通过检查左侧面板中的错误来查找有关该问题的更多信息。 您应该在“ 视图控制器场景”的左侧看到一个红色箭头。 单击箭头以读取错误消息。

错误告诉我们X和Y位置未定义。 如果单击错误旁边的红色圆圈，Xcode将为您提供通过添加缺少的约束来解决问题的选项。 让我们不要懒惰，自己解决问题。

为了使标签居中，无论运行应用程序的设备的尺寸和方向如何，我们都无法使用“ 固定”菜单。 相反，我们使用“ 固定”菜单左侧的“ 对齐 ”菜单。 选中标签后，打开“ 对齐”菜单并添加两个约束以使标签在其父视图中居中。 通过添加这些约束，红线将替换为蓝线。

检查约束

现在是时候了解有关约束的更多信息了。 约束不是一成不变的，而且肯定不是魔术。 您可以添加，删除和修改约束。 例如，让我们看一下中心标签的约束。 选择标签并打开左侧的“ 尺寸检查器 ”。 约束部分列出了当前选择的约束，即中心标签。 每个约束都有一个“ 编辑”按钮，用于修改约束的属性。

单击显示为Width Equals：42的约束的“ 编辑”按钮。 通过修改Constant属性，可以更改标签的宽度。 将“ 常量”设置为100，然后按Enter或Return 键以提交更改。 情节提要中标签的大小立即反映了我们所做的更改。

如果多个约束相互冲突，则约束的优先级属性很重要。 让我们用一个例子来说明。 选择中心标签并添加新的约束，以将标签的宽度设置为200 。 您已经知道如何执行此操作。 当您添加新约束时，Xcode抱怨它不能同时满足两个约束。

选择标签并打开“ 大小检查器”以检查约束。 设置标签的宽度有两个约束。 单击约束的“ 宽度等于：100”的“ 编辑”按钮，然后将“ 优先级”设置为“ 高（750）” 。 标签的宽度在情节提要中变为200 ，蓝线之一从实线变为虚线，表示此约束被优先级更高的约束所覆盖。 虚线约束仍处于活动状态，但与将标签的宽度设置为200的约束相比，其优先级较低，因此当前未应用。

还有另一种解决问题的方法。 将两个约束的优先级都设置为Required（1000） 。 同时，将=更改为 > =表示读取Width Equals：100的约束。 这也解决了问题。 结果不一样。 这两个约束都有效，共同定义了标签的位置。 现在，约束条件定义了标签的宽度应大于或等于100 。

添加更多约束

我已经提到过，有几种方法可以在Interface Builder中添加约束。 让我们看看另一种流行的技术。 打开右侧的对象库 ，然后在视图控制器的视图中添加一个文本字段。 要将文本字段固定在视图顶部，请选择文本字段，按Control ，然后从文本字段拖动到视图顶部。 请看下面的屏幕截图以进行澄清。

从弹出的菜单中，选择“ 垂直间距到顶部布局指南” 。 顶部布局指南是一种特殊的指南，位于状态栏和导航栏的底部边缘。 顶部布局指南的位置取决于顶部是否存在状态栏和导航栏。

现在，文本字段应固定在视图顶部。 不出所料，Xcode告诉我们文本字段没有足够的约束来明确描述其位置。

选择文本字段，按Control ，然后将其拖动到文本字段左侧的标签。 从菜单中选择水平间距 。 对文本字段右侧的标签重复此步骤。 我们快到了。

要将标签的高度设置为固定，请选择文本字段，按Control ，然后从文本字段的顶部拖动到文本字段的底部。 从出现的菜单中选择“ 高度 ”。 这定义了有关文本字段本身，其高度的约束。

我相信您同意自动版式的基本知识很容易理解。 但是，有时有时会变得非常复杂。 到目前为止，我们介绍的是基本知识，即自动布局可以发挥作用。 让我们通过看一个很常见的问题来完成本教程，该问题可以通过“自动布局”轻松解决。

更多约束

您希望子视图跨越其父视图的宽度和高度并不少见。 例如，表视图的大小通常与其父视图相同。 让我们看看如何使用自动版面处理。

将对象库中的视图添加到视图控制器的视图。 打开“ 属性”检查器，然后将视图的背景设置为蓝色，以确保其突出。 在iPad模拟器中运行该应用程序，以了解我们从什么开始。

您可以按Command +向左箭头或Command +向右箭头来旋转设备。 看起来该视图保持了其宽度和高度，但它固定在左上方。 目标是使其跨越其父视图的宽度和高度。 选择蓝色视图，然后使用“ 固定”菜单添加以下约束。

在单击添加4约束之前，请确保您要添加与蓝色视图的超级视图相关的约束。 那是什么意思？ 约束描述两个视图之间的关系。 您将对蓝图及其最接近的兄弟对象应用这些约束。 但是，我们想要的是添加约束，以定义蓝色视图相对于其包含视图或父视图的位置。 您可以通过单击数字旁边的小三角形（定义约束的常数）来指定约束定义的视图。 请看以下屏幕截图以进行澄清。

仔细检查每个约束是否适用于蓝色视图及其父视图或包含视图。 准备好后，添加四个约束。

您可能会看到带有数字的橙色线，而不是蓝色的线。 在Xcode中，橙色表示警告。 橙色线警告您，蓝色视图的当前位置与运行时蓝色视图的位置不一致。 您是否注意到蓝色视图的父视图边缘的橙色虚线？ 如果您刚刚应用的约束有效，则这些虚线表示蓝色视图的框架。 那是在运行时发生的。

如果您不相信我，建议您在iPad模拟器中运行该应用程序，以便自己查看一下。 即使您将模拟器从纵向旋转到横向，反之亦然，蓝色视图也会覆盖其父视图的宽度和高度。

橙色线不必要地使工作区混乱，您所看到的并不是运行时得到的。 最好通过更新蓝色视图的框架来解决此问题。 这很简单。 选择蓝色视图，然后从右下角的“ 解决自动布局问题”菜单中选择“ 更新框架” 。

确保您了解我们在本教程中介绍的内容，因为在本系列的其余部分中将需要它。 在下一个教程中，我们将讨论表视图，并将应用本教程中讨论的一些技术。 要了解有关自动版式的更多信息，请浏览Apple的自动版式指南 。

结论

要说“自动布局”功能强大，则轻描淡写。 即使我们只是在本教程中进行了简单介绍，您现在也应该了解什么是自动版式以及它可以为您做什么。

在本系列的其余部分中，我们将继续使用“自动布局”。 如果您遇到困难，请确保重新访问本教程或在评论中添加一行。 您也可以在Twitter上与我联系。

翻译自: https://code.tutsplus.com/tutorials/ios-from-scratch-with-swift-auto-layout-basics--cms-25520