使用自动布局的步骤是:
1、使用代码自动布局(autolayout) frame就会失效,所以 不需要再去设置视图的frame,另外,使用代码自动布局的时候 需要禁用translatesAutoresizingMaskIntoConstraints = NO;
2、绑定视图与字符串
3、添加约束
关于横向竖向的设置:
横向:距离父视图左侧100 视图本身的宽度最小是100 距离父视图右侧100
H:|-50-[view1(>=100)]-50-|
竖向:距离父视图顶部150 视图本身高度是40
V:|-100-[view1(30)]
注意:|表示父视图 ,-本身表示一段距离, -距离-表示指定距离,[字符串表示的视图] 表示参照视图,[字符串表示的视图(视图的宽高 或者 最小最大的宽高、相对宽高)]中的()小括号千万不要丢掉。
第一种添加约束的方法:
- (void)demo1{
UIView *view = [UIView new];
// 1、禁用
view.translatesAutoresizingMaskIntoConstraints = NO;
view.backgroundColor = [UIColor grayColor];
[self.view addSubview:view];
// 2、绑定视图和字符串
NSDictionary *views = NSDictionaryOfVariableBindings(view);
// 3、添加约束
// NSLayoutConstraint 约束的类
/*
VisualFormat:VFL语句
options:基于哪一个选项(基于方向去计算布局)
metrics:绑定数值 与字符串
views:绑定视图 与字符串
*/
/*
横向:距离父视图左侧100 视图本身的宽度最小是100 距离父视图右侧100
竖向:距离父视图顶部150 视图本身高度是40
可视化语言
H:|-100-[view(>=100)]-100-|
V:|-100-[view(40)]
*/
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
第二种添加约束的方法:
UIView *view1 = [self createView:@"UIView" addView:self.view];
UIView *view2 = [self createView:@"UIView" addView:self.view];
view1.backgroundColor = [UIColor redColor];
view2.backgroundColor = [UIColor grayColor];
// 2、绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
// 3、添加约束
/*
view2:
横向:距离父视图左侧100 view2宽度最小是100 距离父视图右侧是100
竖向:距离view1 50 view2的高度和view1相同
可视化语言
view1:
H:|-100-[view(>=100)]-100-|
V:|-100-[view(40)]
view2:
H:|-100-[view2(>=100)]-100-|
V:[view1]-50-[view2(view1)]
*/
// view1:
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view1(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
// view2:
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
第三种添加约束的方法:
- (void)demo3{
/*
研究发现:
两个视图 竖向 是有交集的
-> 尝试把两个竖向的约束 放到一起
view1:
V:|-150-[view1(40)]
view2:
V:[view1]-50-[view2(view1)]
放到一起:
V:|-150-[view1(40)]-50-[view2(view1)]
*/
UIView *view1 = [self createView:@"UIView" addView:self.view];
UIView *view2 = [self createView:@"UIView" addView:self.view];
view1.backgroundColor = [UIColor redColor];
view2.backgroundColor = [UIColor grayColor];
// 2、绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
// view1:
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
// view2:
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
第四种添加约束的方法:
- (void)demo4{
UIView *view1 = [self createView:@"UIView" addView:self.view];
UIView *view2 = [self createView:@"UIView" addView:self.view];
view1.backgroundColor = [UIColor redColor];
view2.backgroundColor = [UIColor grayColor];
// 2、绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
// 所有约束的 VFL数组
NSArray *constraints = @[@"H:|-100-[view1(>=100)]-100-|",@"H:|-100-[view2(>=100)]-100-|",@"V:|-150-[view1(40)]-50-[view2(view1)]"];
for (int i = 0; i < constraints.count; i++) {
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraints[i] options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
}
}
第五种添加约束的方法:
- (void)demo5{
UIView *view1 = [self createView:@"UIView" addView:self.view];
UIView *view2 = [self createView:@"UIView" addView:self.view];
view1.backgroundColor = [UIColor redColor];
view2.backgroundColor = [UIColor grayColor];
// 2、绑定
NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
NSNumber *leftSpace = @100;
NSNumber *rightSpace = @100;
NSNumber *view1TopSpace = @150;
NSNumber *view1MinWidth = @100;
NSNumber *view1Hight = @40;
NSNumber *view2TopSpace = @50;
NSDictionary *metrics = NSDictionaryOfVariableBindings(leftSpace,rightSpace,view1MinWidth,view1Hight,view1TopSpace,view2TopSpace);;
NSArray *constraints = @[@"H:|-leftSpace-[view1(>=view1MinWidth)]-rightSpace-|",@"H:|-leftSpace-[view2(view1)]-rightSpace-|",@"V:|-view1TopSpace-[view1(view1Hight)]-view2TopSpace-[view2(view1)]"];
for (int i = 0; i < constraints.count; i++) {
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraints[i] options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];
}
}
网友评论