自动布局Masonry

1、为什么用Masonry

布局有一般三中方法：

1. xib/storyboard 自动布局，
2. frame 适配，
3. Masonry 第三方布局

对于第一个，并不喜欢，每次到storyboard界面都很卡，动不动就会弄乱；
对于第二个，这个并不能自动适配，每次控件变化都要重新；
对于第三个，个人认为好用些，也是时下最流行的AutoLayout框架，无论其他控件怎么变，该控件相对其他控件的约束都不会变。

2、Masonry提供了哪些功能

1. 基本的功能：给控件确定位置、大小。
2. 动画更新约束（优先级）
3. remake约束
4. 整体动画更新约束
5. 比例 （multipliedBy）

6. tableviewCell布局
7. ScrollView循环布局 
8. 复杂ScrollView布局
9. scrollview实战场景

2.1基本功能

// 使这三个控件等高
  CGFloat padding = 10;
  [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(padding);
    make.left.mas_equalTo(padding);
    make.right.mas_equalTo(redView.mas_left).offset(-padding);
    make.bottom.mas_equalTo(blueView.mas_top).offset(-padding);
    // 三个控件等高
    make.height.mas_equalTo(@[redView, blueView]);
    // 红、绿这两个控件等高
    make.width.mas_equalTo(redView);
  }];

2.2动画更新约束

在系统方法中更新约束，该控件的所有约束都要重新写一遍
优先级priorityLow、lessThanOrEqualTo两个属性配合的用法，用于限制

#pragma mark - updateViewConstraints系统方法
- (void)updateViewConstraints {
 [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {

   make.center.mas_equalTo(self.view);
   // 初始宽、高为100，优先级最低
   make.width.height.mas_equalTo(100 * self.scacle).priorityLow();
   // 最大放大到整个view
   make.width.height.lessThanOrEqualTo(self.view);
 }];

  [super updateViewConstraints];
}

动画更新约束

#pragma mark - 按钮点击事件，如何触发更新约束
- (void)onGrowButtonTaped:(UIButton *)sender {
  self.scacle += 0.5;

  //1、告诉self.view约束需要更新
  [self.view setNeedsUpdateConstraints];
  //2、调用此方法告诉self.view检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
  [self.view updateConstraintsIfNeeded];
  //3、动画
  [UIView animateWithDuration:0.3 animations:^{
    [self.view layoutIfNeeded];
  }];
}

2.3 remark约束

其实这里updateViewConstraints方法中的
mas_remakeConstraints和上面的
mas_updateConstraints作用有相似之处，但也有区别，mas_remakeConstraints会移除之前的全部约束。

- (void)updateViewConstraints {
  // 这里使用update也是一样的。
  // remake会将之前的全部移除，然后重新添加
  [self.growingButton mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(0);
    make.left.right.mas_equalTo(0);
    if (self.isExpanded) {
      make.bottom.mas_equalTo(0);
    } else {
      make.bottom.mas_equalTo(-350);
    }
  }];

  [super updateViewConstraints];
}

2.4 整体动画更新约束（有两个以上控件）

苹果推荐我们在updateViewConstraints方法中更新约束，但也可以在自定义方法中更新。

1、添加一个手势，定义手势事件。
2、在手势事件中更新约束

- (void)updateWithExpand:(BOOL)isExpanded animated:(BOOL)animated {
  //控件1约束
  //控件2约束

if (animated) {
    [self.view setNeedsUpdateConstraints];
    [self.view updateConstraintsIfNeeded];
    [UIView animateWithDuration:0.5 animations:^{
      [self.view layoutIfNeeded];
    }];
}

2.5 比例（multipliedBy）

[topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.right.mas_equalTo(topView);
    make.width.mas_equalTo(topInnerView.mas_height).multipliedBy(3);
    make.center.mas_equalTo(topView);

    // 设置优先级
    make.width.height.mas_equalTo(topView).priorityLow();
    make.width.height.lessThanOrEqualTo(topView);
  }];

提示：使用multipliedBy必须是对同一个控件本身，比如，上面的代码中，我们都是对bottomInnerView.mas_width本身的，如果修改成相对于其它控件，会出问题。

3、Masonry使用技巧及注意

删掉自带的info.plist文件，头文件写在.pch中
使用Masonry不需要设置
控件的translatesAutoresizingMaskIntoConstraints属性为NO;
定义以下两个宏,在使用Masonry框架时就不需要加mas_前缀了
(定义宏一定要在引入Masonry.h文件之前).

//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS

最后编辑于：2017.12.04 05:04:36