Masonry进阶

1. 九宫格

类似九宫格效果：
意思就是一排3个一共三排 宽度自适应
本文Demo
以及@刘栋 栋神的Demo Demo
效果如下：

竖屏

横屏

代码实现：

// 创建一个空view 代表上一个view
   __block UIView *lastView = nil;
   // 间距为10
   int intes = 10;
   // 每行3个
   int num = 3;
   // 循环创建view
   for (int i = 0; i < 12; i++) {

      UIView *view = [UIView new];
       [self.view addSubview:view];
       view.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0 ) saturation:( arc4random() % 128 / 256.0 ) + 0.5
                                         brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:0.2];

       // 添加约束
       [view mas_makeConstraints:^(MASConstraintMaker *make) {
           // 给个高度约束
           make.height.mas_equalTo(80);

           // 1. 判断是否存在上一个view
           if (lastView) {
               // 存在的话宽度与上一个宽度相同
               make.width.equalTo(lastView);
           } else {
               // 否则计算宽度  ！！！此处的判断条件是为了避免 最后一列约束冲突
               /**
                *  这里可能大家会问 为什么上面我说最后一列会有冲突？
                *  如果不添加判断的话会造成：
                *  1添加了宽度约束 2所有列加了左侧约束 第3步给 最后一列添加了右侧约束
                *  这里最后一列既有左侧约束又有右侧约束还有宽度约束 会造成约束冲突
                *  所以这里添加宽度时将最后一列剔除
                */
               if (i % num != 0) {
               make.width.mas_equalTo((view.superview.frame.size.width - (num + 1)* intes)/4);
               }
           }
           // 2. 判断是否是第一列
           if (i % num == 0) {
               // 一：是第一列时 添加左侧与父视图左侧约束
               make.left.mas_equalTo(view.superview).offset(intes);
           } else {
               // 二： 不是第一列时 添加左侧与上个view左侧约束
               make.left.mas_equalTo(lastView.mas_right).offset(intes);
           }
           // 3. 判断是否是最后一列 给最后一列添加与父视图右边约束
           if (i % num == (num - 1)) {
               make.right.mas_equalTo(view.superview).offset(-intes);
           }
           // 4. 判断是否为第一列
           if (i / num == 0) {
               // 第一列添加顶部约束
               make.top.mas_equalTo(view.superview).offset(intes*10);
           } else {
               // 其余添加顶部约束 intes*10 是我留出的距顶部高度
               make.top.mas_equalTo(intes * 10 + ( i / num )* (80 + intes));
           }
           
       }];
       // 每次循环结束 此次的View为下次约束的基准
       lastView = view;

   }

下面文章的参考来自 iOS122 非常感谢 地址

上面说明了Masonry不仅仅可以表达相等关系
看图：

Masonry部分代码

由上图可以看出一些等价关系
equalTo == NSLayoutRelationEqual
mas_equalTo == NSLayoutRelationEqual

• 并且Masonry不止可以表达相等关系
  greaterThanOrEqualTo == NSLayoutRelationGreaterThanOrEqual
  mas_greaterThanOrEqualTo == NSLayoutRelationGreaterThanOrEqual
  lessThanOrEqualTo == NSLayoutRelationLessThanOrEqual
  mas_lessThanOrEqualTo == NSLayoutRelationLessThanOrEqual

所以如果你需要view的宽度在一定范围内：

        make.width.greaterThanOrEqualTo(@100);
        make.width.lessThanOrEqualTo(@150); 
        或者：
        make.width.mas_greaterThanOrEqualTo(100);
        make.width.mas_lessThanOrEqualTo(150);

如果你希望view.left大于或等于button.left

        make.left.greaterThanOrEqualTo(button);
        make.left.greaterThanOrEqualTo(button.mas_left);

        make.left.mas_greaterThanOrEqualTo(button);
        make.left.mas_greaterThanOrEqualTo(button.mas_left);

• 此外上面的文章还提到了利用数组表达三个view等高的情况

      // 表达三个视图等高的约束.
     make.height.equalTo(@[view1.mas_height, view2.mas_height]);
     make.height.equalTo(@[view1, view2]);
  

• 以及定义约束的优先级

.priority 允许你指定一个精确的优先级,数值越大优先级越高.最高1000.

.priorityHigh 等价于 UILayoutPriorityDefaultHigh.优先级值为 750.

.priorityMedium 介于高优先级和低优先级之间,优先级值在 250~750之间.

.priorityLow 等价于 UILayoutPriorityDefaultLow, 优先级值为 250.
优先级可以在约束尾部添加：

    make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();

    make.top.equalTo(label.mas_top).with.priority(600);

• Masonry还可以支持两个View等比例变化
  multipliedBy允许你指定一个两个视图的某个属性等比例变化item1.attribute1 = multiplier × item2.attribute2 + constant,此为约束的计算公式,.multipliedBy本质上是用来限定 multiplier的.

但是因为坐标系的原点是左上角开始的，所以指定基于父视图的left或者top的multiplier是没有意义的,因为父视图的left和top总为0.
如果你需要一个视图随着父视图的宽度和高度,位置自动变化,你应该同时指定 right,bottom,width,height与父视图对应属性的比例(基于某个尺寸下的相对位置计算出的比例),并且constant必须为0.

     // 宽度为父视图的一半
     make.width.equalTo(superview).multipliedBy(0.5);

• 此外除了上一篇Masonry初探提到的edges
  还有其他比较方便的写法：

  // width = superview.width + 100, height = superview.height - 50
   make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))
  

比如之前对于center的偏移量一般会写：
make.centerX.equalTo(self.view.mas_centerX).offset(-10);
make.centerY.equalTo(self.view.mas_centerY).offset(50);
其实可以这么写：
make.center.equalTo(self.view).centerOffset(CGPointMake(-10, 50));

• 并且返回的约束和约束数组我们可以用属性接收 方便操作

      self.widthConstraint = make.width.equalTo(lastV.mas_width);
      [self.widthConstraint uninstall];
  

感谢@刘栋 同学以及@暮落晨曦 小僵尸同学的帮助

未完待续......