五、UI开发之核心基础——约束（深入）

概述

本节我们将较为理论的讲述约束，更准确的说法叫做“AutoLayout”。对于后续章节要学习的内容，本篇文章并非必须，如果你也像我当年一样正在被老板踢屁股赶进度的话，但可掠过本篇。

本篇内容旨在锦上添花，了解完本篇内容后，将会有助于你更加得心应手的使用约束。

“AutoLayout”的官方文档链接如下，以供参考：

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1

所有的约束都归结为1个方程

约束是这样实现的：

根据给定元素（x），限定目标元素（y）的位置或大小，既

y =(或≥或≤) ax + b

上图截自苹果官网Auto Layout Guide，我们用这个例子来进行说明。

这个方程约束了红色矩形前边界（左边界）距离蓝色矩形尾边界（右边界）右侧8.0个单位。

RedView.Leading指的是红色矩形的前边界（左边界）“y”，BlueView.trailing指的是蓝色矩形的尾边界（右边界）“x”，其中“a=1.0”，“b=8.0”，方程关系为“=”关系。

一例胜百言

例1:如下图所示，Button的约束为

Button.Leading = 1.0 x SuperView.Leading + 10

Button.Top = 1.0 x SuperView.Top - 16

Button.Width = 0.0 x NotAnAttribute + 18

Button.Height = 0.0 x NotAnAttribute + 12

其中SuperView表示Button所在的容器，也就是Button所在的“黑框”。NotAnAttribute表示一个无意义值，因为乘以了0，所以并不妨碍方程计算。

例2:如下图所示，Button的约束为

Button.Leading = 1.0 x SuperView.Leading + 10

Button.Top = 1.0 x SuperView.Top - 16

Button.Trailing = 1.0 x SuperView.Trailing - 10

Button.Height = 5/3 x Button.Width + 0

其中Button.Width虽然没有在以上约束中明确指出，但是根据Bottom.Leading和Bottom.Trailing的约束，Button.Width就已经确定了（SuperView.Width - 10 x 2）

例3:如下图所示，假设Image的位置和大小已经确定（未在图中显示），则Button的约束为

Button.Leading = 1.0 x Image.Trailing + 10

Button.Trailing = 1.0 x SuperView.Trailing - 5

Button.Top = 1.0 x Image.Top + 0

Button.Bottom = 1.0 x Image.Bottom + 0

例4:如下图所示，Button的约束为

Button.CenterX = 1.0 x SuperView.CenterX + 0

Button.CenterY = 1.0 x SuperView.CenterY + 0

Button.Width = 0.0 x NotAnAttribute + 10

Button.Height = 0.0 x NotAnAttribute + 10

插播一则知识点：固有尺寸（Intrinsic Size）

之前我们说过，约束所有的要义就在于唯一确定UI控件的位置和大小，两者缺一不可。

但是我们有时候会发现，如果只约束UI控件的位置，而不约束其大小也是可以的。比如下图，我们只约束了label的左边界和上边界，但xcode并没有报错，只是提示了一个警告。

这到底是为什么呢？

包含文字/图片内容的UI控件都会有固有尺寸，固有尺寸的长宽即文字/图片的原始长宽。当没有约束该UI控件的长宽时，默认使用其固有尺寸。

如下图，如果我们拖入一个ImageView，并只约束其左边界和上边界，会发现xcode有报错，但是当我们给其指定了图片内容后，报错就消失了。

了解了固有尺寸后，我们就可以接着讲收缩/拉伸等级约束了。

View的收缩等级约束表示为：

垂直方向：View.Height <= 0.0 x NotAnAttribute + IntrinsicHeight

水平方向：View.Width <= 0.0 x NotAnAttribute + IntrinsicWidth

View的拉伸等级约束表示为：

垂直方向：View.Height >= 0.0 x NotAnAttribute + IntrinsicHeight

水平方向：View.Width >= 0.0 x NotAnAttribute + IntrinsicWidth

约束等级

一个UI控件一般有多个约束，有时候约束之间会发生冲突（还记得吗？上一节我们就遇到过“收缩等级”约束冲突），每当此时，我们可以删掉其中一个，如果不能删掉。我们还可以设置约束等级（Priority）。约束等级的范围是1～1000，1000等级最高，1等级最小。当2个约束冲突时，等级高的约束可以屏蔽掉等级低的约束。

总结

约束（AutoLayout）的所有内容都归结为1个方程，它能很好的实现在不同设备上的自适应，从而使开发者避免了许多重复性的工作，再加上Xcode的图形化开发功能，真可谓是UI开发的利器。

现在你可以对约束为所欲为了哟～

上一节           回目录          下一节