【iOS】Masonry库的基本使用

前言

在安装Masonry之前，需要配置好CocoaPods，详细步骤见： CocoaPods的安装及其使用方法
如果安装过程中遇到卡壳部分实在解决不了，就完全删除之前下载好的东西，重新下载，并且网络也要时刻保持通畅。

简介

Masonry是一款CocoaPods的AutoLayout库，此库在iOS和macOS开发中经常用于自动布局，它使用了一种简洁而流畅的方式来定义试图之间的约束关系，使得界面布局更加快捷和灵活。

Masonry由一个名为"SnapKit"的团队开发和维护。SnapKit 是 Masonry 的 Swift 版本，在使用上基本上与 Masonry 一致，但针对 Swift 语言进行了优化。

---

Masonry使用前注意：

1.在使用Masonry添加约束之前，需要在addSubview方法之后才能使用，否则会导致崩溃。
2.在添加约束时初学者经常会出现一些错误，约束出现问题的原因一般就是两种：约束冲突和缺少约束。对于这两种问题，可以通过调试和log排查。
3.之前使用Interface Builder添加约束，如果约束有错误直接就可以看出来，并且会以红色或者黄色警告体现出来。而 Masonry 则不会直观的体现出来，而是以运行过程中崩溃或者打印异常log体现，所以这也是手写代码进行 AutoLayout 的一个缺点。这个问题只能通过多敲代码，积攒纯代码进行 AutoLayout 的经验，慢慢就用起来越来越得心应手了。

Masonry的配置

使用CocoaPods配置Masonry

1. 打开终端，cd到指定的工程
2. 创建一个podFile文件

touch podFile

项目文件夹就会多出这样一个文件

3. 打开此podFile文件，输入以下内容

platform:ios, '11.0'
target 'MasonryTest' do 
  pod 'Masonry'
end

target后面的MasonryTest指当前项目工程名
关闭并保存此文件
4. 最后在终端输入

pod install

等待终端运行完成后，出现如下的文件说明配置成功

Masonry的基本使用

Masonry的基础API如下

//添加约束
mas_makeConstraints()
//移除之前的约束，重新添加新的约束
mas_remakeConstraints()
//更新新的约束
mas_updateConstraints()

equalTo()
mas_equalTo()
width()
mas_width()

其基础的设置属性如下：

1. 尺寸：width、height、size
2. 边界：left、leading、right、trailing、top、bottom、edges
3. 中心点：center、centerX、centerY
4. 偏移量：offset、insets、sizeOffset、centerOffset
5. priority()约束优先级（0~1000），multipler乘因数,dividedBy除因数

大小关系

1. equalTo 相等
2. lessThanOrEqualTo 小于等于
3. greaterThanOrEqualTo 大于等于

Auto Boxing

某些属性有使用时需要涉及到使用mas_前缀，这咋起开发中需要注意作区分
如果在当前类引入#import "Masonry.h"之前，用下面两种宏定义声明一下，就不需要区分mas_前缀

// 定义这个常量，就可以不用在开发过程中使用mas_前缀。
#define MAS_SHORTHAND
// 定义这个常量，就可以让Masonry帮我们自动把基础数据类型的数据，自动装箱为对象类型。
#define MAS_SHORTHAND_GLOBALS

修饰语

Masonry为了让代码使用和阅读更容易理解，Masonry还添加了and和with两个方法，这两个方法内部只是将self返回，没有任何实际作用，就是为了方便阅读
以下为示例：

make.top.and.bottom.equalTo(self.containerView).with.offset(padding);

内部实现

- (MASConstraint *)with {
    return self;
}

添加约束

//简单创建一个视图
UIView* view = [UIView alloc] init];
view.backgroundColor = [UIColor systemMintColor];

//约束要在添加addSubView方法之后才能使用
[self.view addSubView: view];

// 使用Masonry添加约束
[view makeConstraints:^(MASConstraintMaker *make) {
    //设置宽度和高度为100
    //euqalTo(@100),这里不用mas前缀的话，参数要加@.
    //如果我们想要直接使用数字的话，Masonry提供了mas_前缀。
    //这个前缀会自动将基础数据类型转换为NSNumber类型。
    //这个过程叫做封箱(Auto Boxing)。
    //"mas_xx"开头的宏定义，内部都是通过MASBoxValue()函数实现的。
    //这样的宏定义主要有四个，分别是mas_equalTo()、mas_offset()和大于等于、小于等于四个
    //不过因为引用了开头两个宏定义。所以这里也可以不加
    make.width.and.height.equalTo(100);
}];

mas_makeConstraints() 是添加约束的方法，其参数是一个block代码块，在代码块中添加约束

倍数

在Masonry中可以使用multipledBy来设置一个视图某个参数是另一个视图某个参数的多少倍

[view makeConstraints:^(MASConstraintMaker *make) {
    //设置view的size为父视图的一半
    make.size.equalTo(self.view).multipliedBy(0.5);
}];

中心点

通过center属性来设置视图的中心点

[view makeConstraints:^(MASConstraintMaker *make) {
    //中心点和视图的中心对齐
    make.center.equalTo(self.view);
    //相当于下面这两句
    //self.view.mas_centerX这句话可以直接写self.view
    make.centerX.equalTo(self.view.centerX);
    make.centerY.equalTo(self.view.centerY);
    }];

边距

设置四周的边距，如果还设置了宽度和高度，则边距只有左和上生效

[view makeConstraints:^(MASConstraintMaker *make) {
    //这里参数不能直接写数值了。不过这里不用区分正负
    //insets不用区分正负，可以四个边距一起设置
    make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
    //如果边距分开设置的话，就需要区分正负了，但是可以直接写数值
    //offset区分正负，如果4个边距用offset(10)的话，右下两个边距就会出问题
    make.left.and.top.equalTo(self.view).offset(50);
    make.right.and.bottom.equalTo(self.view).offset(-50);
    }];

优先级

Masonry为我们提供了三个默认的方法，priorityLow()、priorityMedium()、priorityHigh()，这三个方法内部对应着不同的默认优先级
除了这三个方法，我们也可以通过priority()方法来自己设置优先级的值
示例如下：

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(self.view);
    make.width.equalTo(self.view).priorityLow();
    make.width.mas_equalTo(20).priorityHigh();
    make.height.equalTo(self.view).priority(200);
    make.height.mas_equalTo(100).priority(1000);
}];

示例demo

本人用Masonry库写了一个照片墙点击图片居中demo

照片墙图片居中demo

源码：…