一、简介

1. 在以前的iOS程序中，经常编写大量的坐标计算代码，为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果，有时还需要分别为2种屏幕编写不同的坐标计算代码，即传说中的“屏幕适配”。

2. 那什么是Autolayout呢？
   Autolayout是一种“自动布局”技术，专门用来布局UI界面的。Autolayout自iOS6开始引入，由于Xcode4的不给力，当时并没有得到很大推广。自iOS7（Xcode5）开始，Autolayout的开发效率得到很大的提升。苹果官方也推荐开发者尽量使Autolayout来布局UI界面，它能很轻松地解决屏幕适配的问题。

3. 在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成，相比之下，Autolayout的功能比Autoresizing强大很多。

4. 如何使用呢？
   Autolayout有2个核心概念：参照和约束。它通过内定的Constraint(约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图。将我们想象中的结果展现出来。Constraint的设定非常灵活,实现一种布局的方法可以通过多Constraint来完成.
   以下几点是我们在开始使用之前必须弄清楚的事情:

• 我们要抛弃以往旧的布局方式不再去关注ViewFrame,center,和autoresizing，因为这些坐标和大小的定位都可以通过来Auto Layout完成。
• 理解每一种Constraint的含义,否则,当你去看别人的实现的Constraint时,就会有种看天书的感觉。
• 按意图设计,一切按我们理想中的效果去布局,只要约束设定的合理,就一定能够完成目标布局。

二、用xib或者storyboard来实现Autolayout

1. 先从Interface Builder开始吧. 打开某个xib或者storyboard,
   在右侧Show in file inspector里面找到Ues Autolayout,将其勾选。如下图：
   

   
   自此,Autolayout便启用成功,autoresizingMask被废弃.其所有以往的功能和特性都被Autolayout取代.
   注意：
   现在我们定位控件位置的方式,不再像以前一样,计算好每一个控件具体的位置,x是多少,y是多少。而是思考,这个控件离左边是相隔多少距离,或者离顶部或底部相隔多少距离。
   而有些规则性的事情还是类似的,比如我们定位一个控制的位置,一定要有x,y两个坐标点同时有值,少一个都不能正常显示。
   同样Autolayout在创建约束时也一样,在思考完离顶部距离以后,还需要思考离顶部距离,否则控件的显示位置一样无法正常显示.
   换言之,要让Autolayout计算出合理的位置,需要保证水平距离和垂直距离同时存在. 否则IDE,都会给出警告,提示这样的布局Ambiguous Layout(模凌两可)

2. Interface Builder提供Autolayout的功能:

2.1如下图：

详解：
(选择两个view时可设置)
Leading Edges:左边对齐
Trailing Edges:右边对齐
Top Edges:顶部对齐
Bottom Edges:底部对齐
Horizontal Centers:水平居中
Vertical Centers:垂直居中
Baselines:文本底标线对齐

(单选择一个view时可设置)
Horizontal Center in Container:对于父view的水平居中
Vertical Center in Container:对于父view的垂直居中

2.2如下图：

(选择框)
None:添加完约束后不进行任何操作,
Items of New Constraints:在添加约束后重新摆放约束涉及到的view
All Frames in Container:在添加约束后重新摆放所有这个容器内的view

2.3如下图：

详解：
上面的十字是"与最近的邻居的约束", 填上数字, 单击虚线变成实线就是要添加这个约束.
这里的"邻居"是将一个包含子view的父view看做一个装了一堆积木的盒子, 积木相对于盒子的边框和其他的积木都作为"邻居"。

(定义的宽高数据约束)
Widths:宽度指定,
Height:高度指定,

(定义多个view之间的宽高约束)
Equal Widths:宽度相同,
Equal Heights:高度相同,

(定义多个view之间的宽高约束)
Align:多个view之间的对齐约束

2.4如下图

详解：
(上半部分菜单的操作对象是当前选中的view, 下半部分的操作对象是选中view内的view)
Update Frames:刷新frame(使用当前已经设置的所有约束),
Update Constraints:刷新约束(根据当前的约束和frame, 更新约束的constant值),
Add Missing Constraints:添加缺失的约束(自动添加系统认为你应该添加却忘记添加的约束, 测试中经常搞出冲突)
Reset to Suggested Constraints:重置为系统建议的约束(清理系统认为重复/冲突的约束, 测试中经常搞出问题)
Clear Constraints:清理所有约束(删除对象上绑定的所有约束)

三、代码创建AutoLayout

代码创建的约束有两种方式:
1:常规约束,写法非常冗长,但能实现所有的约束方式以及非常特殊的约束方式,代码如下:

  // 添加两个控件到父控件上添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
self.blueView = blueView;

  // 添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

 // 禁用auturezing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
 //注意, 这里设置父控件无效，要设置自己的translatesAutoresizingMaskIntoConstraints属性为NO。
redView.translatesAutoresizingMaskIntoConstraints = NO;

 // 添加约束
 // 添加蓝色VIew距离父控件左边的距离固定为20  X
NSLayoutConstraint *leftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftCos];

 // 红色的顶部和蓝色的底部距离固定 Y
NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:redTopCos];

注意：

• 如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints的属性设置为NO.

• 添加约束之前一定要将子视图优先addSubview到父视图中,否则在添加约束时会产生编译器警告.而我们在理解的时候,可以通过这种方式来理解.
  Item == first item 需要设置约束的控件
  attribute == 需要设置的约束
  relatedBy == relation 等于
  toItem == second item 被参照的控件
  attribute == 需要设置的约束
  multiplier == multiplier 乘以
  constant = constant 加上

2.可视化格式语言约束（VFL）
所谓可视化格式语言约束,是一种很直观的理解方式,当然,前提是你已经熟练理解这套语言的规则.
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言。
通过可视化语言可以一次性创建多个约束. 这对于第一次方式来说,是相当方面和容易理解的.但可视化语言不是所有约束都能满足.
我们可以用正则表达式的学习方式来学习这项可视化格式语言.举例代码如下:

// 添加两个控件到父控件上
// 添加蓝色View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];

// 添加红色View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

// 禁用Autoresizing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO;

// 添加约束
// 设置蓝色View距离左边和右边有20的的间距 X 和 宽度
NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
[self.view addConstraints:blueViewH];

// 设置蓝色View距离顶部有20的间距, 并且高度等于50 Y 和高度
// 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度
// 并且设置红色和蓝色右对齐
NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
[self.view addConstraints:blueViewV];
NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:redVeiwW];

注意: 在VFL语句中, 是不支持乘除法

VFL实例：

• H:[cancelButton(72)]-12-[acceptButton(50)]
  canelButton宽72，acceptButton宽50，它们之间间距12

• H:[wideView(>=60@700)]
  wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

• V:[redBox][yellowBox(==redBox)]
  竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

• H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
  水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

四、VFL的使用

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

详解：
lFormat: VFL语句
options: 对齐方式
metrics:VFL语句中用到的变量值
views:VFL语句中用到的控件
metrics:可以把VFL语句中的常量，抽取成为变量。由于是个字典，要包装成对象类型

五、AutoLayout实现动画

1.约束也可以在storyboard里面进行连线，只需要修改控件的约束，也能实现动画。

[UIView animateWithDuration:1.0 animations:^{
   [添加了约束的view layoutIfNeeded];
}];

2. 可以在UIView中让多个约束一起执行动画
   如果控件有默认的高度，只需要设置autoLayout的X值和Y值，autoLayout会自动计算出控件的宽高。

六、Autolayout的警告与错误

1.警告
控件的frame不匹配所添加的约束,比如约束控件的宽度为100，而控件现在的宽度是110.

2.错误
(1).缺乏必要的约束，只约束了宽度和高度，没有约束具体的位置。
(2).两个约束冲突，比如1个约束控件的宽度为100，一个约束控件的宽度为110

七、特殊情况

1. UILabel
   UILabel不用约束宽度，会自动根据文字多少自动改变宽度——不用添加宽度约束(不会报错)

2. UISearchbar
   searchbar添加到navigationBar的titleView中时，会自动伸长到整个navigationBar，对其添加的任何约束和frame属性都没有用。
   解决方法：添加searchBar到另外一个普通的view中再设置为titleView