masonry oc版（ snapkit swift版）

masonry是一款基于纯代码编写的自动布局第三方框架，他的使用非常方便。对它进行简单的介绍和总结。

demo实例效果：用masonry完成如下效果



使用方法：

1.通过cocopad安装masonry或者直接在github上下载。

2.引入头文件#import "Masonry.h"

3.在效果图中，主要用到了四个label，一个view和一个button,初始化这些控件：

label1 = [UILabel new];
label2 = [UILabel new];
label3 = [UILabel new];
label4 = [UILabel new];

//初始化label，并设置它的一些参数
NSArray *arrayLabel = @[label1,label2,label3,label4];
NSArray *arrayText = @[@"科目一",@"科目二",@"科目三",@"科目四"];
for (int i = 0; i<4; i++) {
UILabel *label = arrayLabel[i];
label.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1.0];
label.text = arrayText[i];
label.layer.cornerRadius = 10;
label.clipsToBounds = YES;
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor whiteColor];
[self.view addSubview:label];
}

//初始化uiview
backView = [UIView new];
backView.clipsToBounds = YES;
backView.layer.cornerRadius = 50;
backView.layer.masksToBounds = YES;
backView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:backView];
//初始化button
btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setTitle:@"汽车类型" forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor];
btn.layer.cornerRadius = 40;
[backView addSubview:btn];

4.到了今天的主题了，设置上诉控件的约束条件：

需要注意的是：1.masonry只设置纯代码编写的控件，如果你用ib的话，设置masonry是没有效果的。

2.masonry设置，必须在你把控件添加到父视图之后添加，否则会出现报错。

-(void)creatContrains
{
[label1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@80);//距顶部距离
make.left.equalTo(self.view.mas_left).offset(50);//向左偏移50
make.height.equalTo(@70);//设置它的高度
}];

[label2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.height.equalTo(label1);//设置label2的顶部，底部和高度和label1一样，这样设置，简洁明了，很方便吧
make.left.equalTo(label1.mas_right).offset(40);//相对于label1的右间距，偏移40
make.right.equalTo(self.view.mas_right).offset(-50);//设置它的右侧偏移量为50，注意为－号哦。
make.width.equalTo(label1.mas_width);//设置与label1等宽，这里设置的是相对约束，根据不同屏幕的大小，改变label1和label2的宽度。
}];

[label3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.width.height.equalTo(label1);//设置它的左右，宽高和label1一样
make.top.equalTo(label1.mas_bottom).offset(40);//设置label3顶部距label1底部距离
}];

[label4 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.equalTo(label3);//设置它的高低和label3一样的约束
make.left.right.equalTo(label2);//设置它的左右和label2一样
}];

[backView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view);//设置x轴中心对成位置为self.view的x周中心对称
make.top.equalTo(@125);//顶部距离设置
make.size.mas_equalTo(CGSizeMake(100, 100));//设置它的size
}];;

[btn mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(backView);//设置它的x轴，y轴的中心对成位置为backView
make.size.mas_equalTo(CGSizeMake(80, 80));//设置它的size
}];

}