Masonry学习之aspect fit

最新推荐文章于 2025-01-06 11:04:06 发布

「已注销」

最新推荐文章于 2025-01-06 11:04:06 发布

阅读量527

点赞数

CC 4.0 BY-SA版权

分类专栏： Masonry

本文链接：https://blog.youkuaiyun.com/fww330666557/article/details/78717811

Masonry 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何利用Masonry布局库在iOS中实现视图的aspect fit效果，通过关键约束代码展示了如何设置视图的宽高比例，使其在不同屏幕尺寸下保持合适的比例。内容包括新的组合写法、宽高成比例的设置以及如何处理多种约束组合，以确保内部视图在保持中心对齐的同时，宽度和高度不超过父视图的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果：
这里写图片描述

关键约束代码：

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(3);

            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(3);

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

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

1、一种新的组合写法

make.left.right.and.bottom.equalTo(self);

2、宽高成比例：

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

3、多种约束组合

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

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

make.center.equalTo(self.topView);

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

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

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

make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3);

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

make.width.and.height.lessThanOrEqualTo(self.topView);

个人理解：

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