iOS开发之Masonry

简介

Masonry 就是第三方为我们封装好的一个 AutoLayout 框架。其使用点语法，可以非常便利的添加 AutoLayout约束，且通俗的语法让人非常容易理解。

集成方式

Masonry 支持 CocoaPods，可以直接通过 podfile 文件进行集成，需要在 CocoaPods 中添加下面代码：

pod 'Masonry'

Masonry使用前注意：

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

基础语法

Masonry的基础API如下所示:

mas_makeConstraints()    //添加约束
mas_remakeConstraints()  //移除之前的约束，重新添加新的约束
mas_updateConstraints()  //更新约束
equalTo()       //参数是对象类型，一般是视图对象或者 mas_width 这样的坐标系对象
mas_equalTo()   //和上面功能相同，参数可以传递基础数据类型对象，可以理解为比上面的API更强大
width()         //用来表示宽度，例如代表view的宽度
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

上面例如equalTo或者width这样的，有时候需要涉及到使用mas_前缀，这在开发中需要注意作区分。
如果在当前类引入#import "Masonry.h"之前，用下面两种宏定义声明一下，就不需要区分mas_前缀。

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

修饰语

Masonry为了让代码使用和阅读更容易理解，所以直接通过点语法就可以调用，还添加了and和with两个方法。这两个方法内部实际上什么都没干，只是在内部将self直接返回，功能就是为了更加方便阅读，对代码执行没有实际作用。
例如下面的例子：

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

其内部代码实现，实际上就是直接将self返回。

- (MASConstraint *)with {
    return self;
}

添加约束

设置Size

// 我们先简单创建一个UIView视图。
UIView *view = [[UIView alloc] init];
view.backgroundColor =  [UIColor redColor];
    
// 要在加入视图之后再设置它的约束。
[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 中我们使用 multipliedBy就可以做到:

[view makeConstraints:^(MASConstraintMaker *make) {
    // multipliedBy设置系数。为父视图的一半。
    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不用区分正负，可以四个边距一起设置，但是缺点是写的稍微有点长
    // offset区分正负，如果4个边距用offset(10)的话，右下两个边距就会出问题
    make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
    // 如果边距分开设置的话，就需要区分正负了。但是可以直接写数值。
    make.left.and.top.equalTo(self.view).offset(50);
    make.right.and.bottom.equalTo(self.view).offset(-50);
    }];

优先级

/** 
 Masonry为我们提供了三个默认的方法，priorityLow()、priorityMedium()、priorityHigh()，这三个方法内部对应着不同的默认优先级。
 除了这三个方法，我们也可以自己设置优先级的值，可以通过priority()方法来设置。
 */
[self.redView 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);
}];

更新约束

关于更新约束，Masonry提供给我们如下两个方法:

[控件 mas_remakeConstraints:^(MASConstraintMaker *make) {
//这个方法会将以前的约束全部删除，添加新的约束
}];
[控件 mas_updateConstraints:^(MASConstraintMaker *make) {
//这个方法将会覆盖以前的某些特定的约束
}];

我们这里用第二个方法举个例子:

// GCD方法，在显示出来两秒之后执行block代码
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    
    // updateConstraints更新约束。这个方法将会覆盖以前的某些特定的约束
    [view updateConstraints:^(MASConstraintMaker *make) {
        
        // 在updateConstraints里，如果原先的size是有multipliedBy的，那么重新添加的size约束会有问题。
        // 如果原先的size约束没有multipliedBy，那么给size再添加multipliedBy不会出问题。
       
        // 这里如果给比0.5小的值，它就会消失。
        // 如果给0.5大的值，就没有任何效果。
        make.size.equalTo(self.view).multipliedBy(0.3);
        
        // 如果原先是直接写值的话，这里就没问题，可以变大也可以变小。
        // 结论，并不是只能往小里面改变。应该是multipliedBy的问题。
        make.size.equalTo(50);
        
        // 不会覆盖四个边距。只会覆盖原先的center约束。
        make.center.equalTo(self.view);
    }];
});

从上面我们可以发现，mas_updateConstraints()只会更新与其对应的约束，而center可不算边界约束哦，它应该只会覆盖对应的center约束，而不会覆盖left之类的边界约束。

