Masonry 框架的使用

Masonry 框架

目标

• 理解 Masonry 框架的基本使用
• 差不多是使用最为广泛的自动布局框架
• 下载地址：https://github.com/SnapKit/Masonry
• 掌握 Masonry 的三个核心函数
• 知道 Masonry 的两个宏

/// 构建约束mas_makeConstraints/// 更新约束 - 修改已经建立的约束，如果约束不存在，会在控制台输出错误mas_updateConstraints/// 会删除已经建立的所有约束，然后重新生成约束mas_remakeConstraints 

• 等于函数

equalTo(参照对象)                   // 参照属性相同可以省略equalTo(参照对象.mas_参照属性)       // 参照属性

• 偏移函数

offset(CGFloat)                   // 偏移量mas_offset(结构体)                 // 偏移结构题

添加框架

• 将 Masonry-master 下的 Masonry 拖拽到项目中
• 引入头文件

#import "Masonry.h"

案例

案例1 —— 居中视图

要求

• 定义一个视图 200 * 50
• 在任何设备上都摆放在屏幕的中心点

代码演练

• 准备工作

- (void)viewDidLoad {    [super viewDidLoad];    [self layoutDemo1];}/** * 定义一个视图 200 * 50 * 在任何设备上都摆放在屏幕的中心点 */- (void)layoutDemo1 {    UIView *v = [[UIView alloc] init];    v.backgroundColor = [UIColor redColor];    [self.view addSubview:v];}

• 设置布局

[v mas_makeConstraints:^(MASConstraintMaker *make) {    make.size.mas_equalTo(CGSizeMake(200, 50));    make.center.equalTo(self.view);}];

一定要先将视图添加到 view 中，然后再添加约束

案例2 —— 居中视图

要求

• 创建一个全屏的视图
• 四周的边距都为 20

代码实现

• 代码准备

- (void)layoutDemo2 {    UIView *v = [[UIView alloc] init];    v.backgroundColor = [UIColor redColor];    [self.view addSubview:v];}

• 第一种方法

// 第一种方法[v mas_makeConstraints:^(MASConstraintMaker *make) {    make.top.equalTo(self.view).offset(20);    make.left.equalTo(self.view).offset(20);    make.bottom.equalTo(self.view).offset(-20);    make.right.equalTo(self.view).offset(-20);}];

• 第二种方法 —— 函数式编程，链式编程

// 第二种方法 —— 函数式编程，链式编程[v mas_makeConstraints:^(MASConstraintMaker *make) {    make.top.left.equalTo(self.view).offset(20);    make.right.bottom.equalTo(self.view).offset(-20);}];

• 第三种方法

// 第三种方法[v mas_makeConstraints:^(MASConstraintMaker *make) {    make.edges.equalTo(self.view).mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));}];

案例3 —— 登录界面

要求

1. 定义两个 UITextField 水平距离左右两边 20 点
2. 第一个 UITextField 垂直距离顶边 20 点
3. 第二个 UITextField 垂直距离第一个 20 点

代码实现

• 代码准备

- (void)layoutDemo3 {    UITextField *tf1 = [[UITextField alloc] init];    tf1.borderStyle = UITextBorderStyleRoundedRect;    [self.view addSubview:tf1];    UITextField *tf2 = [[UITextField alloc] init];    tf2.borderStyle = UITextBorderStyleRoundedRect;    [self.view addSubview:tf2];}

• 文本框1的自动布局

[tf1 mas_makeConstraints:^(MASConstraintMaker *make) {    make.left.top.equalTo(self.view).offset(20);    make.right.equalTo(self.view).offset(-20);}];

• 文本框2的自动布局

[tf2 mas_makeConstraints:^(MASConstraintMaker *make) {    make.left.right.equalTo(tf1);    make.top.equalTo(tf1.mas_bottom).offset(20);}];

案例4 —— 布局动画

要求

• 实现布局动画

代码实现

• 代码准备

/** 布局动画 */- (void)layoutDemo4 {    UIView *v = [[UIView alloc] init];    v.backgroundColor = [UIColor redColor];    [self.view addSubview:v];}

• 添加按钮和监听方法

/** 布局动画 */- (void)layoutDemo4 {    UIView *v = [[UIView alloc] init];    v.backgroundColor = [UIColor redColor];    [self.view addSubview:v];    // 添加按钮    UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd];    btn.center = self.view.center;    [btn addTarget:self action:@selector(startAnimation) forControlEvents:UIControlEventTouchUpInside];    [self.view addSubview:btn];}- (void)startAnimation {}

• 添加布局

// 添加视图布局[v mas_makeConstraints:^(MASConstraintMaker *make) {    make.left.top.equalTo(self.view).offset(20);    make.size.mas_equalTo(CGSizeMake(100, 100));}];

• 定义属性

@property (nonatomic, weak) UIView *demoView;

• 使用属性记录局部变量

// 使用属性记录局部变量self.demoView = v;

• 实现按钮监听方法

- (void)startAnimation {    // 更改约束    [self.demoView mas_updateConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(CGSizeMake(200, 200));    }];    [UIView animateWithDuration:2.0 animations:^{        [self.view layoutIfNeeded];    }];}

注意：mas_updateConstraints 只能修改已经建立的约束

以下代码虽然能够执行，但是在控制台会输出错误

// 更改约束[self.demoView mas_updateConstraints:^(MASConstraintMaker *make) {    make.size.mas_equalTo(CGSizeMake(200, 200));    // mas_updateConstraints 只能更新已经建立的约束，如果约束不存在，会在控制台输出错误    make.right.mas_equalTo(self.view).offset(-20);}];

• 重建约束

// 重建约束[self.demoView mas_remakeConstraints:^(MASConstraintMaker *make) {    make.right.bottom.equalTo(self.view).offset(-20);    make.size.mas_equalTo(CGSizeMake(200, 200));}];

提示：mas_remakeConstraints 会删除已经建立的所有约束，然后重新生成约束

两个宏

//define this constant if you want to use Masonry without the 'mas_' prefix// 如果不希望使用 mas_ 前缀，可以定义此常量#define MAS_SHORTHAND//define this constant if you want to enable auto-boxing for default syntax// 如果希望启动`自动装箱`，可以定义此常量// 所谓`自动装箱`，就是能够自动将结构体包装成 `NSValue`，而无需再使用 `mas_equalTo`#define MAS_SHORTHAND_GLOBALS

关于这两个宏知道即可，避免工作中遇到不知道如何处理

为什么不建议使用

• iOS 的框架越来越多，框架是否带前缀已经成为识别框架专业度的标记
• 没有方法前缀，一旦发生冲突是非常糟糕的事情
• Masonry 团队还使用 Swift 开发了另外一套自动布局框架 SnapKit，习惯了简写会不习惯SnapKit