自动布局神秘化

最近，我在一个本地用户组中，出现了热门的跨平台移动开发新选项的话题（实际上并不重要）。有一种通常的UIkit重击，这是可以预期的，因为该主题是提出一种替代编程模型。

我不是要捍卫UIkit，因为我同意它可以进行一些改进。但是，演讲者确实说了我以前听过的有关自动布局的一件事，这使我误解了。

我听说有人说“您需要数学博士学位才能理解自动布局”，或者“您需要成为一名火箭科学家才能理解“自动布局”。”火箭科学实际上是-您可以在reddit上找到答案。取而代之的是，在此博客文章中，我将向您展示自动布局的计算有多么容易。实际上，线性方程是如此简单，以至于小孩子可以进行数学运算。

那么，为什么人们认为“自动布局”很难？好吧，我认为Xcode的界面生成器无法解决这种情况。自从引入“自动布局”以来，Xcode已有所改进，但是仍然很难看到“自动布局”方程与您在界面生成器中看到的关系。让我们看看我能否稍微揭开“自动版式”的神秘面纱。

假设您有两个按钮，并且想知道将它们分开的距离。我们如何表达“取消”按钮的右边缘和“接受”按钮的左边缘之间的关系？如果我要向另一个人描述这个问题，我可能会说类似“接受”按钮在“取消”按钮的右边八点。

更为精确的说法是：“接受按钮的左边缘比取消按钮的右边缘大八点。”其等式为：

Accept.left = Cancel.right + 8其中8为常数

如果要表达“接受”按钮的宽度相对于“取消”按钮的宽度怎么办？假设它的宽度是原来的两倍。然后，等式如下：

Accept.width = Cancel.width * 2其中2是一个乘数

Auto Layout方程将这两者合而为一，以表达任何类型的关系约束。

Item1.attribute = Item2.attribute *乘数+常数

为了表示“接受”按钮相对于“取消”按钮的位置，我们不需要乘数，因此其值为1。等式如下：

接受左=取消右* 1 + 8

为了表示“接受”按钮的宽度，我们不需要常数，因此该常数为零。

接受宽度=取消宽度* 2 + 0

而已！您需要数学博士才能找出¯\ _（ツ）_ /¯的神秘方程。与任何方程式一样，您可以将其取反。您可以通过反转项目1和项目2来表示这两个按钮的距离之间的关系，如下所示：

取消右=接受左* 1 +（-8）

我认为这是从自动布局开始引起困惑的地方，因为Xcode的界面生成器并不总是按照您期望的顺序显示方程式。将两个按钮之间的距离视为负数是不合逻辑的。

如果您想了解更多关于方程式的信息，Apple会在一页上解释约束的解剖学。

接下来，我将向您展示接口构建器如何使用此方程式建立约束。

让我们在两个按钮之间创建相同的水平约束。我不会介绍在接口构建器中创建约束的所有不同方式，因为有几种不同方式。我最喜欢的方法是按下控制键，并将约束从第一项拖到第二项。

将UI元素拖到视图控制器中后，我在文档树中为其赋予了有意义的名称。在查看约束的属性时，这有助于理解哪个控件是哪个控件。 Xcode将在属性检查器中使用控件的名称，以便于识别控件。

现在，让我们看一下水平约束的属性，并尝试在接口生成器中查找方程式的元素。

当您在Xcode中添加约束时，方程式的顺序可能与您期望的不一样，因此数字将颠倒。在这里，您可以看到我的常数是一个负数，并且第一项和第二项颠倒了。我相信这会使人们了解正在发生的事情。

您可以通过反转第一和第二项来解决这种情况。我经常这样做，以便在我脑海中清晰可见（即使从数学角度来看也是一样）。反向后，负常数将再次变为正，并且项目将按您期望的顺序显示。

希望这对刚接触自动版式的人有所帮助。我们不需要雇用数学家来布置我们的控件。尽管Xcode有时无法解决这种情况，但数学很简单。