Masonry学习之aspect fit

先看效果：

关键约束代码：

topView（天蓝色视图）的left、right、和top与父视图相等。

[self.topView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.and.top.equalTo(self);
        }];
           

bottomView（即粉色视图）的left、right、bottom与父视图相等，top等于topView的bottom，高度与topView相等。

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

topInnerView（即浅绿色视图）的宽度是其自身高度的三倍，其宽度和高度都不超过其父视图的宽度和高度，其宽度和高度等于topView的宽度，优先级低，其中心点等于topView的中心点。

[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.equalTo(self.topInnerView.mas_height).multipliedBy();

            make.width.and.height.lessThanOrEqualTo(self.topView);
            make.width.and.height.equalTo(self.topView).with.priorityLow();

            make.center.equalTo(self.topView);
        }];
           

bottomInnerView（即绿色视图）的高度等于其自身宽度的3倍，其宽度和高度都不超过父视图的宽度和高度，其宽度和高度等于其父视图的宽度，优先级低，其中心点等于父视图中心点。

[self.bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo(self.bottomInnerView.mas_width).multipliedBy();

            make.width.and.height.lessThanOrEqualTo(self.bottomView);
            make.width.and.height.equalTo(self.bottomView).with.priorityLow();

            make.center.equalTo(self.bottomView);
        }];
           

1、一种新的组合写法

2、宽高成比例：

// 宽高比为：
make.width.equalTo(self.topInnerView.mas_height).multipliedBy();
           

3、多种约束组合

定位内部视图，使用了多个约束，那么应该如何一步步添加约束呢？

首先，我希望内部视图与父视图的中心点重合：

然后，设置内部视图的宽和高等于父视图的宽和高，但是这并不是我的最终目的，因此我给它设置为低优先级：

然后，我设置内部视图的宽高比为3比1 ：

最后，限制内部视图的宽和高不能超出父视图的范围：

个人理解：

感觉这个过程就是一系列不等式的运算，理解起来有点抽象。有时候，对于视图尺寸的约束，并不是一定要设置固定的值，毕竟我们需要适配不同的屏幕。