AutLayout 相对布局,根据参照视图的位置 来定义自己的位置。通过约束视图和视图之间的关系来分配屏幕上的位置,通常与VFL语言配合使用
VFL(visual format language)视觉格式化语言,通过字符串来约束字符和字符之间的关系
使用AutLayout必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用frame 原点 自身的尺寸 来确定 自身位置。而autoLayout 根据参照视图的位置 来定义自己的位置
autoLayout是相对布局 约束视图和视图之间的关系 来分配 屏幕上的位置
使用VFL(Visual Format Language 视觉格式语言)通过添加字符串 来约束视图和视图之间的关系
使用autoLayout 必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用
相对布局是找一个参照物 拿参照物当做基础,设置他和参照物的相对距离 来设置自己的位置
VFL 须有 横竖 两个方向的约束
H:表示: 横向
V: 表示:竖向
| 表示他的父视图
-50- 表示后面视图 与前面视图的距离 (后面视图是textField,前面视图是他的父视图)
[]表示是一个视图
[textField(>=200)] 要约束视图的宽 (>=200)允许最小的宽度是200 如果是竖向 就是允许最小的高度
@"H:|-50-[textField(>=200)]-50-|"
距离坐边原点距离50 右边边界距离50 允许视图的最小宽度是200
使用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 = _titleLable
下面是代码:
1.使用Autolayout布局一个视图
在viewDidLoad写入以下代码:
UIView *view = [[UIView alloc]init];
//使用Autolayout必须禁用translatesAutoresizingMaskIntoConstraints
view.translatesAutoresizingMaskIntoConstraints =NO;
view.backgroundColor =[UIColor redColor];
[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]];
2.使用Autolayout布局两个视图:
UIView *view = [[UIView alloc]init];
view.translatesAutoresizingMaskIntoConstraints =NO;
view.backgroundColor =[UIColor redColor];
[self.view addSubview:view];
UIView *view1 = [[UIView alloc]init];
view1.translatesAutoresizingMaskIntoConstraints =NO;
view1.backgroundColor =[UIColor yellowColor];
[self.view addSubview:view1];
NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|-40-[view(>=50)]" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];
3.使用Autolayout布局多个视图
NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor],[UIColor greenColor]];
for (int i=0; i<3; i++) {
UIView *view =[[UIView alloc]init];
view.backgroundColor = colorList[i];
view.tag = 30+i;
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
}
UIView *redColorview = [self.view viewWithTag:30];
UIView *yellowColorview = [self.view viewWithTag:31];
UIView *greenColorview = [self.view viewWithTag:32];
NSDictionary * views = NSDictionaryOfVariableBindings(yellowColorview,redColorview,greenColorview);
NSArray * HList = @[@"H:|-20-[redColorview(>=200)]-20-|",@"H:|-20-[yellowColorview(>=100)]-10-[greenColorview(yellowColorview)]-20-|"];
// 红色视图与黄色视图竖向关系和红色视图和绿色视图竖向关系
NSArray *VList = @[@"V:|-40-[redColorview(50)]-10-[yellowColorview(redColorview)]",@"V:|-40-[redColorview(50)]-10-[greenColorview(redColorview)]"];
for (int i =0; i<VList.count; i++) {
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:HList[i] options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VList[i] options:0 metrics:nil views:views]];
}