iOS - Masonry的正确使用方式

效果图



第一个redView约束,全部相对于superView的约束

[redView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(self.view).with.offset(50);
make.left.equalTo(self.view).with.offset(20);
//相对于右侧的约束要用负值
make.right.equalTo(self.view).with.offset(-5);
make.height.equalTo(@55);
}];

第二个蓝色blueView的约束

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

//相对于上一个view的底部的约束
make.top.equalTo(redView.mas_bottom).with.offset(10);
make.left.equalTo(self.view).with.offset(202);
make.right.equalTo(self.view).with.offset(-115);
make.height.equalTo(@35);
}];

第三个绿色greenView的约束

[greenView mas_makeConstraints:^(MASConstraintMaker *make) {

//上方相对于红色view约束
make.top.equalTo(redView.mas_bottom).with.offset(10);
make.left.equalTo(self.view).with.offset(5);
//绿色view的右侧相对于上个view的左侧要用负值.
make.right.equalTo(blueView.mas_left).with.offset(-105);
make.height.equalTo(@45);
}];

最下方redView2约束

[redView2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(greenView.mas_bottom).with.offset(30);
make.left.equalTo(self.view).with.offset(15);
make.right.equalTo(self.view).with.offset(-80);
make.height.equalTo(@45);
}];

中间橙色view约束,上 下 左 右

[orangeView mas_makeConstraints:^(MASConstraintMaker *make) {

//上方相对于第一个红色view约束
make.top.equalTo(redView.mas_bottom).with.offset(5);
//左侧相对于绿色约束
make.left.equalTo(greenView.mas_right).with.offset(15);
//右侧相对于蓝色约束
make.right.equalTo(blueView.mas_left).with.offset(-20);
//下方相对于下方红色view顶部的约束
make.bottom.equalTo(redView2.mas_top).with.offset(-10);
//        make.height.equalTo(@32);
}];

view的右侧,以及下方的约束一般用负值容易理解.