Autolayout第三方库Masonry的入门与实践

Posted 2020-07-07 乞力马扎罗的雪CYF

       在如今的ios开发中，Autolayout已经是不得不使用了，而且是我们主动的去拥抱Autolayout。使用Autolayout最普遍的方式就是在xib或者storyboard中可视化的添加各种约束，这也是Autolayout入门需要掌握的，关于这部分内容，可以参考《iOS开发——Autolayout的实践与技巧》这篇博客。对于比较简单的App开发，可能使用可视化Autolayout也就足够了。但是如果UI布局稍微复杂多变一点，那么就不得不使用代码了。对于iOS原生的代码自动布局，真的是过于繁琐。所以这里就要来介绍目前广泛使用的第三方库Masonry的使用，入门非常的方便简单。也是一位合格的iOS开发者需要掌握的。博客案例代码上传至 https://github.com/chenyufeng1991/MasonryLearnDemo 。

（1）使用Cocoapods导入Masonry，对于如何使用Cocoapods，请参考《iOS包管理工具Cocoapods的安装与使用》这篇博客。Podfile文件如下：

platform:ios,'8.0'
pod 'Masonry'

（2）先对Masonry中的内容做一个简单的介绍：

Masonry中有三种添加约束的方法：

- (NSArray *)mas_makeConstraint:(void(^)(MASConstraintMaker *))block;

- (NSArray *)mas_updateConstraint:(void(^)(MASConstraintMaker *))block;

- (NSArray *)mas_remakeConstraint:(void(^)(MASConstraintMaker *))block;

mas_makeConstraint:只负责新增约束，初次设置约束使用；

mas_updateConstraint:更新block中出现的约束，如果找不到该约束，会新增约束。

mas_remakeConstraint:清除之前的所有约束，仅保留最新的约束。

（3）equalTo和mas_equalTo的区别

其实mas_equalTo是一个宏，源码中是这样定义的：

 #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
 #define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
 #define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

 #define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))

同时，这里涉及到两个简便写法，Masonry提供了不加mas_前缀的方法，只需要定义两个宏：

MAS_SHORTHAND宏：定义了MAS_SHORTHAND宏之后，就可以使用UIView,NSArray中不带mas_前缀的makeConstraint,updateConstraint,remakeConstraint方法，以及UIView中不带mas_前缀的Attribute。

MAS_SHORTHAND_GLOBALS:直接对equalTo传入基础类型，Masonry自动转化为NSValue对象。

（4）比例系数与常数系数

multipliedBy(0.5)可以用来设置比例系数。

Masonry有四种设置Constant的方法：

- (MASConstraint * (^)(MASEdgeInsets insets))insets;
- (MASConstraint * (^)(CGSize offset))sizeOffset;
- (MASConstraint * (^)(CGPoint offset))centerOffset;
- (MASConstraint * (^)(CGFloat offset))offset;

insets方法可以同时设置top,left,bottom,right，接收MASEdgeInsets类型，也就是UiEdgeInsets类型，使用UIEdgeInetMake方法设置。

sizeOffset方法设置width,height，接收CGSize类型，使用CGSizeMake方法设置。

centerOffset方法设置centerX(X轴中心),centerY（Y轴中心）。

offset方法可以设置所有的偏移常量。

（5）对于一个约束，实际表示的是不等或者相等关系：

aView.Leading = 1.0 * bView.Trailing + 10;

其中：

aView :Item1;

Leading:Attribute1;

= : Relationship;

1.0  :Multiplier

bView：Item2；

Trailing ：Attribute2;

10 :Constant;

