尺寸等级和约束：印刷效果更好

几乎每个认真进行iOS开发的人都经历了为一个人处理约束的痛苦，这对于大多数人和两个人来说似乎都是不可思议的，您永远无法真正摆脱它们的需求。 我们需要告诉OS将UI元素放置在屏幕上的位置。 这考虑了对内部变化（如动态内容）或外部变化（如形状因数，屏幕方向和旋转）的响应。 根据官方文档，有三种方法可以执行此操作：

布局用户界面的主要方法有三种。 您可以以编程方式对用户界面进行布局，可以使用自动调整大小的蒙版来自动化对外部更改的某些响应，或者可以使用“ 自动布局” 。

在这三者中，我们将讨论“自动布局”。 自动布局是在iOS 6中引入的，它是一个系统，可让我们通过创建元素之间关系的数学描述来布局用户界面。 我们根据对单个元素或元素集之间的约束来定义这些关系。 如果我们的用户界面是建筑物，则将约束视为将所有东西都放在定义的位置的脚手架。

通过自动布局使事情进展最快的方法是堆栈，固定，对齐和解析工具。 堆栈是使用自动布局而不使用约束的工具。 这就像选择各种元素并将它们放到堆栈中一样容易，因此在屏幕旋转时，它将保持内部元素之间的对齐。 堆栈视图可能是最快且无混乱的UI布局方式，但是请记住，它们是iOS 9中引入的，因此不能用于以前的版本。

好吧，裸体谈话！ 让这些手变脏，在自动布局中通过引脚对齐和固定。 假设您有一个UI要求，即在potrait模式下必须有两个等号的按钮在一个按钮的下方显示，而在横向模式下，它们应彼此并排显示。 而且，我们将完成所有这些工作，而无需触及任何一行代码，保证！

我们将学习如何通过尺寸类来做到这一点。 这是一个非常酷的3×3矩阵，可以说是构建UI的最快，最有效的方法。 wAny hAny表示所有方向上的所有形状因子。 这也意味着我们在其中设置的任何元素或约束在所有设备和所有方向上都是可见的。 您的应用程序可能同时处理iPad和iPhone，因此最好放置UI中常见的元素。 当设计要求发生变化时，这可以帮助您节省时间并易于使用。

转到视图并将按钮放入其中，将它们分别命名为绿色和红色，并更改其背景颜色。 我们将从设置绿色在屏幕上的位置开始。 这将是风景和肖像之间的唯一共同约束。 按下“固定”工具，然后取消选中“到边距的约束”复选框，然后固定2个边缘（前导和顶部），如下图所示：

我们将更改Size类，因为我们希望iPhone处于纵向模式，我们将鼠标悬停在矩阵上，并将宽度Compact和height设置为Any（3×1），它将覆盖纵向模式下的所有iPhone。 接下来，如图所示，将后缘以50px固定在绿色上：

自动布局附带三个方程式，它们定义了绿色按钮与父视图的关系。 在这一点上，必须了解自动布局如何看到这些约束，等号表示项目在左侧和右侧的相等性，而不是赋值。 自动布局会努力使=符号两侧的两个实体相等，同时这样做肯定会有错误，请参阅官方文档，以了解它引发的各种错误及其原因。

现在我们已经设置了绿色按钮的位置，我们要做的就是使红色按钮完全相同，并将其放置在比绿色按钮低20px的位置。 在继续之前，请从“解决”菜单中执行更新框架。

现在，我们将使用“对齐”工具，同时选择两个按钮，然后检查“前缘”和“后缘”按钮。 自动布局足够聪明，可以解密哪个按钮的边缘与谁对齐。 更新框架，您会在绿色的顶部看到红色，并且高度和宽度相等，但是自动布局仍然会抱怨您尚未将红色绑定到Y轴。 将红色拖动到绿色下面，不用担心您不需要准确，我们可以自动布局！

完成后，将红色顶部固定为20px。 切记取消选中“边距约束”。 另外请记住，我们需要绿色按钮中的20px，下拉菜单将为您提供您要固定其位置的选项，请选择绿色。

添加约束并更新框架。

瞧！ 您已经创建了无冲突的用户界面！！ 在我们高兴之前，这项工作尚未完成。 我们必须在横向模式下并排显示按钮。

在文档概述中完成此操作后，您将注意到一些约束方程式变为灰色。 这是因为，我们告诉自动布局如何在iPhone纵向模式下而不是横向模式下将这些按钮保持在原位，这就是我们现在要完成的工作。 跳至文档大纲，然后选择红色和绿色。 从对齐菜单中检查其底部和顶部边缘是否相同。 现在，将红色拖到绿色右侧，然后将其固定为50px的绿色和50px的右侧。 再次选择两个按钮，然后从“ Pin”菜单使它们的“ Widths”相等。 结果是：

很棒的负鼠！ 现在，在iPhone上运行此按钮并更改方向，您会看到按钮在纵向中一个在另一个下方，在横向中一个在另一个旁边。

总结一下：自动布局是一个功能强大且动态的系统，可让您随着时间的流逝快速创建和维护复杂的UI。 这可能需要花费一些时间来解决，但是考虑到适应性，这似乎是完全值得的。 越来越多地使用Size类以及如何根据设计要求在其中放置元素变得势在必行。 最后，约束是abc，可以通过自动布局以更好地控制UI的方式进行工作。

如果您想查看全部操作，请转到此git链接。

斯拉纳/约束
使用约束 github.com的自动布局示例