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 }]; }