（6）MASConstraintMaker提供了22种Attribute类型：

 //第一类
 @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;
 @property (nonatomic, strong, readonly) MASConstraint *centerX;
 @property (nonatomic, strong, readonly) MASConstraint *centerY;
 @property (nonatomic, strong, readonly) MASConstraint *baseline;

 //第二类
 @property (nonatomic, strong, readonly) MASConstraint *leftMargin;
 @property (nonatomic, strong, readonly) MASConstraint *rightMargin;
 @property (nonatomic, strong, readonly) MASConstraint *topMargin;
 @property (nonatomic, strong, readonly) MASConstraint *bottomMargin;
 @property (nonatomic, strong, readonly) MASConstraint *leadingMargin;
 @property (nonatomic, strong, readonly) MASConstraint *trailingMargin;
 @property (nonatomic, strong, readonly) MASConstraint *centerXWithinMargins;
 @property (nonatomic, strong, readonly) MASConstraint *centerYWithinMargins;
 
 //第三类
 @property (nonatomic, strong, readonly) MASConstraint *edges;
 @property (nonatomic, strong, readonly) MASConstraint *size;
 @property (nonatomic, strong, readonly) MASConstraint *center;

第一类是基本属性，向下支持到iOS6，用的比较多。

第二类是边缘相关属性，向下支持到iOS8，由于版本要求比较高，所以用的比较少。

第三类是复合属性，edges(top,left,right,bottom),size(width,height),center(centerX,centerY).

（7）扩展UIView中的Attribute:

 @property (nonatomic, strong, readonly) MASViewAttribute *mas_left;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_top;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_right;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_width;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_height;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;
 @property (nonatomic, strong, readonly) MASViewAttribute *(^mas_attribute)(NSLayoutAttribute attr);

 @property (nonatomic, strong, readonly) MASViewAttribute *mas_leftMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_rightMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_topMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_bottomMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_leadingMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_trailingMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_centerXWithinMargins;
 @property (nonatomic, strong, readonly) MASViewAttribute *mas_centerYWithinMargins;

  基本和MASConstraintMaker中的属性一样，只是每个属性前面都有mas_前缀，因为这个类是扩展UIView的，为了和系统类中的Attribute区别，所以加了前缀。

（8）SHORTHAND简便写法：Masonry提供了不加mas_前缀的方法，只需要定义几个宏：

---  MAS_SHORTHAND :定义了MAS_SHORTHAND宏之后，就可以使用UIView,NSArray中不带mas_前缀的makeConstraint,updateConstraint,remakeConstraint，以及UiView中不带mas_前缀的Attribute。

---  MAS_SHORTHAND_GLOBALS ：直接对equalTo传入基础类型，Masonry自动转化为NSValue对象。

（9）with的使用

在Masonry的链式语法中，with可以对一个对象的多个属性进行连接，但也可以不用with.源码中的解释是：with是一个可选的语法属性，没有任何影响，但是能提高约束的可读性。

（10）小技巧

---  如果等式两边的Attribute是一样的，可以省略等式右边的Attribute；

---  如果是等于关系，并且右边的view是父view，equalTo也可以省略；

---  multipier默认为1时，可以不写；

---  offset默认为0时，可以不写；

---  所以，如果不嫌麻烦的话，可以对所有的约束添加multipliedBy()和offset()，看起来也会清楚直观。

（11）mas_key属性的使用：

mas_key相当于View原生的tag属性一样，是为了区分不同的View的，mas_key标志的是字符串，更加方便直观。如果在遇到约束冲突打印Log时，使用Key标识后，会很容易找到冲突位置。我下面会通过一个例子来讲解。

（12）weakSelf的使用

对于block中self的循环引用问题，可以参考《iOS开发——Block引起循环引用的解决方案》这篇博客。Masonry的约束也是写在block中，所以我通过一个宏定义：

//定义宏，用于block
#define WeakSelf(weakSelf) __weak __typeof(&*self)weakSelf = self;

在block之前定义：

WeakSelf(weakSelf);

所以在block中就不使用self,而改用weakSelf即可。

（13）关于（8）中提到的两个宏定义，定义时的位置一定要在#import头文件之前，如下所示：

#define MAS_SHORTHAND
#define MAS_SHORTHAND_GLOBALS
#import "FirstViewController.h"
#import "Masonry.h"

我下面通过几个小例子来作为Masonry的入门：

【1】绘制一个红色的View，在屏幕中上下左右居中，宽高为200：

