最近在梳理技术点，又一次看到Masonry，实操一下，将来原理部分可能会添加
厌倦了天天计算frame的coder们，就不要犹豫了
举个 🌰吧
嘻嘻嘻嘻嘻嘻.png
- 比如这样的效果，平时实现起来，屏幕宽度/2,再计算间距什么的，即使不是特别麻烦，但终归效率不高且代码有点冗余
- 如果你依旧乐此不疲，那这里就帮你适当简化一下这样的代码
self.view.frame.origin.x -> self.view.left
框架肯定不少，这里列2个我自己接触过的
- YYKit 中有一个分支是有这个功能的，具体懒得看的
- UIViewAdditions 使用了多年的一个小型第三方
进入正题之前提一下
iOS自动布局核心计算公式
Obj1.property1 = Obj2.property2 * multiplier + constant value
Masonry的设置方式
make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);
接下来进入正题
- 示例1：
UIView * redV = [[UIView alloc]init];
redV.backgroundColor = [UIColor redColor];
//约束后添加会崩溃
[self.view addSubview:redV];
// equalTo 和 mas_equalTo 等效
[redV mas_makeConstraints:^(MASConstraintMaker *make) {
//redV的顶部=self.view的顶部 * 1 + 20；
make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);
make.left.equalTo(self.view.mas_left).offset(20);//.multipliedBy(1.0) 可以不写默认*1
make.right.equalTo(self.view).offset(-20); //.mas_rightt 也可以不写，就是根据self.view设置make.right
make.bottom.offset(-20);//.equalTo(self.view.mas_bottom) 也可以不写，默认相对于父控件
// 设置上左 左下 可以通过连写
// make.top.and.left.offset(20);
// make.left.bottom.offset(-20); //.and 可以删掉，默认就有，以及with
// make.edges.equalTo(self.view)insets(UIEdgeInsetsMake(20, 20, -20, -20))
// make.edges.insets(UIEdgeInsetsMake(20, 20, -20, -20));//.equalTo(self.view) 可以删掉
}];
可以看出，基本代码可以简化在简化，但是为了提升阅读性，改怎么写，相信大家心里都有数，看一下效果图
示例1.png
- 示例2：
UIView * greeV = [[UIView alloc]init];
greeV.backgroundColor = [UIColor greenColor];
[self.view addSubview:greeV];
[greeV mas_makeConstraints:^(MASConstraintMaker *make) {
//普通写法
make.width.equalTo(@100); //默认需要传入基本类型
make.height.mas_equalTo(100); //将传入的基本类型包装成对象类型
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view);//.mas_centerX 可以不写
//简单写法
// make.size.mas_equalTo(CGSizeMake(100, 100));
// make.center.mas_equalTo(self.view);
}];
看一下效果图
示例2.png
- 示例3：
也就是开局的那个效果
UIView * blue = [[UIView alloc]init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
UIView * orange = [[UIView alloc]init];
orange.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orange];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.view.mas_left).offset(30);
make.top.mas_equalTo(self.view.mas_top).offset(30);
make.right.mas_equalTo(orange.mas_left).offset(-30);
make.width.mas_equalTo(orange.mas_width);
make.height.mas_equalTo(50);
}];
[orange mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(self.view).offset(-30);
make.top.mas_equalTo(self.view).offset(30);
make.height.mas_equalTo(50);
//
// make.top.mas_equalTo(blue.mas_top);
// make.bottom.mas_equalTo(blue.mas_bottom);
}];
还是在看一眼效果吧
示例3.png
- 对应的有设置，就有修改和删除
//更新约束，有则更新，无则添加
[greeV mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@600); //equalTo 默认需要传入基本类型
}];
//删除之前所有的约束，并在block内先加新的约束
[greeV mas_remakeConstraints:^(MASConstraintMaker *make) {
}];
