iOS自动布局1-基础概念与原理

自动布局出现以前的布局模式是基于UIView的frame属性。

    UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 50, 60)];
    [self.view addSubview:subView];

绘制效果如图：

viewframe

从最底层的view开始进行布局，在它的上面对应的位置绘制子视图，如此循环下去就可以得到所有视图的位置。

这种布局方式的问题就在于不能适应不同尺寸的屏幕。对于同一个视图V，假如希望V在4英寸的屏幕上的宽度为200，在5.5英寸的屏幕上显示的为300，这种布局的模式就很难做到。因此在最开始的时候，竖屏到横屏的转化通常需要绘制两套布局。

自动布局的原理

自动布局的引入解决了不同屏幕尺寸的适配问题。

自动布局的过程实际上是通过对于给出的视图之间的关系，计算出各个视图的位置的过程。最终还是会转化成原始的frame的方式来绘制到屏幕上去。所以自动布局的关键有两点，一是你给出的描述是否能够让CPU计算出其最终的位置，而是你的描述是不是你最终想要的结果。对于第一点，可能出错的地方在于，你给出的视图之间的关系本身是有冲突的或者给出的视图之间的关系不足以完全计算出视图的最终位置。

其实最原始的基于frame的布局也是描述视图间的关系，子视图相对于父视图x方向上的位置，y方向上的位置，宽度和长度。自动布局在此基础上拥有多种视图间关系的描述。并且很大的一个不同在于，自动布局可以描述任何视图之前的关系，而不仅仅限于子视图与父视图的关系。

自动布局的约束

上面所说的“关系”，在自动布局中定义为约束（Constrains）。

约束可以由两个视图的属性以及属性之间的关联决定。

自动布局里，视图中可以定义为约束的属性包括：

top，left (leading)，bottom，right(trailing)，width，length，centerX，centerY，center，baseline

其中baseline是文字的基线，见下图中的红线

baseline

属性之间的关联关系包括：

相等，大于，小于，大于等于，小于等于，系数（multiplier），偏移量（constant,offset）

一个约束可以描述为下图：

constraint

注意的是除了center外的属性都是代表位置（或者长度宽度）的一个float类型的数字，center是centerX和centerY的集合。属性乘以一个系数一般是一个float乘以系数。

在自动布局中，我们所要做的就是根据自己的需求描述出完整并且正确的约束。

完整的实例（来自Apple官方文档）：

sample

1. // Vertical Constraints
2. Red.top = 1.0 * Superview.top + 20.0
3. Superview.bottom = 1.0 * Red.bottom + 20.0
4. Blue.top = 1.0 * Superview.top + 20.0
5. Superview.bottom = 1.0 * Blue.bottom + 20.0
6. 
7. // Horizontal Constraints
8. Red.leading = 1.0 * Superview.leading + 20.0
9. Blue.leading = 1.0 * Red.trailing + 8.0
10. Superview.trailing = 1.0 * Blue.trailing + 20.0
11. Red.width = 1.0 * Blue.width + 0.0

其中约束2-5决定了垂直方向的布局，8-11决定了水平方向的布局。

假设Superview为一个100*100的视图，那么根据这几个约束如何计算出Red和Blue的具体位置呢？

根据2，8这两个约束可以决定Red的frame为（20，20，width，height）

根据2，3这两个约束可以决定Red的height为100-20-20 = 60；

同理根据4，5可以决定Blue的height为60；

根据9，可以得到 Blue.leading = 20 + Red.width + 8

加上10可以得到 20+Red.width+8+Blue.width+20 = 100

根据11，Red.width = Blue.width, 所以变成解方程：20+width+8+width+20 = 100, width = 26；

所以Red的frame为（20，20，26，60）

Blue.leading = 20+26+8 = 54，所以Blue的frame为（54,20,26,60)

那么如果给出的约束不正确会怎么样呢?

假如给出的约束是自相矛盾的，像Blue.leading = 10, Blue.trailing=5这样的约束，那么显然系统就无法计算出正确的布局的了。

假设给出的约束少了，在上述例子中，缺少任何一个约束，系统都无法准确计算出布局。

所以，再强调一遍：在自动布局中，我们所要做的就是根据自己的需求描述出完整并且正确的约束。 以便于系统自动计算出各个视图的frame。