Masonry 基本用法及规范总结

一、常见约束的各种类型

1.尺寸：width、height、size
2.边界：left、leading、right、trailing、top、bottom
3.中心点：center、centerX、centerY
4.边界：edges
5.偏移量：offset、insets、sizeOffset、centerOffset

二、Masonry约束易忽略的技术点

防止block中的循环引用，使用弱引用（这是错误观点），在这里block是局部的引用，block内部引用self不会造成循环引用的
__weak typeof (self) weakSelf = self;（没必要的写法

三、基本方法

* mas_makeConstraints:          /*添加约束*/
* mas_updateConstraints:        /*更新约束*/
* mas_remakeConstraints:        /*删除约束*/``

注：使用上面方法的元素必须添加到父视图中

四、用法&规范

• mas_equalTo && equalTo 前者是对后者进行了一次封装，对基本数据类型进行了兼容，用起来会更加的方便。

 /*make.top.equalTo(@64);        这里边必须得是对象，否则会引起Crash*/
  make.top.mas_equalTo(64);     可以直接使用基本数据类型，更加便捷

• 我一般都是喜欢在控制器里导入 #import "Masonry.h"之前再添加两个宏，来提高App的开发效率。

//1. 对于约束参数可以省去"mas_"
#define MAS_SHORTHAND
//2. 对于默认的约束参数自动装箱(去掉mas前缀)
#define MAS_SHORTHAND_GLOBALS

• equalTo() -默认的是参照是父视图，如果是相对于父视图的约束，可以进行如下简写

[iconView makeConstraints:^(MASConstraintMaker *make) {
        /*make.right.equalTo(self.view).offset(-30); 这里可以简写成下面的样子*/
        make.right.equalTo(30);  //特殊情况
        make.right.equalTo(self.leftView).offset(-30);  
 }];

• 正常参照父视图的约数

[iconView makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(-30);  
        make.left.equalTo(30);  
        make.top.equalTo(30); 
        make.bottom.equalTo(-30); 
     // 由于坐标系的原因，所以右，下的坐标相对位置 是负值
 }];

• 如果相对于父视图一致的情况

   [iconView makeConstraints:^(MASConstraintMaker *make) {
          make.edges.equalTo(0);    // 完全一致
          make.left.equalTo(0);     // 起点一致
          make.right.equalTo(0);    // 终点一致
          make.center.equalTo(0);   // 中心一致
          make.top.equalTo(0);      // 顶部一致
          make.bottom.equalTo(0);   // 底部一致
    }];

• 相对于其他视图约数

   [iconView makeConstraints:^(MASConstraintMaker *make) {
          make.left.equalTo(self.customView).offset(30);
        // 如果self.customView 没有指定left或是right等具体位置默认是make.所指定的位置
          make.left.equalTo(self.customView.right).offset(30);
        // 从custom右侧30的距离开始
          make.right.equalTo(self.customView.left).offset(-20);
        // 距离custom.left 20 的距离
          make.center.equalTo(self.customView);  
        // 中心一致
          make.top.equalTo(self.customView.bottom).offset(20);      
        // 顶部距离customView底部20
          make.bottom.equalTo(self.customView.top);   
       // 底部与customView.top 一致
    }];

• 动画和普通的方法实现差不多，重点只是修改约束后调用

[iconView.superview layoutIfNeeded];
[iconView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(400);

make.left.equalTo(100);

make.size.equalTo(CGSizeMake(100, 100));

}];

[iconView.superview layoutIfNeeded];
//如果其约束还没有生成的时候需要动画的话，就请先强制刷新后才写动画，否则所有没生成的约束会直接跑动画

[UIView animateWithDuration:3 animations:^{

[iconView mas_updateConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(200);

}];

[iconView.superview layoutIfNeeded];//强制绘制

}];

• 更新约束的问题

  //1.告知需要更新约束，但不会立刻开始，系统然后调用updateConstraints
  [self setNeedsUpdateConstraints];

  //2.告知立刻更新约束，系统立即调用updateConstraints
  [self updateConstraintsIfNeeded];
  [UIView animateWithDuration:0.4 animations:^{
      [self layoutIfNeeded]; //告知页面立刻刷新，系统立即调用updateConstraints
  }];
}
//苹果官方建议：添加/更新约束在这个方法（updateConstraints）内
- (void)updateConstraints {
   //更新约束
    [iconView updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(0);
        make.width.equalTo(200);
        make.height.equalTo(300);
    }];
    //最后必须调用父类的更新约束
    [super updateConstraints];
}

*Scrollview适配

//scrollView添加一个主要子视图，大小贴合
UIView *bgView = [[UIView alloc] init];
bgView.backgroundColor = [UIColor blueColor];
[_scrollview addSubview:bgView];
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.top.left.bottom.and.right.equalTo(0);
     make.width.equalTo(_scrollview);
}];

//此后所有子视图都需添加在此bgView上

UIView *childV = [[UIView alloc] init];
childV.backgroundColor = [UIColor cyanColor];
[bgView addSubview:childV];
[childV mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.right.equalTo(0);
     make.top.equalTo(250);
     make.height.equalTo(1000);
}];

//以最后所加子视图为准，再对bgView进行重新约束
[bgView mas_updateConstraints:^(MASConstraintMaker *make) {
      make.bottom.equalTo(childV.bottom);
}];