Masonry - 技术栈

Masonry实现自动布局

文章目录

Masonry实现自动布局
- [一、Masonry 是什么](#一、Masonry 是什么)
- [二、集成 Masonry](#二、集成 Masonry)
- [1. CocoaPods 导入](#1. CocoaPods 导入)
- [2. 导入头文件](#2. 导入头文件)
- 三、基本使用规则
- 四、最常用约束语法
- [1. 尺寸约束（宽高）](#1. 尺寸约束（宽高）)
- [2. 居中](#2. 居中)
- [3. 距离父视图边距](#3. 距离父视图边距)
- [4. 相对另一个控件布局](#4. 相对另一个控件布局)
- [5. 宽高比例](#5. 宽高比例)
- [6. 优先级](#6. 优先级)
- [五、完整示例：一个 View 居中 + 固定大小](#五、完整示例：一个 View 居中 + 固定大小)
- 六、多控件嵌套示例（常用）
- [七、更新约束 / 重置约束](#七、更新约束 / 重置约束)
- [1. 更新已有约束](#1. 更新已有约束)
- [2. 重新设置约束（清除旧约束）](#2. 重新设置约束（清除旧约束）)
- 八、动画（改变约束后刷新）
- [九、UILabel / UIButton 自适应内容](#九、UILabel / UIButton 自适应内容)
- 十、常见错误与坑
- 十一、常用简写总结

一、Masonry 是什么

Masonry 是 iOS 开发中最常用的自动布局第三方库 ，比原生 NSLayoutConstraint 简洁太多。

作用：

不用算 frame
适配不同屏幕
代码可读性强

二、集成 Masonry

1. CocoaPods 导入

在 Podfile 里添加：

复制代码

pod 'Masonry'

然后执行：

复制代码

pod install

2. 导入头文件

objc 复制代码

#import <Masonry/Masonry.h>

三、基本使用规则

必须先 addSubview，再设置约束
关闭 translatesAutoresizingMaskIntoConstraints即：关闭 "自动把 frame 转换成自动布局约束" 的功能
objc 复制代码
```
view.translatesAutoresizingMaskIntoConstraints = NO;
```
约束用 mas_makeConstraints: 方法
链式语法：make.属性.关系(值)

四、最常用约束语法

1. 尺寸约束（宽高）

objc 复制代码

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(@100);    // 宽 100
    make.height.mas_equalTo(50); // 高 50（简写，不用@）
}];

2. 居中

objc 复制代码

make.centerX.equalTo(self.view);
make.centerY.equalTo(self.view);

3. 距离父视图边距

objc 复制代码

// 上下左右各 20
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));

// 分别设置
make.top.equalTo(self.view.mas_top).offset(20);
make.left.equalTo(self.view.mas_left).offset(20);
make.right.equalTo(self.view.mas_right).offset(-20);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);

4. 相对另一个控件布局

objc 复制代码

// view2 在 view1 下方 20
make.top.equalTo(view1.mas_bottom).offset(20);

// 宽度等于 view1
make.width.equalTo(view1);

5. 宽高比例

objc 复制代码

// 宽 : 高 = 2 : 1
make.width.equalTo(make.height).multipliedBy(2);

6. 优先级

objc 复制代码

[self.fatherView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.width.mas_equalTo(200).priorityHigh();//高优先级
  make.height.mas_equalTo(100).priorityLow();//低优先级
  make.width.mas_equalTo(200).priorityMedium();//中等优先级
}];

五、完整示例：一个 View 居中 + 固定大小

objc 复制代码

UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];

[redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.centerY.equalTo(self.view);
    make.width.height.equalTo(@200);
}];

六、多控件嵌套示例（常用）

objc 复制代码

// 灰色容器
UIView *container = [[UIView alloc] init];
container.backgroundColor = [UIColor lightGrayColor];
container.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:container];

[container mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.insets(UIEdgeInsetsMake(100, 30, 100, 30));
}];

// 蓝色子 view
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[container addSubview:blueView];

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(container);
    make.top.equalTo(container).offset(30);
    make.width.equalTo(@150);
    make.height.equalTo(@80);
}];

七、更新约束 / 重置约束

1. 更新已有约束

objc 复制代码

[redView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(@300);
}];

只会更新对应约束，不会删除其他约束。

2. 重新设置约束（清除旧约束）

objc 复制代码

[redView mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.top.left.offset(20);
    make.size.mas_equalTo(CGSizeMake(100, 100));
}];

八、动画（改变约束后刷新）

objc 复制代码

[redView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(@300);
}];

[UIView animateWithDuration:0.3 animations:^{
    [self.view layoutIfNeeded];
}];

九、UILabel / UIButton 自适应内容

objc 复制代码

[label mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.centerY.equalTo(self.view);
    make.width.lessThanOrEqualTo(@250); // 最大宽
}];

Label 会根据文字自动高度。

十、常见错误与坑

约束冲突

控制台报 Unable to simultaneously satisfy constraints

→ 约束重复 / 矛盾，检查是否同时设了 left + width + right。
没 addSubview 就写约束

→ 直接崩溃。
没关闭 translatesAutoresizingMaskIntoConstraints

→ 布局错乱。
offset 符号
- 向右 / 向下：正数
- 向左 / 向上：负数

十一、常用简写总结

objc 复制代码

make.size.equalTo(CGSizeMake(w, h));
make.center.equalTo(self.view);
make.edges.insets(UIEdgeInsetsMake(t,l,b,r));
make.top.bottom.left.right.equalTo(view);
make.width.equalTo(view.mas_height);
make.width.equalTo(view).multipliedBy(0.5);