Masonry
文章目录
- Masonry
- Masonry是什么
- Masonry和Auto Layout
- 基本用法
- 添加约束
- 更新与重制约束
- 多个视图的相对约束
- 居中
- 点语法常用方法
- mas_equalTo与equalTo的区别
- 处理UIScrollView
- 解决
- 总结
Masonry是什么
Masonry是一个轻量级的 iOS/macOS 布局框架，用于简化 Auto Layout（自动布局）的代码编写。它通过链式语法替代了苹果原生的繁琐约束语法，让代码更易读、更简洁。
Masonry和Auto Layout
| 维度 | Auto Layout (原生) | Masonry |
|---|---|---|
| 语法 | 冗长，如view.leadingAnchor constraintEqualToAnchor:... | 简洁链式，如make.left.equalTo(...) |
| 代码量 | 多，每个约束都要写active = YES | 少，block 内一口气写完 |
| 可读性 | 较差，约束分散 | 较好，类似自然语言 |
自动关闭translates... | 需要手动NO | 自动处理 |
| 约束更新 | 需先找到约束再改 | mas_updateConstraints直接更新 |
| 性能 | 原生，无额外开销 | 极薄封装，性能几乎无差别 |
| 依赖 | 无 | 需导入第三方库 |
| 适用场景 | 小项目或不想引入依赖 | 追求开发效率和代码简洁 |
基本用法
添加约束
Masonry 中的约束由MASConstraintMaker对象的属性（如top,left,width,height等）来构建，并通过链式调用设置参照和偏移。
UIView*wzm=[[UIView alloc]init];wzm.backgroundColor=[UIColor redColor];[self.view addSubview:wzm];[wzm mas_makeConstraints:^(MASConstraintMaker*make){make.top.left.equalTo(self.view).offset(100);//左上make.width.height.equalTo(self.view).offset(100);//宽高make.bottom.right.equalTo(self.view).offset(100);//右下}];看上面的这部分代码，我们没有一个一个将参数设置，而是将一些参数串在一起设置，
更新与重制约束
mas_makeConstraints:：添加新约束，会与已有约束叠加（如果同一条约束重复会报错）。
mas_updateConstraints:：更新已经存在的约束（比如修改 constant）。
mas_remakeConstraints:：移除当前视图的所有 Masonry 约束，然后重新添加新的约束。
多个视图的相对约束
UIView*blueView=[[UIView alloc]init];blueView.backgroundColor=[UIColor blueColor];[self.view addSubview:blueView];[blueView mas_makeConstraints:^(MASConstraintMaker*make){// 在 redView 下方 20 点，左边对齐 redViewmake.top.equalTo(redView.mas_bottom).offset(20);make.left.equalTo(redView);make.right.equalTo(redView);make.height.mas_equalTo(50);}];演示
#import"ViewController.h"#import"Masonry/Masonry.h"@interfaceViewController()@end@implementationViewController-(void)viewDidLoad{[superviewDidLoad];UIView*wzm=[[UIView alloc]init];wzm.backgroundColor=[UIColor redColor];[self.view addSubview:wzm];UIView*zly=[[UIView alloc]init];zly.backgroundColor=[UIColor blueColor];[self.view addSubview:zly];[zly mas_makeConstraints:^(MASConstraintMaker*make){make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(100,100,100,100));}];[wzm mas_makeConstraints:^(MASConstraintMaker*make){make.top.equalTo(zly).offset(100);// make.width.height.equalTo(self.view).offset(100);//宽高make.bottom.equalTo(zly).offset(100);// make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(150, 150, 150, 150));make.left.equalTo(zly).offset(50);make.width.equalTo(zly);}];}@end居中
[view mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(self.view); make.size.mas_equalTo(CGSizeMake(200, 200)); }];点语法常用方法
| 属性 | 说明 |
|---|---|
.top/.bottom | 视图的顶部与底部边线 |
.left/.right | 视图的左边与右边（不推荐用于国际化） |
.leading/.trailing | 视图的首边与尾边，推荐用于支持 RTL 语言 |
.width/.height | 视图的宽与高 |
.centerX/.centerY | 视图的水平与垂直中心轴 |
.center | 同时设置centerX与centerY（组合属性，用于快速居中） |
.edges | 同时设置top、left、bottom、right（组合属性） |
.size | 同时设置width和height（组合属性） |
.firstBaseline/.lastBaseline | 视图的首行与末行文本基线（仅对UILabel等文本控件有效） |
.leadingMargin/.trailingMargin/ … | 对应视图的layoutMargins布局边距，用于在边距框内对齐 |
mas_equalTo与equalTo的区别
| 方法 | 参数类型 | 是否需要手动包装 |
|---|---|---|
equalTo | 需要传入NSNumber或MASViewAttribute对象 | 是（基本类型要包装成对象） |
mas_equalTo | 可以直接传入基本数据类型（int、CGFloat、CGSize、UIEdgeInsets等） | 否（自动包装） |
// 使用 equalTo（手动包装） make.width.equalTo(@100); // 使用 mas_equalTo（自动包装） make.width.mas_equalTo(100);mas_equalTo，代码更简洁。但需要注意：当比较对象是另一个视图的属性时，两者用法相同，例如make.left.equalTo(view.mas_right)，这时用equalTo就够了。
处理UIScrollView
UIScrollView本身需要确定它在父视图中的位置和大小（这些约束与其他 UIView 一样）。但是contentSize无法直接设置，而是由UIScrollView的子视图通过 Auto Layout 自动计算得出，如果像对待普通 UIView 一样，只给UIScrollView添加子视图并设置位置约束，contentSize会不正确（通常是 (0,0)），导致无法滚动。
解决
先在UIScrollView内部添加一个contentView,需要的滚动的内容都放在这个contentView中，通过约束这个contentView来驱动contentSize
@implementationViewController-(void)viewDidLoad{[superviewDidLoad];UIScrollView*s1=[[UIScrollView alloc]init];[self.view addSubview:s1];[s1 mas_makeConstraints:^(MASConstraintMaker*make){make.edges.equalTo(self.view);}];UIView*contentView=[[UIView alloc]init];[s1 addSubview:contentView];[contentView mas_makeConstraints:^(MASConstraintMaker*make){make.edges.equalTo(s1);make.width.equalTo(s1);}];UILabel*label1=[[UILabel alloc]init];label1.text=@"这是第一行内容";label1.backgroundColor=[UIColor lightGrayColor];[contentView addSubview:label1];UILabel*label2=[[UILabel alloc]init];label2.text=@"第二行\n第三行\n第四行\n第五行\n第六行\n第七行\n第八行\n第九行\n第十行\n滚动到底部了";label2.numberOfLines=0;label2.backgroundColor=[UIColor cyanColor];[contentView addSubview:label2];[label1 mas_makeConstraints:^(MASConstraintMaker*make){make.top.equalTo(contentView).offset(20);make.left.right.equalTo(contentView).inset(15);make.height.mas_equalTo(40);}];[label2 mas_makeConstraints:^(MASConstraintMaker*make){make.top.equalTo(label1.mas_bottom).offset(10);make.left.right.equalTo(contentView).offset(15);make.height.mas_equalTo(1000);}];[contentView mas_makeConstraints:^(MASConstraintMaker*make){make.bottom.equalTo(label2.mas_bottom).offset(20);}];}@end总结
Masonry 用链式语法让 Auto Layout 告别繁琐，核心就是mas_makeConstraints添加约束，mas_updateConstraints更新，mas_remakeConstraints重建
