五、UI开发之核心基础——约束（深入）
2018-07-12 15:43 Ansersion 阅读(948) 评论(0) 编辑 收藏 举报概述
本节我们将较为理论的讲述约束，更准确的说法叫做“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开发的利器。
现在你可以对约束为所欲为了哟～
