自动布局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

你可能感兴趣的:(自动布局Masonry)