AutoLayout 入门须知：
相对布局是找一个参照物 拿参照物当做基础，设置他和参照物的相对距离 来设置自己的位置
frame 原点 自身的尺寸 来确定自身的位置
autoLayout 根据参照视图的位置 来定义自己的位置
autoLayout 约束视图和视图的关系 来分配屏幕上的位置
使用VFL（Visual Format Language 视觉格式语言）通过添加字符串 来约束视图和视图之间的关系
使用 autoLayout ，必须把 translatesAutoresizingMaskIntoConstraints 禁用才可以使用
相对布局是找一个参照物 拿参照物当做基础，设置他和参照物的相对距离 来设置自己的位置
VFL 需有横竖 两个方向的约束 H:横向 V: 竖向 | 表示他的父视图 -50- 表示两个视图的间距
横向
| 表示他的父视图
-50- 表示后面视图 与前面视图的距离 （后面视图是textField，前面视图是他的父视图）
要约束视图的宽 (>=200)允许最小的宽度是200 如果是竖向 就是允许最小的高度
@"H:|-50-[textField(>=200)]-50-|"
距离坐边原点距离50 右边边界距离50 允许视图的最小宽度是200
竖向
使用autoLayout适配的时候，以最小尺寸设备 为基准
横向 竖向布局
设置横向布局
设置竖向布局
设置横向布局 距离参照视图的左侧边距
@"H:|-20-"
@"H:[view]-20-"
的宽 永远是200
的宽 与otherView的宽相同
设置横向布局 距离参照视图的左侧边距 设置view横向的尺寸 不能低于200
设置横向布局 距离参照视图的左侧边距 设置view横向的尺寸 不能低于200 设置右侧与参照视图之间的间距
视图使用属性的时候 绑定key 需要绑定它真实的名字_titleLable 而不能绑定self.titleLable ,因为找不到这个self.titleLable
1、demo1
<span style="color:#42b05c;"> </span><span style="color:#333333;"> UIView *view = [[UIView alloc]init];
view.translatesAutoresizingMaskIntoConstraints = NO;
view.backgroundColor = [UIColor grayColor];
[self.view addSubview:view];
NSDictionary *views = NSDictionaryOfVariableBindings(view);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|" options:0 metrics:nil views:views]];</span>
2、demo2
<span style="color:#42b05c;"> </span><span style="color:#333333;"> UIView *view1 = [[UIView alloc]init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
UIView *view2 = [[UIView alloc]init];
view2.translatesAutoresizingMaskIntoConstraints = NO;
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
// 红色view横向约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
// 红色view竖向约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(50)]-10-[view2]" options:0 metrics:nil views:views]];
// 黄色view横向约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view2(>=200)]-20-|" options:0 metrics:nil views:views]];
// 黄色view竖向约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1]-10-[view2(50)]" options:0 metrics:nil views:views]];</span>3、demo3（优化后的demo2）
<span style="color:#42b05c;"> </span><span style="color:#333333;"> UIView *view1 = [[UIView alloc]init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
UIView *view2 = [[UIView alloc]init];
view2.translatesAutoresizingMaskIntoConstraints = NO;
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
// 红色view横向约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
// 黄色view横向约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view2(>=200)]-20-|" options:0 metrics:nil views:views]];
// 红色view1 和黄色view2 都在同一个父视图上 约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(50)]-10-[view2(50)]" options:0 metrics:nil views:views]];</span>
4、demo4
<span style="color:#42b05c;"> </span><span style="color:#333333;"> NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor],[UIColor blueColor]];
for (int i = 0; i<3; i++) {
UIView *view = [[UIView alloc]init];
view.translatesAutoresizingMaskIntoConstraints = NO;
view.backgroundColor = colorList[i];
view.tag = 100+i;
[self.view addSubview:view];
}
UIView *redView = [self.view viewWithTag:100];
UIView *yellowView = [self.view viewWithTag:101];
UIView *blueView = [self.view viewWithTag:102];
NSDictionary *views = NSDictionaryOfVariableBindings(redView,yellowView,blueView);
NSArray *Harray = @[@"H:|-20-[redView(>=200)]-20-|",@"H:|-20-[yellowView(>=100)]-10-[blueView(yellowView)]-20-|"];
// 红黄 竖向关系 红蓝 竖向关系
NSArray *Varray = @[@"V:|-40-[redView(50)]-10-[yellowView(redView)]",@"V:|-40-[redView(50)]-10-[blueView(redView)]"];
for (int i = 0; i<Harray.count; i++) {
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:Harray[i] options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:Varray[i] options:0 metrics:nil views:views]];
}</span>
效果图如下：
