Simulator Screen Shot 2017年8月15日 下午12.27.22.png
第一种方式 — constraintWithItem
UIView *leftView = [[UIView alloc] init];
UIView *rightView = [[UIView alloc] init];
UIView *bottomView = [[UIView alloc] init];
leftView.backgroundColor = [UIColor greenColor];
rightView.backgroundColor = [UIColor purpleColor];
bottomView.backgroundColor = [UIColor orangeColor];
leftView.translatesAutoresizingMaskIntoConstraints = NO;
rightView.translatesAutoresizingMaskIntoConstraints = NO;
bottomView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:leftView];
[self.view addSubview:rightView];
[self.view addSubview:bottomView];
// leftview 上20
NSLayoutConstraint *constraint = [NSLayoutConstraint
constraintWithItem:leftView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:20];
// leftview 左20
NSLayoutConstraint *constraint2 = [NSLayoutConstraint
constraintWithItem:leftView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:20];
// leftview 右20
NSLayoutConstraint *constraint3 = [NSLayoutConstraint
constraintWithItem:leftView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:rightView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:-30];
// rightview 右20
NSLayoutConstraint *constraint4 = [NSLayoutConstraint
constraintWithItem:rightView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-20];
// left 和 right 等宽
NSLayoutConstraint *constraint5 = [NSLayoutConstraint
constraintWithItem:leftView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:rightView
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:0];
// left 和 right 等高
NSLayoutConstraint *constraint6 = [NSLayoutConstraint
constraintWithItem:leftView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:rightView
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:0];
// left 和 right 上对齐
NSLayoutConstraint *constraint7 = [NSLayoutConstraint
constraintWithItem:leftView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:rightView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0];
// bottomview 下20
NSLayoutConstraint *constraint8 = [NSLayoutConstraint
constraintWithItem:bottomView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-20];
// bottomview 与 left 左对齐
NSLayoutConstraint *constraint9 = [NSLayoutConstraint
constraintWithItem:bottomView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0];
// bottom right 右对齐
NSLayoutConstraint *constraint10 = [NSLayoutConstraint
constraintWithItem:bottomView
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:rightView
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0];
// bottom 与 left 等高
NSLayoutConstraint *constraint11 = [NSLayoutConstraint
constraintWithItem:bottomView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:0];
// bottom 据 left 30
NSLayoutConstraint *constraint12 = [NSLayoutConstraint
constraintWithItem:bottomView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:leftView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:30];
[self.view addConstraints:@[constraint, constraint2, constraint3,constraint4,constraint5, constraint6, constraint7, constraint8,constraint9,constraint10,constraint11,constraint12]];
第二种方式 — VFL
UIView *leftView = [[UIView alloc] init];
UIView *rightView = [[UIView alloc] init];
UIView *bottomView = [[UIView alloc] init];
leftView.backgroundColor = [UIColor greenColor];
rightView.backgroundColor = [UIColor purpleColor];
bottomView.backgroundColor = [UIColor orangeColor];
leftView.translatesAutoresizingMaskIntoConstraints = NO;
rightView.translatesAutoresizingMaskIntoConstraints = NO;
bottomView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:leftView];
[self.view addSubview:rightView];
[self.view addSubview:bottomView];
NSDictionary *metrics = @{@"space1": @20,@"space2": @30};
NSDictionary *nameDict = NSDictionaryOfVariableBindings(leftView,rightView,bottomView);
NSArray *hConstraint = [NSLayoutConstraint
constraintsWithVisualFormat:@"H:|-space1-[leftView(==rightView)]-space2-[rightView]-space1-|"
options:0
metrics:metrics
views:nameDict];
NSArray *vConstraint = [NSLayoutConstraint
constraintsWithVisualFormat:@"V:|-space1-[leftView(==rightView)]-space2-[bottomView(==leftView)]-space1-|"
options:0
metrics:metrics
views:nameDict];
NSArray *vConstraint2 = [NSLayoutConstraint
constraintsWithVisualFormat:@"V:|-space1-[rightView]-space2-[bottomView]-space1-|"
options:0
metrics:metrics
views:nameDict];
NSArray *hConstraint1 = [NSLayoutConstraint
constraintsWithVisualFormat:@"H:|-space1-[bottomView]-space1-|"
options:0
metrics:metrics
views:nameDict];
[self.view addConstraints:hConstraint];
[self.view addConstraints:hConstraint1];
[self.view addConstraints:vConstraint];
[self.view addConstraints:vConstraint2];
第三种方式 — Masnory
UIEdgeInsets padding = UIEdgeInsetsMake(20, 20, 20, 20);
[leftView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.top).with.offset(padding.top);
make.left.equalTo(superview.left).with.offset(padding.left);
make.right.equalTo(rightView.left).with.offset(-padding.right);
make.bottom.equalTo(bottomView.top).with.offset(-padding.bottom);
make.width.equalTo(rightView.width);
make.height.equalTo(@[rightView, bottomView]);
}];
[rightView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(leftView.top);
make.right.equalTo(superview.right).with.offset(-padding.right);
}];
[bottomView makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(superview.left).with.offset(padding.left);
make.right.equalTo(superview.right).with.offset(-padding.right);
make.bottom.equalTo(superview.bottom).with.offset(-padding.bottom);
}];
小结
由代码可见，使用 constraintWithItem 进行上图一个简单的布局需要添加十几个约束，代码量巨大可读性差，而且这个方法参数多，一不留心很容易写错，排查起来也很困难。
使用VFL创建约束，只需要创建四组约束，每一组可以描述一个方向上的多个约束，代码量少，VFL语法简洁直观，个人觉得使用VFL进行不太复杂的布局是非常方便的。