【Autolayout】AutoLayout介绍

---

参考文章

• WWDC 2012 Session笔记——202, 228, 232 AutoLayout（自动布局）入门

• Beginning Auto Layout Tutorial in iOS 7: Part 1

• Beginning Auto Layout Tutorial in iOS 7: Part 2

---

AutoLayout是什么？

AutoLayout是一种基于约束的，描述性的布局系统。

关键词：

• 基于约束 － 和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等

• 描述性 － 约束的定义和各个view的关系使用接近自然语言或者可视化语言的方法来进行描述

• 布局系统 － 即字面意思，用来负责界面的各个元素的位置。

总而言之，AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化。

---

AutoLayout和Autoresizing Mask的区别

Autoresizing Mask是我们的老朋友了…如果你以前一直是代码写UI的话，你肯定写过UIViewAutoresizingFlexibleWidth之类的枚举；如果你以前用IB比较多的话，一定注意到过每个view的size inspector中都有一个红色线条的Autoresizing的指示器和相应的动画缩放的示意图，这就是Autoresizing Mask。在iOS6之前，关于屏幕旋转的适配和iPhone，iPad屏幕的自动适配，基本都是由Autoresizing Mask来完成的。但是随着大家对iOS app的要求越来越高，以及已经以及今后可能出现的多种屏幕和分辨率的设备来说，Autoresizing Mask显得有些落伍和迟钝了。

AutoLayout可以完成所有原来Autoresizing Mask能完成的工作，同时还能够胜任一些原来无法完成的任务，其中包括：

• AutoLayout可以指定任意两个view的相对位置，而不需要像Autoresizing Mask那样需要两个view在直系的view hierarchy中。

• AutoLayout不必须指定相等关系的约束，它可以指定非相等约束（大于或者小于等）；而Autoresizing Mask所能做的布局只能是相等条件的。

• AutoLayout可以指定约束的优先级，计算frame时将优先按照满足优先级高的条件进行计算。

总结:
Autoresizing Mask是AutoLayout的子集，任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成。AutoLayout还具备一些Autoresizing Mask不具备的优良特性，以帮助我们更方便地构建界面。

设置frame、Autoresizing Mask、Autolayout区别

设置frame

设置autoresizing

设置autolayout

用autolayout之前，我们可能这样写“button在左上角，坐标为（20，230）”，现在用相对语言代替绝对，可能会这样写“button相对于父视图垂直居中，并且距父视图左边缘10个像素”。

---

AutoLayout使用

1、**确认勾选了Use Autolayout **

勾选Autolayout

2、插入约束

插入约束

注意：尽管你执行完第一次Pin处理后，两个视图看起来还是被选中的，但其实他们只是在一个特别的布局关系显示模型里。所以你需要重新选择这两个视图.

3、两个控件选择约束

两个视图之间的约束，除了在Editor中选择外，还可以通过Ctrl-drag来实现，如图：

Ctrl-drag来创建约束

Ctrl-drag后松手，选择相应约束，如图：

松手，弹出约束选择单

4、第三种创建和管理约束的方法

Xcode5的图样，Xcode6有变化，不过，还是很容易找到的

四个按钮分别是Align, Pin, Resolve Auto Layout Issues, 和 Resizing Behavior。 这应该是最常用的 。

5、如果视图的T型条是橙色，说明约束条件不够

T型条橙色，说明约束条件不够

6、如果视图的T型条变为蓝色，说明布局条件充分

T型条变为蓝色，说明布局条件充分

7、每个约束都是一个对象（NSLayoutConstraint），这意味着你可以通过代码实现约束性布局，本文不涉及

8、allign介绍

• Left Edges 左对齐

• Right Edges 右对齐

• Top Edges 顶对齐

• Bottom Edges 底对齐

• Horizontal Centers 水平居中

• Vertical Centers 垂直居中

• Baselines 文本底部对齐

• Horizontal Center in Container 水平居中（单个控件相对于其父视图）

• Vertical Center in Container 垂直居中（单个控件相对于其父视图）

9、pin介绍

• Width 固定宽度 （UIButton、UILabel、UISegmentedControl、UIProgressBar等有一种属性叫intrinsic content size，它可以根据内容调节自身宽度，如果设置width约束，这个属性就失效了，如果想恢复，可以删掉这个约束，然后选择Editor/Size To Fit Content恢复之）（用于自身）

• Height 固定高度 （用于自身）

• Horizontal Spacing 水平间隔（用于同级控件）

• Vertical Spacing 垂直间隔（用于同级控件）

• Leading Space To SuperView 与父视图左距离

• Trailing Space To SuperView 与父视图右距离

• Top Space To SuperView 与父视图顶距离

• Bottom Space To SuperView 与父视图低距离

• Widths Equally 多个控件保持等宽

• Heights Equally 多个控件保持等高

10、约束不足或冲突提示

如图：

约束不足或冲突提示

11、通过Assistant editor来观察横竖屏的效果

通过Assistant editor来观察横竖屏的效果

通过加号增加机型

12、关于优先级的一些说明

优先级说明