//绘制一个红色的View
- (void)setRedView
{
    WeakSelf(weakSelf);

    self.redView = [[UIView alloc] init];
    self.redView.backgroundColor = [UIColor redColor];
    //在设置Autolayout之前，要将view添加到self.view上面
    [self.view addSubview:self.redView];

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

注意：在对redView设置约束之前，一定要把它添加到self.view中！

【2】在红色的View中绘制一个灰色的View，主要学习如何使用复合属性和单一属性设置四周边距：

//在红色的View中绘制一个灰色的View
- (void)setGrayViewEdgeInsetToRedView
{
    WeakSelf(weakSelf);

    self.grayView = [[UIView alloc] init];
    self.grayView.backgroundColor = [UIColor grayColor];
    [self.redView addSubview:self.grayView];

    [self.grayView mas_makeConstraints:^(MASConstraintMaker *make) {
        //可以使用符合属性设置
        // make.edges.equalTo(weakSelf.redView).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));

        //上述代码也可以拆分为：
        //可以使用with对同一条约束设置参数
        //        make.top.equalTo(weakSelf.redView).with.offset(20);
        //        make.left.equalTo(weakSelf.redView).with.offset(20);
        //        make.bottom.equalTo(weakSelf.redView).with.offset(-20);
        //        make.right.equalTo(weakSelf.redView).with.offset(-20);

        // 也可以去掉with
        make.top.equalTo(weakSelf.redView).offset(20);
        make.left.equalTo(weakSelf.redView).offset(20);
        make.bottom.equalTo(weakSelf.redView).offset(-20);
        make.right.equalTo(weakSelf.redView).offset(-20);
    }];
}

【3】在灰色View里面绘制两个等宽等间距的View，设置左右边距，相互之间的边距为15,同时自动计算他们的宽度：

//在灰色View里面绘制两个等宽等间距的View,设置左右边距、相互之间边距为15
- (void)setTwoViewInGrayView
{
    WeakSelf(weakSelf);
    UIView *subView1 = [[UIView alloc] init];
    UIView *subView2 = [[UIView alloc] init];

    subView1.backgroundColor = [UIColor orangeColor];
    subView2.backgroundColor = [UIColor blueColor];

    [self.grayView addSubview:subView1];
    [self.grayView addSubview:subView2];

    [subView1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(weakSelf.grayView.mas_centerY);
        make.left.equalTo(weakSelf.grayView.mas_left).with.offset(15);
        make.right.equalTo(subView2.mas_left).with.offset(-15);
        //设置subView1的高度为grayView高度的0.5.
        make.height.equalTo(weakSelf.grayView).multipliedBy(0.5);
        make.width.equalTo(subView2.mas_width);
    }];

    [subView2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(weakSelf.grayView.mas_centerY);
        make.left.equalTo(subView1.mas_right).with.offset(15);
        make.right.equalTo(weakSelf.grayView.mas_right).offset(-15);
        make.height.equalTo(weakSelf.grayView).multipliedBy(0.5);
        make.width.equalTo(subView1.mas_width);
    }];

    //以上的两个约束还有如下简化的写法
    [subView1 mas_remakeConstraints:^(MASConstraintMaker *make) {
        //设置subView1的centerY属性，如果后面的grayView的参数也是centerY的话，就可以省略
        make.centerY.equalTo(weakSelf.grayView);
        //因为默认也是想要和grayView的左边距对齐，所以可以省略mas_left;
        make.left.equalTo(weakSelf.grayView).with.offset(15);
        //下面的mas_left不能省略，因为前面的参数是right,当前后参数不一致时，不能省略后面的参数
        make.right.equalTo(subView2.mas_left).with.offset(-15);
        make.height.equalTo(weakSelf.grayView).multipliedBy(0.5);
        //可以省略下面subView2的width参数
        make.width.equalTo(subView2);
    }];

    [subView2 mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(weakSelf.grayView);
        make.left.equalTo(subView1.mas_right).with.offset(15);
        make.right.equalTo(weakSelf.grayView).offset(-15);
        make.height.equalTo(weakSelf.grayView).multipliedBy(0.5);
        make.width.equalTo(subView1);
    }];
}

