浅谈Masonry的使用技巧

前言

讲真的，搞事搞了四五年的时间了，一直觉得AutoLayout布局方式比较影响性能，所以一直使用着最原始的Frame布局方式，但是随着机器性能的不断提高，我觉得AutoLayout这种布局方式已经可以基本忽略对性能方面的影响，而且在复杂布局方面AutoLayout有着Frame布局没有的优势，简单粗暴。这两天，我也是刚刚开始使用 Masonry ，说真的，真香。

这里需要简述一下Frame布局方式和Masonry布局方式各有什么优缺点。我觉得这种谁强谁弱的问题要去辩证的看待，Frame布局方式在简单UI排版情况下，较为简单，而且性能极高，但是不利于扩展，例如如果是横竖屏情况就基本上需要使用两套布局方案，非常的麻烦和繁琐。反观Masonry布局，使用起来较为方便，可以轻松应对各种布局方式，但是在性能上存在问题，使用不当容易造成性能问题，性能方便要比Frame布局方式差很多。整体来说，简单布局使用Frame布局，复杂布局使用Masonry布局，至于界限需要自己把握（这就跟解耦和耦合的问题一样，界限完全是自己来掌控的，自己把握好度即可）。

约束的常识

在写Masonry之前，我想先来聊聊约束的基础知识，我们首先要了解一个View的约束需要确定的是两个因素，一个是宽高信息，另外一个是位置信息。 只有确定这两个因素才能真正的确定一个View的约束，否则约束会爆警告。不管你怎么加约束，其实最后归根到底都是确实的这两个信息，那么我们了解这个有什么好处呢？我们可以通过约束转化来了解我们多添加了约束，是否缺失了某个约束，这种思想可以帮助我们快速查询问题所在。

但是有很多童鞋会发现在使用 Masonry 的时候，如果控件是UILabel，UIImageView，UIButton等这些组件及某些包含它们的系统组件只需要指定控件的位置约束，根本不需要指定宽高约束即可完成布局任务，这是为什么呢？这是因为这些控件中有 intrinsicContentSize 这个属性，intrinsicContentSize的作用其实很简单，它会自己根据内容计算出控件的固有宽高，在布局过程当你不指定宽高约束的时候，它就会生效。具体的内容我会在下面说到。这里就不过多叙述了。

Masonry的使用

Masonry的使用百度上随意一搜索就是一大堆，这里也简单的介绍一下吧。

首先，Masonry的添加布局主要有三个，三个方法的作用分别是创建约束；更新某个约束，其他约束不变；移除先前所有约束，添加新到的约束。这三个方法根据场景需要合理使用，否则可能造成内存问题，优化方式下面我们会来聊一下，这里就不过多叙述了。

- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

假设我们有一个subView视图(添加约束之前要先添加到父视图上，这里就不多比比了)，我们该怎么给这个subView视图添加约束呢？

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

上面的写法我们可以把 self.view → self ，Masonry内部会自动处理的，形式如下所示。

[subView mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(self).offset(10);make.top.equalTo(self).offset(10);make.right.equalTo(self).offset(-10);make.bottom.equalTo(self).offset(-10);
}];

当然了，每一个控件都写这么四个约束(上，下，左，右)，肯定是能把人累的半死，我们可以设置 edges 来简化我们的代码，上面的代码就转化成如下代码形式。而且我们发现下面的代码，-10已经变成了10，这是因为 insets 已经帮我们自动处理过了，这点我们需要注意了。

[subView mas_makeConstraints:^(MASConstraintMaker *make) {make.edges.equalTo(self).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

如果我们想设置一个具体的数值该怎么办呢？例如宽度我们想设置成10个单位，我们就可以如下设置。

[subView mas_makeConstraints:^(MASConstraintMaker *make) {make.width.equalTo(@10);
}];

我们发现上面代码还有个问题，那就是 equalTo 这个函数的参数必须是一个对象类型，这就很尴尬了，为啥，书写太麻烦，这时候我们可以使用 mas_equalTo 这个函数，示例如下所示。

[subView mas_makeConstraints:^(MASConstraintMaker *make) {make.width.mas_equalTo(10);
}];

上面书写的好像也不是一个最优的方案，虽然我们解决了后面的问题，但是前面的代码字母数又多了(懒癌发作