在学习AutoLayout时看过很多小技巧，但是很少有介绍基础的教程，最近总结这类文章，看到一篇国外的文章极佳，特翻译过来以供参考。

AutoLayout的初级教程翻译，原文地址：

http://code.tutsplus.com/tutorials/getting-started-with-auto-layout-in-xcode-5--cms-21016

1.什么是Auto Layout

这是在iOS6时为了减少不同设备适配工作的一种UI搭建技术。

2.如何开启Auto Layout

如图，在Interface Builder中找到这个设置（自从iOS8以后这个设置界面又添加了些新功能，但Use Auto Layout依旧存在）。

Auto Layout支持iOS6以上的设备，当然现在是iOS9时代，已经很少有项目会支持iOS6以下的系统了。

让我们打开项目中的main storyboard，添加一个text view到View Controller中，如下图所示。

这里我们不添加任何约束直接运行一下，看看效果。如图所示。

3.添加约束（重点）

以下是几种可以添加约束的方法。

Control + Drag（也可以是右键拖动）

按住Control并拖动要添加约束的View到另一个View，放开鼠标，会出现一个选项框，具体的选项不尽相同，会根据你拖动的方向和你想和哪个view建立约束关系而改变。

为了说明这个原理，我们实际操作一下：

1. 拖动这个text view到view controller的右侧

2. Xcode会显示一个高亮的预选中状态

3. 松开鼠标，出现相关的约束条件

4. 为了保证view在水平居中，选中Center Horizontally In Container。

Auto Layout Menu自动布局功能按钮

当然，你也可以使用相关的功能按键。他们分别是Align，Pin，resolve Auto Layout issues

Align 约束你的view在它容器的中央位置，或者对准其他2个view的边缘。

Pin 设置view的宽高，或者和其他view的相对距离。

The Resolving Auto Layout Issues 添加view自动布局的原则，比如更新约束，或者自动添加相关约束。

Stack是iOS9才开始使用的，相关内容将在另一篇文章介绍。

Editor 选项

以上提到的每一个内容都可以在Editor选项中找到。

添加约束

当我们添加了水平居中的约束后，我们的text view就可以一直水平居中，无视设备是竖屏还是横屏状态。

你应该看到了text view有一条橘黄色的提示线，这是Xcode在提示我们约束并不完整，我们只是让text view水平居中，但并没有规定它在垂直方向的位置，所以系统还不能够判断如何摆放text view。

Note：你可以无视这些经过并且运行程序，但是你不应该忽略这些含糊不清的约束，因为这会导致在不同大小的设备中，view的显示效果不会按照我们所想的那样摆放。

用类似我们刚才的操作，选中view，通过Control-Drag的方法链接到 view controller的顶部，选择 Top Space to Top Layout Guide，这个是设置view到顶部的垂直距离。

然后，Control-Drag 这个text view到view controller的左侧，选择Leading Space to Container（设定text view到view Controller左侧的距离）。同样，Control-Drag 这个view到view controller的底部，选择Bottom Space to Bottom Layout Guide（设定text view到view Controller底部的距离）。

这时，text view的距离提示线应该显示蓝色了，因为我们的约束已经足够系统确认它的摆放方式了。现在可以运行一下模拟器，看一下展示效果了，别忘了转换屏幕方向，看看它在不同状态下是否按照我们想要的方式展示了。

Note：我们不必特意的设定水平距离的约束，因为我们设定了text view在水平居中，系统会自动的算好它出现的位置，这点十分方便。同样，我们也可以设定垂直居中，这里就不再一一赘述。

这个例子已经展示了如何在parent view中设置view的约束。现在我们看一下如何对两个同级的view进行约束。

删除这个text view，可以看到我们添加的约束也一起被删掉了。我们添加一个text field, 一个 slider, 和一个segmented，如下图所示。

在不添加约束的前提下，运行一下，调整一下屏幕，我们可以看到下面的效果。

展现一下我们的想象力，我们其实应该让它们横向延展。也就是如下的效果。

选中text field，单击Pin，在section-Spacing to nearest neighbor 中，点击top、right、left周围的红线（固定和周围view的距离）。然后点击底部“Add 3 Constraints”的按钮，添加这几个约束。其中：

top的值是text field距离屏幕顶部的距离

left的值是text field距离屏幕左侧的距离

right的值是text field距离屏幕右侧的距离

如下图。

选中slider，重复上面的操作，其中：

top的值是slider和text field的上下间距

left的值是slider距离屏幕左侧的距离

right的值是slider和segmented的间距

单击segmented control,重复以上的操作，但这次只选中top，right的红线，同时选中“Width”：

top的值是segmented control和text field的上下间距

right的值是segmented control距离屏幕左侧的距离

选中Width是为了固定segmented control的宽度，因为我们不想segmented control跟着屏幕size的不同而变化。

如下图所示：

4. 修复 Auto Layout 的Issues

当我们的约束出现警告或者错误时，Xcode会在界面上给出相应的提示，我们点击这些提示，可以看到详细信息。

你可以通过Resolve Auto Layout Issues按钮添加自己遗忘的约束，或者自动重设约束，或者清空约束。这些功能可以省下大量的时间，但是效果可能并不是我们想要的。解决这类问题需要经验的积累，这里只是初步教程，不做过多的赘述。

Misplaced View

如果你添加了约束，而且你还改变了它的大小或者位置，系统会给你一个黄色的警告线。如果你在不修改的前提下编译运行app，你将会看到Auto Layout 系统会忽略你在后面对view的更改（很好理解，系统会以约束条件为标准处理界面）。我们称这种情况为Misplaced View

为了修复这个问题，你可以删掉原来的约束条件，重设新的约束，或者让Xcode为你自动修复这个问题。系统给了我们两个自动修复的选择。

• 你可以移动修改view的位置和大小，适应原来的约束，然后通过选择Resolve Auto Layout Issues > Update Frames来通知系统我们不更改约束的前提下修改了控件。

• Issues > Update Constraints from Xcode's Editor menu.或者我们可以自动让系统更改约束，去适应我们现在button的位置和大小。这时我们可以选择Resolve Auto Layout Issues > Update Constraints。

（完）