Masonry 入门到精通一

iOS布局有很多种方法，有原始的Frame布局，通过计算每一个控件的高度/宽度，来定义每一个控件的位置，简单的只有一两个控件的页面，用frame布局还行，一旦页面有很多控件，UI 比较复杂，使用 Frame布局，就变得复杂，还有就是 Autolayout布局，在xib/storyboard 上进行拖线布局，这种的缺点是不太直观，修改起来比较麻烦，Masonry兼顾了，布局代码的直观和autolayout的灵活性，且不同控件相同的约束，可以通过代码进行复用，相当地节省时间，好了，下面跟着这篇blog，学习下,一个小时从入门到精通

一、配置篇

Git 地址 https://github.com/SnapKit/Masonry

可以直接下载代码，把官方demo里面的Masonry文件夹拖到工程里，也可以通过Cocoapods pod 'Masonry' 导入

将 Masonry 文件夹拖入到工程以后，打开 Build Phases 的Compile 讲 Masonry的.m文件添加到工程，在需要使用的类或者全局Pch文件中引入

 #import "Masonry.h"

就可以愉快的使用Masonry了

Snip20171007_20.png

Snip20171007_21.png

二、使用篇

先看两张效果图

Simulator Screen Shot - iPhone 6s - 2017-10-07 at 17.35.56.png

Simulator Screen Shot - iPhone 6s - 2017-10-07 at 17.35.56_spec.png

定义了6个label

label0的约束为

[self.label0 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(20);
    make.top.mas_equalTo(100);
    make.width.mas_equalTo(60);
    make.height.mas_equalTo(80);
 }];

label1 的约束为

      [self.label1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.mas_equalTo(self.view.mas_centerX);
    make.top.mas_equalTo(100);
    make.width.mas_equalTo(60);
    make.height.mas_equalTo(80);
}];

详细的见 Demo https://github.com/wubianxiaoxian/StudyMasonry

三、讲解篇

添加约束的方法是：mas_makeConstraints，可以看到，约束使用的链式方式，看起来很像一句话

看这句话：make.top.height.bottom.mas_equalTo(greenView)，意思是：使我的顶部、高度和底部都与greenView的顶部、高度和底部相等。因此，只要greenView的约束添加好了，那么redView的顶部、高度和底部也就自动计算出来了。

大多时候，并不会将一句话完整地写出来，而是使用简写的方式。如：

   make.left.mas_equalTo(20);

其完整写法为：

    make.left.mas_equalTo(self.view.mas_left).offset(20);

当我们要添加与父视图控件相对约束时，可以省略掉父视图。注意，并不是什么时候都可以省略，只有约束是同样的才可以省略。比如，约束都是right才可以。如果是一个left一个是right，那么就不能省略了。

好了，第一篇基础的就到这里了，进阶的第二篇稍后就来