iOS之AutoLayOut

Apple从iOS 6加入了Auto Layout后开始就比较委婉的开始鼓励、建议开发者使用自适应布局，在这里重点解说一下几个关键的约束方法，希望能让大家更好地去探索和构建巧妙的自适应布局。

页边间距约束（Leading and Trailing space）
水平间距约束（Horizontal space constaint）
等宽约束（Equal widths constaint）
方向比例约束（Aspect ratio constaint）
约束冲突和错误

页边间距约束（Leading and Trailing space）

页边间距约束分前部间距约束（Leading space constaint）和尾部间距约束（Trailing space constaint）。从屏幕上说就是左边距和右边距。我们给蓝色方块添加左边距约束，其值设置为10，给粉色方块设置右边距约束，其值也设置为10。

页边距约束.png

我们再次在iPhone5s模拟器中运行应用，当横屏时蓝色方块被左边距约束拉到了屏幕左边，粉色方块被右边距约束拉到了屏幕右边。

横屏.png

水平间距约束（Horizontal space constaint）

给蓝色方块和粉色方块添加水平间距约束，其值设置为10。这个约束会使这两个方块之间的距离永远约束为10。

水平间距约束.png

现在横屏时两个方块之间的间距、它们与屏幕边缘的间距都和竖屏时显示的一样了。但是其中粉色方块为了满足水平间距约束自行增加了方块的宽度，变成了长方形。

横屏水平间距.png

从上面这个效果我们可以得知，除非我们特别限制了view的尺寸，否则的话iOS会为满足布局约束而改变view的尺寸，也就是保持一个自然的尺寸。

横屏等宽约束.png

等宽约束（Equal widths constaint）

我们给这两个方块添加一个等宽约束来改善上面的情况。
再次运行应用，现在在横屏时由于等宽约束的作用，两个方块的宽度保持了一致。我们已经非常接近完美了。

等宽约束.png

方向比例约束（Aspect ratio constaint）

从上面的运行情况来看各个约束都工作正常，但唯一不足的是本来在竖屏是两个正方形方块，在横屏时缺变成了长方形方块，
我们给这两个方块添加方向比例约束来解决这个问题。这个约束使方块在满足其他约束的前提下始终保持高和宽的比例相同。所以在横屏时就会以方块的宽度为比例标准，将高度的比例改为宽度的比例。

方向比例约束.png

现在得到一个完美的结果

横屏方向比例约束.png

约束冲突和错误

我们在添加约束时，经常伴随有警告或者错误出现。虽然有些警告是因为我们还没有添加完约束出现的，当我们添加完我们设想的约束后警告就会自然消失。但大多数的警告还是指明我们的约束确实存在问题，需要我们修复。

查看警告或错误最方便的方式就是在storyboard左侧的结构树中，在view controller的右边会出现一个红色或黄色的小图标，向我们指明这里存在问题：

bc846f95-1515-4def-8fb5-353f3ab8a916.png

view位置的错误
view位置的错误摆放是一个很常见的警告。当一个view没有摆放在约束规定的位置的时候，会出现该警告。
这些问题会在你切换不同设备的模拟器或鼠标不小心移动了某个对象时出现。
选中一个错误摆放的对象，在屏幕上会出现布局约束给你提示的正确的摆放位置。

3bab9b7b-b902-40ef-a748-2a071ee75dc5.png

点击左侧出现的黄色警告图片，会弹出一个菜单，你可以选择让Xcode改变约束，以适应当前该对象的位置，但通常情况下我们都选择让Xcode将该对象移动到约束规定的位置。

缺少布局约束的错误
在运行时没有问题，因为iOS会假设方块的位置就是我们在storyboard中摆放的那个位置。但是Xcode会提示我们一个缺失约束的错误，为了避免意外发生（更换设备尺寸），我还是要根据Xcode的提示添加缺失的约束
我们给这两个方块添加一个top space to to layout guide约束使方块的位置更加清晰，并消除Xcode的错误提示。

4196_141020150541_1.gif

虽然大量Autolayout计算布局会有一定的性能问题，但随着硬件的提升，以后会越来越好。