iOS开发之 AutoLayout自动布局

AutoLayout 入门须知：

相对布局是找一个参照物
拿参照物当做基础，设置他和参照物的相对距离
来设置自己的位置

frame 原点
自身的尺寸 来确定自身的位置

autoLayout 根据参照视图的位置
来定义自己的位置

autoLayout 约束视图和视图的关系
来分配屏幕上的位置

// 使用VFL（Visual Format Language
视觉格式语言）通过添加字符串
来约束视图和视图之间的关系
使用 autoLayout
，必须把 translatesAutoresizingMaskIntoConstraints
禁用才可以使用

相对布局是找一个参照物
拿参照物当做基础，设置他和参照物的相对距离 来设置自己的位置

VFL 需有横竖
两个方向的约束 H:横向 V:
竖向 | 表示他的父视图 -50-
表示两个视图的间距

H:横向

| 表示他的父视图

-50- 表示后面视图
与前面视图的距离 （后面视图是textField，前面视图是他的父视图）

[textField(>=200)] 要约束视图的宽 (>=200)允许最小的宽度是200
如果是竖向
就是允许最小的高度

@"H:|-50-[textField(>=200)]-50-|"

距离坐边原点距离50
右边边界距离50 允许视图的最小宽度是200

V: 竖向

使用autoLayout适配的时候，以最小尺寸设备
为基准

VFL 横向
竖向布局

@"H:" 设置横向布局

@"V:" 设置竖向布局

设置横向布局
距离参照视图的左侧边距

@"H:|-20-"

@"H:[view]-20-"

@"H:|-20-[view(200)]" view的宽
永远是200

@"H:|-20-[view(otherView)]" view的宽
与otherView的宽相同

@"H:|-20-[view(>=200)]" 设置横向布局
距离参照视图的左侧边距
设置view横向的尺寸
不能低于200

@"H:|-20-[view(>=200)]-20-|" 设置横向布局
距离参照视图的左侧边距
设置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>

效果图如下：