Masonry自动布局详解五：比例（multipliedBy）

笔者在这里介绍纯代码自动布局的第三方库：Masonry。这个库使用率相当高，在全世界都有大量的开发者在使用，其star数量也是相当高的。

支持原创，请阅读原文

效果图

我们这里初始按钮是一个很小的按钮，点击就不断放大，最大就放大到全屏幕。

核心代码

@implementation AspectFitController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Create views
  UIView *topView = [[UIView alloc] init];
  topView.backgroundColor = [UIColor redColor];
  [self.view addSubview:topView];

  UIView *topInnerView = [[UIView alloc] init];
  topInnerView.backgroundColor = [UIColor greenColor];
  [topView addSubview:topInnerView];

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

  UIView *bottomInnerView = [[UIView alloc] init];
  bottomInnerView.backgroundColor = [UIColor blueColor];
  [bottomView addSubview:bottomInnerView];

  [topView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.right.top.mas_equalTo(0);
    make.height.mas_equalTo(bottomView);
  }];

  // width = height / 3
  [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);
  }];

  [bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.right.bottom.mas_equalTo(0);
    make.height.mas_equalTo(topView);
    make.top.mas_equalTo(topView.mas_bottom);
  }];

  // width/height比为1/3.0，要求是同一个控件的属性比例
  [bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.bottom.mas_equalTo(bottomView);
    make.center.mas_equalTo(bottomView);
    // 注意，这个multipliedBy的使用只能是设置同一个控件的，比如这里的bottomInnerView，
    // 设置高/宽为3:1
    make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

    make.width.height.mas_equalTo(bottomView).priorityLow();
    make.width.height.lessThanOrEqualTo(bottomView);
  }];
}

@end

讲解

我们的目标是点击时，将里面的往外面，外面的往里面，并且显示动画效果。其中，最关键的代码是：

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

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

我们就说说bottomInnerView的约束如何添加。 我们希望width/height比为1/3.0，首先，我们设置了其top和bottom与父视图一致且始终在父视图中居中显示：

make.top.bottom.mas_equalTo(bottomView);
make.center.mas_equalTo(bottomView);

然后我们通过make.width.height.lessThanOrEqualTo设置了宽、高的最大值与父视图相同，然后设置了宽和高与父视图相等，但是优先级为最低，以保证子视图的宽高不超过父视图。

make.width.height.mas_equalTo(bottomView).priorityLow();
make.width.height.lessThanOrEqualTo(bottomView);

最后，我们设置了bottomInnerView的高为宽的3倍。

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

源代码

温馨提示：本节所讲内容对应于AspectFitController中的内容

关注我