Masonry的故事

Masonry是什么

在前端工作中，UI布局是不可或缺的一环。一种好的布局方式可以让UI布局变得轻松自如，减少BUG的产生。与绝对布局不同是，Masonry不单纯的采用坐标和大小来确定某一部件的位置，因为这样往往很难去做适配的工作。所以相对布局的优势就可以体现出来，我们可以不定义某个部件的大小和位置，而是通过一些约束来达到同样的效果。

Masonry的故事

班上新来了一位老师找一位同学回答问题， 让第三排第四列的那个同学起来回答问题，然后小明起来回答了问题，然后老师又找同学回答第二个问题，这次让小明前面那个同学回答，因为老师知道小明的位置。

第一个同学可以简单理解为绝对布局（3，4）。第二个同学可以理解为相对布局（小明前面的那个同学）。为什么说容易适配呢？试想一下如果班级换到一个不规则教室，通过绝对布局的方式确定某个人就很难了，但是相对布局的方法仍然可用。（直接叫名字的方法当然更快，但是我们这里只是讲解一下相对布局和绝对布局的区别。）

提前准备工作：

首先将背景设置为黑色，其次创建一个UIView，背景颜色设置成黄色，并且添加到self.view中

    self.view.backgroundColor = [UIColor blackColor];
    UIView* bgView = [[UIView alloc]init];
    bgView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:bgView];

约束类型：

• 尺寸
  width、height、size

 [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        //1、
            make.width.mas_equalTo(100);        //宽度约束,设置宽度为100
            make.height.mas_equalTo(100);        //高度约束，设置高度为100
        //2、
            make.size.mas_equalTo(CGSizeMake(100,100)); //大小约束，大小 = 宽度 + 高度
        //3、
            make.width.height.mas_equalTo(100);  //宽度高度约束合并
        }];
    //以上三种方法实现效果相同，只是设置尺寸大小，出现的位置默认为左上。

实现效果图：

• 边界
  left、right、top、bottom

  [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.left.mas_equalTo(self.view).offset(50);
           make.right.mas_equalTo(self.view).offset(-50); //注意负数
           make.top.mas_equalTo(self.view).offset(50);
           make.bottom.mas_equalTo(self.view).offset(-50);  //注意负数
       }];

   //当参照物是self.view的时候，可以省略部分代码，如下，
   //实现的效果相同。但要参照物的父类是self.view才可以。
   //推荐上面那种写法，代码的可阅读性能比较高。

   [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.left.mas_equalTo(50);
           make.right.mas_equalTo(-50); //注意负号,但距离右侧是20
           make.top.mas_equalTo(50);
           make.bottom.mas_equalTo(-50); //注意负数
       }]

实现效果图：

• 中心点
  center、centerX、centerY

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.size.equalTo(self.view).multipliedBy(0.5);//大小是父视图的0.5倍
       //1、
           make.center.mas_equalTo(self.view);//中心点和父视图相同
       //2、
           make.centerX.mas_equalTo(self.view); //中心点横坐标对齐父视图中心点
           make.centerY.mas_equalTo(self.view); //中心点纵坐标对齐父视图中心点
      //3、
           make.center.mas_equalTo(0); //屏幕中间的点为（0，0）
       }];
   //以上三种方法实现效果相同，可以自行尝试只对齐centerX或者centerY的实现效果

实现效果图：

• 内边距
  edges

 [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(100, 100, 100, 100));
 }];

//感觉可以用边界的实现效果代替

实现效果图：

• 相对偏移量
  offset 边看边解释，来不及了快上车吧。

    UIView* fgView = [[UIView alloc]init];
   fgView.backgroundColor = [UIColor redColor];
   [self.view addSubview: fgView];   //额外增加一个红色背景的视图

 [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.mas_equalTo(50);
     make.top.mas_equalTo(50);
     make.height.mas_equalTo(100);
     make.width.mas_equalTo(100);
 }];                              //设置bgView的大小和边距

 [fgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.mas_equalTo(bgView.mas_right).offset(50);  //这句是重点：fgView左侧距离bgView的右侧有100的边距
     make.top.mas_equalTo(50);
     make.height.mas_equalTo(100);
     make.width.mas_equalTo(100);
 }];                               //设置fgView的大小和边距

实现效果图：

• mas_前缀修饰符
  • mas_equalTo 和 equalTo
    mas_equalTo有自动包装功能，比如自动将100包装成为@100.
    因为OC中只能接受对象类型的参数，所以这样使用更方便。
    equalTo没有自动包装功能
    mas_equalTo（100） 等同于 equalTo（@100）
    mas_equalTo的功能强于equalTo，所以可以一直使用mas_equalTo
  • mas_width 和 width
    width是make对象的一直属性，用来添加宽度约束的。
    mas_width是一个属性值，可以用来当做mas_equalTo的参数

make.width.mas_equalTo(100); //给属性用常量赋值

make.width.mas_equalTo(self.view.mas_width);  //用属性值给我属性赋值
make.height.mas_equalTo(self.view.mas_height);//用属性值给我属性赋值

Masonry的学习至此先告一段落，这些目前应该足够用了，老铁你会了吗。