使用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 ，然后从文本字段拖动到视图顶部。请看下面的屏幕截图以进行澄清。