使用约束来创建AutoLayout

Xcode6引入了自动布局的概念。它基于约束布局系统，开发者可以使用它来创建自适应布局。但，很多开发者都不是很适应这种解决方案。不过，我相信，经过这个教程的练习，你一定会适应并迷上autoLayout的。

###AutoLayout能帮开发者解决什么问题

AutoLayout是一种通过描述UI元素相互关系来创建布局的方式。它提供了一个强大灵活的系统来管理UI控件彼此间的位置关系。它还支持很多苹果的API，比如动画，运动效果等。

首先通过一个简单的例子来说明AutoLaytou的必要性。在storyBoard中加入一个按钮，并使之完全居中（在水平和垂直方向都居中）。运行demo时，你会发现在3.5inch屏幕和4inch屏幕的表现是不一样的。在4inch屏幕中，按钮是完全居中，然后在3.5inch屏幕中，按钮在垂直方向是偏下的。

没有AutoLayout的情况下，我们在storyBoard中的布局是固定布局，也就是说每个UI控件的位置是hardcode。这也就能解释上面这里例子中，按钮在3.5inch屏幕下不居中的原因了。为了使用户界面在各种尺寸的设备上都表现良好，我们就需要用到AutoLayout。

###如何使用AutoLayout

新建一个SingleViewApp，你会在storyBoard右下方看到一组按钮。这组按钮就是用来设置AutoLayout的，从左往右一次介绍：

• Alignment, 创建排列约束，比如指定元素距离父容器左侧多少point
• Pin，创建间隔约束，比如定义UI元素的宽度
• Issues，解决布局问题（这里用Issues作为一个功能动词，我真心没弄明白，用点其他的单词不好吗？）
• Resizing，指定resizing对约束的影响

除了这组按钮，Xcode还允许开发者使用右键Drag的形式来快速建立约束， 比如你可以右键drag一个元素到其他元素上，然后选择你想要的约束即可(忘了上面那四个按钮把，右键Drag多方便^-^)。

当你建立好约束后，约束线就会橙色或蓝色显示在元素里面。橙色线表示约束还有点问题，需要开发者去修复。蓝色线表示约束已经设置好。

有时候，当你创建好约束，在interface builder的outline view中会出现展开的箭头，红色的箭头表示约束有冲突或者有歧义。点击箭头，你能看到一些待处理的问题约束列表。通常情况下，约束可能出现这些问题：有冲突或是放错位置或是缺少其他约束等。

在尺寸栏，你可以在Constraints区域看到添加的约束列表，除此之外，在interfaceBuilder左侧，每个view下都会有自己对应的约束（如果你创建了的话）。

###举个栗子——创建一个完全居中的按钮

回到最开始的例子。在开始创建约束之前，我们先用自然语言来描述这个按钮的位置，可能这样说：

不管设置尺寸如何，这个按钮要在水平和垂直方向上居中

其实，当你说完这句话时，你已经定义了两个约束：水平居中，垂直居中。没错，约束就是描述元素的布局的，只是用数学来精确表达而已。比如你定义按钮的位置为：按钮的左侧离其父级元素左侧的距离为30point。转换为表达式就是： button.left = container.left + 30 。这对于学过前端的同学来说，简直是太直观了。

实战开始。在storyBoard中加入一个image，首先个image添加宽高约束。选中image，点击Pin按钮，选中width和height，然后点击添加两个约束。此时，你会注意到interface builder的outline view中出现了红色的箭头记号。这表明我们的约束可能有点问题。点击红色箭头，顺着红色标记，添加缺少的约束。

创建好尺寸约束后，我们继续创建约束来保证image的完全居中。选中image，点击AutoLayoutignment按钮，并选中水平居中和垂直居中，然后点击添加约束。

CMD + R 来测试小效果把，横竖屏下都是完全居中的哦。上面展示了使用工具栏的按钮来创建约束，其实使用右键drag的形式创建约束更为快捷，这里就不bb了，自己试下就好。

###再来个栗子——用于处于底部的登录按钮

在解决居底的问题之前，我们先解决在横屏下按钮宽度的自适应问题。选中按钮，右键纵向drag，创建高度约束，并在interface builder的outline view中通过添加缺少的约束来修复歧义（总觉得这步骤有点蛋疼，每次都要去半自动fix一下）。

为了保证按钮的水平方向自动适应，我们创建另外一个约束。选中按钮，右键drag到superview的左侧，选择leading space to the container；右键drag到superview的右侧，选择trailing space to the container（恩，leading和trailing两个单词相当地道，然luan用，对于国人，还是leftSpacing和rightSpacing更直观）。

接下来实现按钮居于底部的约束，选中按钮，右键drag到superview的底部，选择bottom space to bottom layout。约束就创建好了。

CMD + R 来测试下。应该是完美布局的。不过上面的栗子只是很简单的场景，实际应用起来应该还是有坑的。另外，AutoLayout也只是约束了元素的相对位置，实际的距离还是固定的，这样算不上健壮的响应式。（可能也和我没有去测试约束的详细设置有关，我觉得iOS搞出这个约束肯定不会只是设置固定间距的）