Masonry的用法

Posted 2022-12-05 ThomasYB

Masonry是一个轻量级的界面布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性，而且同时支持 ios 和 Max OS X。Masonry是一个用代码写iOS或OS界面的库，用官方的说明就是Masonry完成可以代替Auto layout。Masonry的github地址：https://github.com/SnapKit/Masonry

Masonry使用起来很方便和流畅，本人最近开始在新项目中使用框架进行界面布局。亲身的实践感觉Masonry确实比APPLE的官方的API（NSLayoutConstraint）好用很多。先来看一下Masonry官方的提供的sample

code：

1 2 3 4

[objc] view plaincopy [view1 mas_makeConstraints:^(MASConstraintMaker *make)  make.edges.equalTo(superview). with .insets(padding); ];

这也是最常用的用法，为view设置约束。 看到上面的代码风格，典型的链式语法，流畅易懂。

我们先来看一下Masonry支持的约束属性：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

[objc] view plaincopy // 左侧 @property (nonatomic, strong, readonly) MASConstraint *left; // 顶部 @property (nonatomic, strong, readonly) MASConstraint *top; // 右侧 @property (nonatomic, strong, readonly) MASConstraint *right; // 底部 @property (nonatomic, strong, readonly) MASConstraint *bottom; // 首部 @property (nonatomic, strong, readonly) MASConstraint *leading; // 尾部 @property (nonatomic, strong, readonly) MASConstraint *trailing; // 宽 @property (nonatomic, strong, readonly) MASConstraint *width; // 高 @property (nonatomic, strong, readonly) MASConstraint *height; // 中心点x @property (nonatomic, strong, readonly) MASConstraint *centerX; // 中心点y @property (nonatomic, strong, readonly) MASConstraint *centerY; // 文本基线 @property (nonatomic, strong, readonly) MASConstraint *baseline;

这里需要注意的是：NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右，而leading/trailing在某些从右至左习惯的地区会变成，leading是右边，trailing是左边。所以如果涉及到国际化方面，建议还是使用 NSLayoutAttributeLeading/NSLayoutAttributeTrailing。

在Masonry中能够添加、修改 Auto layout 约束有三个函数：

[objc] view plaincopy

1 2 3

(NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;   (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;   (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

其中：

mas_makeConstraints 只负责新增约束，Autolayout不能同时存在两条针对于同一对象的约束，否则会报错。（这个方法最常用）

mas_updateConstraints 针对上面的情况会更新在block中出现的约束，不会导致出现两个相同约束的情况。

mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束。

如果我们灵活的运用这三个方法，基本就可以应付各种各样的约束布局情况了。

一、添加约束（mas_makeConstraints）

先来看一下Masonry如何实现一个view的简单布局。

场景一：

还是和上面的例子一样：一个子view在父view中，其中子view的上下左右边缘都离父view的边缘40个像素。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

[objc] view plaincopy [self.view setBackgroundColor:[UIColor redColor]]; //创建子view UIView *subView = [[UIView alloc] init]; [subView setBackgroundColor:[UIColor blackColor]]; [self.view addSubview:subView]; //layout 子view __weak __typeof(self)weakSelf  = self; [subView mas_makeConstraints:^(MASConstraintMaker *make)  make.top.equalTo(weakSelf.view). with .offset(40); //子view的上边缘离父view的上边缘40个像素 make.left.equalTo(weakSelf.view). with .offset(40); //子view的左边缘离父view的左边缘40个像素 make.bottom.equalTo(weakSelf.view). with .offset(-40); //子view的下边缘离父view的下边缘40个像素 make.right.equalTo(weakSelf.view). with .offset(-40); //子view的右边缘离父view的右边缘40个像素 ];

针对上面的布局约束写法，还有更为简洁的写法：

1 2 3 4 5

[objc] view plaincopy //layout 子view [subView mas_makeConstraints:^(MASConstraintMaker *make)  make.edges.equalTo(weakSelf.view).insets(UIEdgeInsetsMake(40, 40, 40, 40)); masonry 基本用法 Masonry部分用法（控件数组等间隔排序） paint的用法 paint的用法 使用masonry的一个坑 思源黑体怎么刷了几次刷不上