在iOS 11应用程序中使用自动布局

您是否曾经尝试过让应用在横向和纵向上都看起来不错？ 分开查看风景和肖像是否令人沮丧？ 制作同时支持iPhone和iPad的屏幕布局会让您发疯吗？

如果是，我将带给您一些好的做法，以克服构建支持从方向到不同屏幕尺寸的所有内容的UI的所有障碍。

Autolayout不仅使您可以轻松地在应用中支持不同的屏幕尺寸，而且还使国际化变得微不足道。 您不再需要为每种希望支持的语言制作新的笔尖或情节提要，其中包括从右到左的语言，例如希伯来语或阿拉伯语。

在此自动版式教程中，您将了解：

1. 支持纵向和横向的应用程序
2. iPhone和iPad的支持应用程序
3. 学习如何使用约束来布局视图
4. 使用尺寸类在不同坐标下显示视图元素
5. 使用堆栈视图可以简化布局复杂的UI的工作

我们的示例应用

图1 —在横向模式下查看（iPhone X）

图2 —以纵向模式查看（iPhone X）

图1和图2显示了我们将在本教程中构建的示例应用程序。 该应用程序支持横向和纵向方向，并且在构建时牢记iPhone和iPad的屏幕尺寸。

自动布局的基础

固定菜单
它位于编辑器的右下角，用于向不同的视图元素（如标签，按钮，文本字段）添加约束。 这些约束不过是不同视图边界之间的关系。 约束可以固定，也可以在运行时更改以达到动画目的。

图3 — Pin菜单

对齐菜单
它位于图钉菜单的左侧，可用于水平和垂直对齐中心的视图。

图4 —对齐菜单

文件大纲
它位于编辑器的左侧，可用于查看视图的层次结构，还可以查看特定视图控制器内部添加的所有约束。

图5 —文档大纲

属性检查器
这用于自定义视图属性，例如背景颜色和字体。

属性检查器

摆出我们的观点

首先，我们将一个视图添加到视图控制器并为其添加约束。 在对象库中搜索UIView并将其拖动到视图控制器中。 添加您喜欢的任何颜色并添加约束，以使视图固定在屏幕的左上角。

选择视图并打开图钉菜单并使用以下约束：

图7 —向视图添加约束

图7显示视图的高度和宽度等于75，并且顶部锚点和左侧锚点设置为8，这基本上意味着无论是iPhone或iPad，还是横向或纵向设备，视图始终具有距离视图控制器左上角的距离为8。 添加这些约束后，我们的视图控制器就是这样。

图8 —示例应用程序

添加视图和为其添加约束似乎很容易，对吗？ 但是您应该永远记住，编程并不是要一次又一次地重复相同的步骤。 让我们假设我们以刚才的方式构建UI。 我们的视图控制器中总共有20个矩形，对于每个视图，我们都必须添加约束，同时要记住每个与特定视图边界接触的视图之间的关系。 这是一个非常漫长而乏味的任务，相反，我们应该找到一种简单的方法来以有效且可扩展的方式添加这20个矩形或任意数量的矩形。 所谓可伸缩性，是指如果将来我们要使矩形的数量增加一倍，则应在不修改任何约束的情况下完成。 现在您必须弄清楚我们应该如何实现这一目标？ 苹果公司对我们的问题堆栈视图有很好的解决方案。

顾名思义，堆栈视图是可以是水平或垂直的堆栈，并且其中包含任意数量的视图。 堆栈视图的主要优点是有时您甚至不必向其子视图添加约束，它通过设置一些属性自动管理所有这些。 让我们从使用堆栈视图创建视图开始。

快速提示—选择一个视图并在按住Option键的同时拖动它以制作它的副本（它还会复制添加到该视图的约束）。

首先，删除我们添加到矩形视图中的所有约束，您可以在文档大纲中或从属性检查器旁边的大小检查器中执行此操作。 现在，使用选项键技巧再创建4个矩形视图副本。 您的视图控制器应如下所示：

图9 —复制视图后的视图控制器

现在，通过按住Command键并选择视图来选择所有5个视图，然后再制作3个副本。 您的视图控制器现在应具有示例应用程序所需的20个矩形。 确保此时没有任何约束添加到任何视图。 这是您查看控制器的样子：

图10 —没有任何约束的矩形

让我们在底部添加一个标签，并为其添加一些约束和属性。 这是我添加的属性，其后是标签上的约束。

图11 —标签的属性

图12 —将标签水平居中对齐

图13 —添加底部和高度约束

标签的工作已经完成，让我们开始将矩形视图添加到堆栈中。 我们要做的是创建5个堆栈视图：

• 每垂直行一个堆栈视图-总共4个堆栈视图
• 一个堆栈视图用于其他四个堆栈视图

选择第一垂直行并添加到堆栈视图，并向其中添加一些属性。 这是我选择的选项。

图14 —我们的第一个堆栈垂直堆栈视图

让我们了解我们添加到堆栈视图的属性。

