一、什么时候用autolayout比较适合
- 不负责任的骑墙派说法：apple的设备越来越多了，你的应用应该都使用al。（并且用sb）
- 要看应用内容决定。如果你的内容是信息众多，同时需要展示的类别也很多，尺寸动态不定，甚至这些是在列表中的。（如社交应用）。Al能给于很大的帮助。
- Mac os的应用。现在都做iOS了。mac app的窗口，会有大小变化。al比较合适。
- 支持多向转屏的iPad应用。（有需要支持多方向iphone场景么？那么长，脑残了？）
- 其他业务不复杂,页面较少的应用，其实，cocoa程序员写了多年code都有自己的ui编程习惯，这些习惯对于他们来说是很高效的。就算是第一项所说，布局的坐标都是相对的。
如果是习惯于code写布局的，建议可以继续沿用，同时也要学习al。自我感觉al和传统布局写法，工作量不会相差太多。但是VFL用熟练了以后会有很大的改善。
二、autolayout的基础理论
al的核心出发点是
- view具有自我计算尺寸，布局的能力。通过它自身的内容，能够得到尺寸。
- view的布局位置，确定于它与superview及其他view的关系。
- 与传统的autoresizingmask自适应相比，al更精确，能绝对的确定view的布局。
- view不一定需要一个初始的rect。al中，view如果有足够的constraint，便可以确定自己的尺寸和位置，并且知道自己和其他view的关系。即，想确定view的布局，就给它（们）添加constraint。
三、xib下的autolayout
似乎al和xib布局模式生来就是要搞在一起的。用xib加al，view布局非常简单容易。编程工作立刻变成了美工的连线拼图游戏。
开启xib或者sb后，选择需要view(s)。选择menu的Editor，选择Pin。子菜单的项目就是可用的constraints。
Width:固定自身宽度
Height:。。。
H- Spacing: 固定两个view的水平间距
V- Spacing:。。。
下面４个分别是view相对于superview的左、右、上、下的间距
Widths Equally:两个view保持宽度相同
Heights Equally:。。。
xib界面右下角工具条也有可以编辑constraint的方式：
每个constraint添加后都是可以编辑的。选中某个constraint后开启右边栏选inspector。可以修改数值。（这个数值是view间的偏移量）和优先级。
xib下的al比较直观。可以基本看到效果和误差值。还有不正确的constraint的提示。少了constraint编译器会补，多了会提示报错。 （不过都会引起界面布局不对，自己慢慢调吧，哥现在还是满篇alert，没有让编译器感觉矛盾费解的constraint，都是可以work的。）
四、编码方式使用autolayout
- Visual format language （应该不算语言）
Apple的工程师很有爱，发明了这种哭笑不得的象形文字。感觉它就是种解析方式。
VFL在程序中由支持：
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
- 它返回一组constraint.
- format是你的VFL字串，等下讲。
- opts自己点去头文件看。有些情况会用，等下有例子。
- metrics是一个奇妙的字典，是你自己定义的。这个字典里面的key可以写在format字串中。编译器解析时，自动替换为metrics字典中的value。等下有例子。
- views是需要constraint关系的所有view.(也可以是一个)
- VFL例子
写vfl字串的时候，脑海里要想象出画面的合理性。不合理的constraint会导致程序运行时报错或者直接崩溃。
随便写几个
NSDictionary *dict1 = NSDictionaryOfVariableBindings(_boxV,_headerL,_imageV,_backBtn,_doneBtn);
NSDictionary *metrics = @{@"hPadding":@5,@"vPadding":@5,@"imageEdge":@150.0};
NSString *vfl = @"|-hPadding-[_boxV]-hPadding-|";
NSString *vfl0 = @"V:|-25-[_boxV]";
NSString *vfl3 = @"V:|-vPadding-[_headerL]-vPadding-[_imageV(imageEdge)]-vPadding-[_backBtn]-vPadding-|";
dict1就是api 中需要的最后一个参数views。由上述宏来完成。
metrics定义了一些vfl中要用的参数。
下面有些vfl字串，一看便知如何使用metrics。
看到：
-
"|"表示superview.
|-间距-[view1对象名]-(>=20)-[view2对象名]
不写H/V就表示横向，间距可以写固定值也可写>/<。
形象化的理解，"|"是用来确定view上、下、左、右关系的。
想要确定从上到下的关系，就加V:|。那么这个vfl字串就可以描述从上到下的view们的关系。
-
看到vfl3里面，方括号表示view，圆括号表示尺寸数值。支持大小等于。或者另一个view |-[view1(view2)]，v１的宽度等于v２。
-
优先级用＠表示。如V:|-50@750-[view(55)]，或者写到metrics里面更好。
具体定义查看UILayoutPriority。有几个固定的数值。1000表示必须支持。
-
options，这个要看具体需要。如果是竖排V布局，可以添加NSLayoutFormatAlignAllLeft，让他们对齐。
根据需要也可以添加按位或NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight。（鬼知道什么需要，自己看经验吧） -
写好以后一般把constraint添加给superview：
NSString *vfl1 = @"|-hPadding-[_headerL]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict1]];
- 还有一个api用于生成单个constaint
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
对于参数，记得，view1.attr1 = view2.attr2 * multiplier + constant就好。
这个是不用VFL的，好理解，但是不方便。如果用这个写。工作两不会比传统布局少多少。
五. 实际操作中的问题
编码模式中
- addConstraint(s)前，view应该去部被addSubView上去了。
- 不必给views写frame
- 给必要的view关掉AutoresizeingMask。[_aView setTranslatesAutoresizingMaskIntoConstraints:NO];
- UILabel换行要写linebreakMode,要写numberOfLines(iOS7.0默认好像是1，坑爹了)
- UILabel要想换行，一定要添加preferredMaxLayoutWidth。否则没法初始化宽度。
编码模式感受到的最大方便。label换行不用写行高计算了。完全自动适应。label所在的superview也会自动计算rect。这才是al的精华。
所以，可以不用写这些了：
/*
if([[UIDevice currentDevice].systemVersion floatValue]<7.0){
CGSize titleS = [title sizeWithFont:[_headerL font]
constrainedToSize:CGSizeMake(270.0, CGFLOAT_MAX)
lineBreakMode:NSLineBreakByWordWrapping];
_headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,
_headerL.frame.size.width, titleS.height);
}else{
CGRect titleR = [title boundingRectWithSize:CGSizeMake(270.0, CGFLOAT_MAX)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:nil
context:nil];
headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,
_headerL.frame.size.width, titleR.size.height);
}
*/
[NSLayoutConstraint constraintsWithVisualFormat: options:metrics: views:];
constraintsWithVisualFormat:参数为NSString型，指定Contsraint的属性，是垂直方向的限定还是水平方向的限定，参数定义一般如下：
- V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离
若是要定义水平方向，则将V：改成H：即可 - 在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定；
options：字典类型的值；这里的值一般在系统定义的一个enum里面选取
metrics：nil；一般为nil ，参数类型为NSDictionary，从外部传入 //衡量标准
views：就是上面所加入到NSDictionary中的绑定的View - 在这里要注意的是 AddConstraints 和 AddConstraint 之间的区别，一个添加的参数是NSArray，一个是NSLayoutConstraint
- 使用规则
|: 表示父视图
-:表示距离
V: :表示垂直
H: :表示水平
>= :表示视图间距、宽度和高度必须大于或等于某个值
<= :表示视图间距、宽度和高度必须小宇或等于某个值
== :表示视图间距、宽度或者高度必须等于某个值
@ :>=、<=、== 限制 最大为 1000
- |-[view]-|: 视图处在父视图的左右边缘内
- |-[view] : 视图处在父视图的左边缘
- |[view] : 视图和父视图左边对齐
- -[view]- : 设置视图的宽度高度
- |-30.0-[view]-30.0-|: 表示离父视图 左右间距 30
- [view(200.0)] : 表示视图宽度为 200.0
- |-[view(view1)]-[view1]-| :表示视图宽度一样，并且在父视图左右边缘内
- V:|-[view(50.0)] : 视图高度为 50
- V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离
为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。 - [wideView(>=60@700)] :视图的宽度为至少为60 不能超过 700 ，最大为1000
- 如果没有声明方向默认为 水平 V:
例子：
[btnShare setTranslatesAutoresizingMaskIntoConstraints:NO];
NSDictionary *metrics = @{@"height":@44.0, @"width":@44.0, @"edgeSpace":@10.0};
NSDictionary *views = NSDictionaryOfVariableBindings(button);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[button(width)]-edgeSpace-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-edgeSpace-[button(height)]" options:0 metrics:metrics views:views]];
例子：
//这里没有frame的概念了所以不需要设置frame
UITextField* textfield = [[UITextField alloc] init];
//AutoLayout与AutoresizeingMask会冲突所以需要先关闭
[textfield setTranslatesAutoresizingMaskIntoConstraints:NO];
[textfield setBackgroundColor:[UIColor whiteColor]];
[textfield setBorderStyle:UITextBorderStyleRoundedRect];
[self.view addSubview:textfield];
UIButton* button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
[button setTitle:@"button" forState:UIControlStateNormal];
[self.view addSubview:button];
NSMutableArray* arrayConstraints = [NSMutableArray array]; //添加约束条件
[arrayConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[textfield(>=10)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(textfield)]];
[arrayConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[textfield(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(textfield)]];
[arrayConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[button(<=50)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[arrayConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[arrayConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[textfield(>=10)]-8-[button(<=50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(textfield, button)]];
[self.view addConstraints:arrayConstraints];
参考：http://www.cocoachina.com/industry/20131108/7322.html
http://zhuhaibobb.blog.163.com/blog/static/27440067201432402643739/
https://gist.github.com/richy486/6408141
网友评论