如何使用自动布局使用其超级视图调整方形视图的大小

How to make a square view resize with its superview using auto layout(如何使用自动布局使用其超级视图调整方形视图的大小)

问题描述

在我的特殊情况下，我在视图控制器中有视图，我为其添加了以下约束:

In my particular case I have view inside the view controller for which I added the following constraints:

• 将前缘、后缘、顶边和底边设置为 0
• 将底边的乘数设置为 2:1

现在视图位于视图控制器的上半部分.

Now the view sits in the top half on the view controller.

在其中我添加了一个方形图像视图，为此我添加了以下约束:

Inside this I add a square image view, for which I added the following constraints:

• Ctrl 从图像视图拖到超级视图并添加相等的高度和宽度.
• 更改宽度和高度的乘数，直到我得到一个完美的正方形.
• 添加了垂直和水平居中的约束

我的约束看起来很完美，但是在模拟器中运行时，我没有得到一个完美的正方形.除此之外，在不同的模拟器屏幕上运行时，图像视图不会调整大小.

My constraints seems perfect, but when running in the simulator I don't get a perfect square. Besides this, the image view doesn't get resize when running on different simulator screens.

这是我的设置:

• 已启用自动布局和尺寸类别
• 我为情节提要使用推断大小
• 自适应布局设置为任意宽度和高度
• 我正在尝试为 4s、5、6 和 6+ 模拟器运行此程序.

我查看了其他 stackoverflow 帖子，但似乎没有任何效果.

I looked on other stackoverflow posts, but nothing seems to work.

是否有一些基本步骤可以做到这一点?

Are there some basic steps to do this ?

设置>=10个约束后:

After setting >=10 constraints:

我添加了顶部，底部，前导，尾随约束2次，1次小于或等于(优先级1000)，另一个大于或等于(优先级800)，常数值为90.我不知道为什么底部它试图从主视图延伸到 90 pt，而不是容器视图(绿色).

edit 3: I added top,bottom,leading,trailing constraints 2 times, 1 with lower than or equal(priority 1000), the other one with greater than or equal(priority 800) with the constant value of 90. I don't know why for bottom it tries to streches to 90 pt from the main view, not the container view(green one).

推荐答案

您有一个视图需要扩展以填充其容器，同时保持其纵横比.这是 Auto Layout 的常见模式.

You have a view that needs to expand to fill its container while maintaining its aspect ratio. This is a common pattern with Auto Layout.

诀窍是对前导/尾随/顶部/底部使用两个约束:

The trick is to use two constraints for leading/trailing/top/bottom:

• =10 低优先级

>=10 在所需的优先级.

综合起来，你有:

• 宽高比 1:1

• Aspect Ratio 1:1

在 Superview 中居中 X/Y

Center X/Y in Superview

前导/尾随/顶部/底部到超级视图 = 10(优先级为 750)

Leading/Trailing/Top/Bottom to Superview = 10 (at 750 priority)

前导/尾随/顶部/底部到 Superview >= 10(优先级为 1000)

Leading/Trailing/Top/Bottom to Superview >= 10 (at 1000 priority)

UIImageView 还需要考虑一些事项:

There are also a couple of things to consider with UIImageView:

• UIImageView 将根据其显示的图像具有固有的内容大小，因此您需要确保其 Content Hugging Priority 低于您用于 =10<的 750 优先级/code> 约束.