一、简介
在以前的iOS程序中，经常编写大量的坐标计算代码，为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果，有时还需要分别为2种屏幕编写不同的坐标计算代码，即传说中的“屏幕适配”。
那什么是Autolayout呢？
Autolayout是一种“自动布局”技术，专门用来布局UI界面的。Autolayout自iOS6开始引入，由于Xcode4的不给力，当时并没有得到很大推广。自iOS7（Xcode5）开始，Autolayout的开发效率得到很大的提升。苹果官方也推荐开发者尽量使Autolayout来布局UI界面，它能很轻松地解决屏幕适配的问题。在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成，相比之下，Autolayout的功能比Autoresizing强大很多。
如何使用呢？
Autolayout有2个核心概念：参照和约束。它通过内定的Constraint(约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图。将我们想象中的结果展现出来。Constraint的设定非常灵活,实现一种布局的方法可以通过多Constraint来完成.
以下几点是我们在开始使用之前必须弄清楚的事情:
- 我们要抛弃以往旧的布局方式不再去关注ViewFrame,center,和autoresizing，因为这些坐标和大小的定位都可以通过来Auto Layout完成。
- 理解每一种Constraint的含义,否则,当你去看别人的实现的Constraint时,就会有种看天书的感觉。
- 按意图设计,一切按我们理想中的效果去布局,只要约束设定的合理,就一定能够完成目标布局。
二、用xib或者storyboard来实现Autolayout
-
先从Interface Builder开始吧. 打开某个xib或者storyboard,
在右侧Show in file inspector里面找到Ues Autolayout,将其勾选。如下图：
自此,Autolayout便启用成功,autoresizingMask被废弃.其所有以往的功能和特性都被Autolayout取代.
注意：
现在我们定位控件位置的方式,不再像以前一样,计算好每一个控件具体的位置,x是多少,y是多少。而是思考,这个控件离左边是相隔多少距离,或者离顶部或底部相隔多少距离。
而有些规则性的事情还是类似的,比如我们定位一个控制的位置,一定要有x,y两个坐标点同时有值,少一个都不能正常显示。
同样Autolayout在创建约束时也一样,在思考完离顶部距离以后,还需要思考离顶部距离,否则控件的显示位置一样无法正常显示.
换言之,要让Autolayout计算出合理的位置,需要保证水平距离和垂直距离同时存在. 否则IDE,都会给出警告,提示这样的布局Ambiguous Layout(模凌两可) 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，它们之间间距12H:[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）V:[redBox][yellowBox(==redBox)]
竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBoxH:|-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];
}];
- 可以在UIView中让多个约束一起执行动画
如果控件有默认的高度，只需要设置autoLayout的X值和Y值，autoLayout会自动计算出控件的宽高。
六、Autolayout的警告与错误
1.警告
控件的frame不匹配所添加的约束,比如约束控件的宽度为100，而控件现在的宽度是110.
2.错误
(1).缺乏必要的约束，只约束了宽度和高度，没有约束具体的位置。
(2).两个约束冲突，比如1个约束控件的宽度为100，一个约束控件的宽度为110
七、特殊情况
UILabel
UILabel不用约束宽度，会自动根据文字多少自动改变宽度——不用添加宽度约束(不会报错)UISearchbar
searchbar添加到navigationBar的titleView中时，会自动伸长到整个navigationBar，对其添加的任何约束和frame属性都没有用。
解决方法：添加searchBar到另外一个普通的view中再设置为titleView