[iOS]iOS AutoLayout框架Masonry介绍及其基本使用

前言：什么是AutoLayout？

个人对iOS AutoLayout的理解，觉得它就是相对布局，就像Android中的RelativeLayout，每一个View的摆放位置是由其他View所确定的，比如是它的父类View，或者是位于它旁边的View。在之前，iOS是利用Frame进行布局，就像是Android中的绝对布局一样，布局一个View需要确定其坐标以及其大小，很多时候会觉得其很不简便，计算量也比较大，而使用autoLayout，你不必去考虑很多的大小位置计算，只需安排多个View的相对位置或其大小即可，比如说View1在View2的右方，且高度宽度相同，间距XX，顶部对齐等等。有了autoLayout，View布局起来就方便多了。

对比：Android RelativeLayout 与 iOS AutoLayout

在Storyboard中对View进行autoLayout也算是比较简单快捷，但是用纯代码构建AutoLayout真的是恶心到我了，因为之前我有接触过Android开发，所以也知道Android中用代码布局RelativeLayout起来是多么的简便，下面我就贴两张布局相同的Android RelativeLayout与iOS AutoLayout代码对比图：

Android：



iOS：



写完上面那段iOS代码此刻我的表情：






苹果公司可能考虑到用上面那种方式布局的蛋疼之处，所以又推出了一款布局语言:VFL，下面是用VFL实现以上的相同布局：



其中的字符串"V:|-20-[redView(100)]-20-[blueView(==redView)]"和"H:|-20-[redView]-20-|"就是VFL

虽然用VFL比起之前的布局方法确实代码少了很多，但是写起来还是略为蛋疼，有没有更加简便的布局方法呢？这时候就要进入主题了——iOS AutoLayout快速布局框架：Masonry。

初识Masonry:

Masonry的代码地址在这里：https://github.com/SnapKit/Masonry

Masonry利用链式语法来进行视图布局，可观性非常之高。

下面就用Masonry来进行之前的布局：



看啊，代码明显的少了，而且可观性也提高了，可看到，其中的"make.top.left.right.equalTo(weakSelf.view).with.insets(XXX)"就像一条链子一样，每个节点之间由"."连在一起，形成链式语法，布局方式一目了然。

Masonry的一些属性：

Masonry布局的方式：

1.mas_makeConstraints:创建约束。

2.mas_updataConstraints:更新约束，如果你在之前已经为此View创建过约束，在这里你可以只写上需要更新的约束即可，Msonry会自动帮你卸载掉与你新添加的约束所冲突的旧约束。

3.mas_remakeConstraints:卸载之前添加的全部约束，重新在里面添加所有约束。

三种方式，针对不同情况，不同用法

看看Masonry中的view属性：

mas_left:左侧

mas_right:右侧

mas_top:顶部

mas_bottom:低侧

mas_leading:首

mas_trailing:尾

mas_width:宽度

mas_height:高度

mas_centerX:水平方向中点

mas_centerY:垂直方向中点

mas_baseline:文本基线

其中mas_left、mas_right与mas_leading、mas_trailing基本相同，可能在一些国家里布局习惯从右向左而导致它们有所区别。

再看看View间的关系：

equalTo:与XX相同

greaterThanOrEqualTo:比XX大或相同

lessThanOrEqualTo:比XX小或相同

mas_equalTo:与XX相同

其中，equalTo与mas_equaTo的区别在于参数为基本数据类型、结构体还是实例变量，equalTo接收的参数为实例变量，mas_equalTo接收的参数可为基本数据类型或结构体。

值得注意的是，Masonry跟传统的AutoLayout一样，在为View添加约束之前要将View添加到父视图上，另外，传统AutoLayout中在添加约束之前一定要加上:view.translatesAutoresizingMaskIntoConstraints = NO;来取消AutoresizingMask才能进行AutoLayout约束，但在Msonry中不需要这一句，因为它已经帮我们自动添加了。

用Masonry进行布局：

布局一：



这个就是在之前所提及的布局，布局要求是红色view与蓝色view高度都为100，它们距离屏幕的间距为20，两者在垂直方向上下间距20，以下是代码以及注释：

[redView mas_makeConstraints:^(MASConstraintMaker *make) {
//让其上，左，右都与控制器view对齐，且间距为20
//UIEdgeInsetsMake中bottom设什么数值都没关系，因为没有在前面设置bottom，所以其bottom值会被忽略
make.top.left.right.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(20, 20, 0, 20));
//设置高度为100
make.height.mas_equalTo(100);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
//让其顶部与红色view底部对其，间距20
make.top.equalTo(redView.mas_bottom).offset(20);
//让其左，右，高度都跟红色view的一样
make.left.right.height.equalTo(redView);
}];

值得注意的是：其实代码"make.top.equalTo(viewOne.mas_top)"跟"make.top.equalTo(viewOne)"一样，因为如果equalTo中的参数直接为View的话，Masonry会自动根据之前设定的值来进行匹配，在之前我设定的值为top，那么它就会自动匹配上mas_top，而"make.left.right.equalTo(viewOne)"也会匹配，跟"make.left.equalTo(viewOne.mas_left);
make.right.equalTo(viewOne.mas_right);"的效果一样。

布局二：



布局要求：两个view都相对于控制器view垂直居中，它们中间的间距为20，跟屏幕边缘间距为20

代码实现：

[redView mas_makeConstraints:^(MASConstraintMaker *make) {
//让其相对于控制器View垂直居中
make.centerY.equalTo(weakSelf.view);
//高度为100
make.height.mas_equalTo(100);
//与控制器view左对齐且间距为20
make.left.equalTo(weakSelf.view).offset(20);
}];

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
//高度与红色view一样，且顶部对齐
make.height.and.top.equalTo(redView);
//左侧与红色view的右侧对齐且间距为20
make.left.equalTo(redView.mas_right).offset(20);
//与控制器view右对齐且间距为20
//注意，这里的－20针对的是坐标，X轴坐标右侧为正方向，左侧为负方向
make.right.equalTo(weakSelf.view).offset(-20);
//宽度与红色view的相等
make.width.equalTo(redView);
}];