使用示例

UILabel *testLabel = [[UILabel alloc] init];
[self.view addSubview:testLabel];
/*
* 为Label设置约束。
* 现在Label可以在约束范围内自适应它内容的高度和宽度
*/
[testLabel makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(self.view);
    // 宽度小于等于200。
    make.width.lessThanOrEqualTo(200);
    // 高度大于等于100。
    make.height.greaterThanOrEqualTo(100);
}];
testLabel.text = @"这是测试的字符串。能看到1、2、3个步骤，第一步当然是上传照片了，要上传正面近照哦。上传后，网站会自动识别你的面部，如果觉得识别的不准，你还可以手动修改一下。左边可以看到16项修改参数，最上面是整体修改，你也可以根据自己的意愿单独修改某项，将鼠标放到选项上面，右边的预览图会显示相应的位置。";
// 想要自适应Lable的Size的话一定要加这一行。否则没有效果。
testLabel.numberOfLines = 0;

三个等高视图

下面的例子是通过给equalTo()方法传入一个数组，设置数组中子视图及当前make对应的视图之间等高。

UIView *redView = [[UIView alloc] init];
redView.backgroundColor =  [UIColor redColor];
UIView *greenView = [[UIView alloc] init];
greenView.backgroundColor =  [UIColor greenColor];
UIView *yellowView = [[UIView alloc] init];
yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:redView];
[self.view addSubview:greenView];
[self.view addSubview:yellowView];
CGFloat padding = 10.0f;
[redView makeConstraints:^(MASConstraintMaker *make) {
    // 这种样子的写法也可以。
    make.top.and.left.and.right.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, 0, padding));
    
    // 这个地方要给greenView的top值。不给不行。
    make.bottom.equalTo(greenView.top).offset(-padding);
}];
[greenView makeConstraints:^(MASConstraintMaker *make) {
    
    // 设置左右间距
    make.left.and.right.equalTo(self.view).offset(padding);
    
    // 设置下间距
    make.bottom.equalTo(yellowView.top).offset(-padding);
}];
[yellowView makeConstraints:^(MASConstraintMaker *make) {
    
    // 设置左右以及下边距。
    make.bottom.and.left.and.right.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, padding, padding));
    
    // 三个视图高度相等。
    make.height.equalTo(@[redView, greenView]);
}];

相对父视图垂直居中

效果:

两个子视图宽度相等，相对水平居中。
两个子视图左右间距各为10，中间间距为10.
两个子视图高度固定为150.
两个子视图整体相对于父视图垂直居中。
代码如下:

 UIView *redView = [[UIView alloc] init];
    redView.backgroundColor =  [UIColor redColor];
    
    UIView *greenView = [[UIView alloc] init];
    greenView.backgroundColor =  [UIColor greenColor];
    
    [self.view addSubview:redView];
    [self.view addSubview:greenView];
    
    CGFloat padding = 10.0f;
    
    [redView makeConstraints:^(MASConstraintMaker *make) {
        // 设置高度为固定150.
        make.height.equalTo(150);
        // 设置宽度
        make.width.equalTo(greenView);
        // 设置垂直居中对齐。
        make.centerY.equalTo(self.view);
        // 设置左间距
        make.left.equalTo(self.view).offset(padding);
        // 设置右间距
        make.right.equalTo(greenView.left).offset(-padding);
    }];
    
    [greenView makeConstraints:^(MASConstraintMaker *make) {
        // 设置高度为固定150.
        make.height.equalTo(150);
        // 设置宽度
        make.width.equalTo(redView);
        // 设置垂直居中对齐。
        // 下面这两句代码都可以。一个是设置水center的Y值和self.view相等，一个是和redView相等。
        make.centerY.equalTo(self.view);
//        make.centerY.equalTo(redView);
        // 设置右间距
        make.right.equalTo(self.view).offset(-padding);
    }];

如上可以想到，如果需要设置两个子视图垂直居中，且相对父视图整体水平居中的话。我们可以改为设置两个子视图的centerX值和父视图相等，然后设置其上下间距。

参考:iOS开发之Masonry的基础用法

`