【4】学习设置比例系数：我要绘制一个View，宽度是self.view的0.5倍再减少10，高度是self.view的0.2倍，距离self.view左边距10,上部紧贴红色View：

- (void)setMutiplierAndConstant
{
    WeakSelf(weakSelf);
    UIView *yellowView = [[UIView alloc] init];
    yellowView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellowView];

    [yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(weakSelf.view.mas_width).offset(-10).multipliedBy(0.5);//根据公式，这里的-10就是constant.
        make.height.equalTo(weakSelf.view.mas_height).multipliedBy(0.2).offset(0);
        make.top.equalTo(weakSelf.redView.mas_bottom).multipliedBy(1).offset(0);
        make.left.equalTo(weakSelf.view.mas_left).multipliedBy(1).offset(10);
    }];
}

【5】使用mas_key属性，使冲突发生时Log日志变得清晰，如下代码是带有冲突的代码：

- (void)setViewWithKey
{
    UIView *firstView = [[UIView alloc] init];
    firstView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:firstView];

    //这里使用mas_key参数
    self.view.mas_key = @"self.view";
    firstView.mas_key = @"firstView";

    //写一个冲突的约束
    [firstView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.left.offset(10);
        make.right.offset(-10);
    }];
}

如果不使用mas_key来标识两个View，那么Log打印如下：

 Probably at least one of the constraints in the following list is one you don't want.
	Try this:
 (1) look at each constraint and try to figure out which you don't expect;
 (2) find the code that added the unwanted constraint or constraints and fix it.
 (
 "<MASLayoutConstraint:0x7fef6a6a5d80 UIView:0x7fef6a4289d0.width == 100>",
 "<MASLayoutConstraint:0x7fef6a7161a0 UIView:0x7fef6a4289d0.left == UIView:0x7fef6a40b970.left + 10>",
 "<MASLayoutConstraint:0x7fef6a7145e0 UIView:0x7fef6a4289d0.right == UIView:0x7fef6a40b970.right - 10>",
 "<NSLayoutConstraint:0x7fef6a7ade60 UIView:0x7fef6a40b970.width == 320>"
 )

 Will attempt to recover by breaking constraint
 <MASLayoutConstraint:0x7fef6a6a5d80 UIView:0x7fef6a4289d0.width == 100>

其中打印出的是View的地址，对于有多个View的时候，Log就很难读了。

当设置mas_key后，输入如下：

 Probably at least one of the constraints in the following list is one you don't want.
	Try this:
 (1) look at each constraint and try to figure out which you don't expect;
 (2) find the code that added the unwanted constraint or constraints and fix it.
 (
 "<MASLayoutConstraint:0x7fbf23e3b0b0 UIView:firstView.width == 100>",
 "<MASLayoutConstraint:0x7fbf23e58410 UIView:firstView.left == UIView:self.view.left + 10>",
 "<MASLayoutConstraint:0x7fbf23e588d0 UIView:firstView.right == UIView:self.view.right - 10>",
 "<NSLayoutConstraint:0x7fbf23e5a610 UIView:self.view.width == 320>"
 )

 Will attempt to recover by breaking constraint
 <MASLayoutConstraint:0x7fbf23e3b0b0 UIView:firstView.width == 100>

对于有可能哪一个View出现的冲突，Log日志就很容易区别。

【6】使用上述（8）谈到的两个宏，使用Masonry时可以省略mas_前缀，下面的代码是去掉了mas_前缀的，也可以成功编译运行：

- (void)useShorthand
{
    UIView *firstView = [[UIView alloc] init];
    firstView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:firstView];

    self.view.mas_key = @"self.view";
    firstView.mas_key = @"firstView";

    //写一个冲突的约束
    [firstView makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(CGSizeMake(100, 100));
        make.left.offset(10);
        make.right.offset(-10);
    }];

}

      我这里介绍的Masonry使用还只是一个入门使用，想要更熟练的使用，那么必须在实际项目中去运用它。当然最好的学习方式就是去阅读Masonry的源代码啦。