1. 轴-可以是垂直或水平
2. 分布-均等填充（它为每个子视图提供相等的空间）。 确保尝试其他可用选项以查看它们之间的差异。
3. 间距-我使用了标准间距。 它在子视图之间提供间隔。 您可以使用任何整数值。

现在让我们以类似的方式再创建3个堆栈视图，并且我们的文档大纲应如下所示。 确保遵循与创建垂直堆栈相同的步骤。

图15 — 4个堆栈视图后的文档大纲

因此，我们已经成功创建了4个堆栈视图。 现在，让我们创建最后一个堆栈视图，该视图将保存其他四个堆栈视图。 该堆栈视图将有所不同，因为它将容纳其他4个堆栈视图，并且轴将为水平。 让我们尝试自己动手做，这就是添加最后一个堆栈视图后文档大纲的外观。

图16 —创建最终的堆栈视图

我们已经完成了所有堆栈视图的创建。 现在是时候向其添加约束，以便它可以自动管理其子视图的大小，同时支持纵向和横向。 选择最顶层的堆栈视图并向其添加约束。 我们将使用顶部锚点将其约束到顶部。 左侧和右侧锚点以及视图的左侧和右侧和底部锚点将位于标签的顶部。

图17 —最顶层堆栈视图的约束

让我们构建并运行该应用程序，它在纵向和横向方向上应看起来像这样。

图18和19 —使用堆栈视图后的应用程序

我们已经成功地使用AutoLayout立即创建了20个矩形视图。 如果我们谈论可伸缩性，则可以简单地创建一个新堆栈并将其添加到我们的堆栈视图中，它将自动将其添加到视图控制器并管理其纵向和横向方向以及iPhone和iPad的所有约束。

现在，让我们尝试改善应用程序的用户界面。 在纵向方向上，您会注意到视图是拉伸的，我们不希望它看起来像这样。 这在iPhone中看起来还可以，但是如果我们使用iPad，则绝对不是我们想要构建的UI。 我们可以通过使用大小类来实现。 让我们了解什么是尺寸大小类，以及它们如何帮助我们轻松构建UI以支持不同的设备和方向。

尺码课程介绍

苹果公司没有为iPhone和iPad的不同方向分别创建视图，而是根据设备的高度和宽度布置了两个不同的尺寸类别。 开发人员可以使用它们来布置其内容。 这样可以确保对于特定尺寸的用户，无论他使用的是iPhone还是iPad，都具有相同的体验。 让我们详细介绍一下Apple如何划分尺寸类别。 有两种尺寸等级，即紧凑型和常规型。 因此，基本上可以是这样的不同组合：

1. 苹果手机
   a）所有肖像iPhone的宽度都很紧凑，高度却是常规的。
   b）所有横向的非plus iPhone都在两个维度上都很紧凑
2. iPhone Plus
   a）iPhone plus的宽度也很紧凑，肖像的高度也很普通。
   b）但在风景中，iPhone plus的高度紧凑且宽度固定
3. 的iPad
   a）在两个维度上始终规则
   b）但是根据所处的环境，MVC（主视图控制器）可能是紧凑的（例如，拆分视图主视图）

这是说明以上有关尺寸类别的要点的图。

图20 —尺寸等级

让我们了解如何使用尺寸类根据他们使用的设备来改变用户体验。

图21 — Xcode中的大小类

您可以使用任何要使用的设备，然后按“因性状而异”。 它会问您两个选择，即高度或宽度。 您可以选择二者之一，但在我们的情况下，我们只想针对不同的高度进行更改，我们不在乎设备的宽度。 选择身高，然后再次击中特质。 底部面板将更改其颜色，并且将如下所示。

图22 —各种特征收集

完成更改后，您将看到将受影响的所有设备和方向的列表。 您可以选择这些设备，并随时查看UI。 在右面板中，您将看到我们为标签使用的四个约束（标签和视图为3个约束，标签和最顶部的堆栈视图之间为1个约束）。 通过选择所有约束并单击删除按钮来删除它们。

不用担心，这不会删除标签的约束，只会删除此特定大小的类，即当高度紧凑时。 现在，为标签添加新的约束，使其位于堆栈视图的右侧。 还要更改堆栈视图的底部约束，以便在视图的安全区域内将其锚定到底部。 这是应该添加的约束。

图23-锚堆栈视图底部到视图的安全区域底部

图24 —固定标签的高度并在其上添加右锚

图25 —将标签在视图中垂直居中

现在，您只需要添加一个约束，即堆栈视图右侧和标签左侧之间的间距。 我将间距保持为8。您可以选择所需的任何值。 请记住，我们没有为标签选择任何固定的宽度，它所做的是它将根据标签内的文本自动调整标签的大小和堆栈视图的宽度。

生成并运行该应用程序，它在不同的设备和方向上看起来应该像这样。

图26 — iPhone X横向模式

图27 — iPad Pro纵向模式

图28 — iPad Pro横向模式

摘要

本教程的结尾到这里。 我们已经了解了如何在堆栈视图中使用自动布局，以减少我们的时间，并使用尺寸类别根据不同的屏幕尺寸和方向来改变用户体验。