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 據(jù) 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);
}];
小結(jié)
由代碼可見，使用 constraintWithItem 進(jìn)行上圖一個簡單的布局需要添加十幾個約束，代碼量巨大可讀性差，而且這個方法參數(shù)多，一不留心很容易寫錯，排查起來也很困難。
使用VFL創(chuàng)建約束，只需要創(chuàng)建四組約束，每一組可以描述一個方向上的多個約束，代碼量少，VFL語法簡潔直觀，個人覺得使用VFL進(jìn)行不太復(fù)雜的布局是非常方便的。
