受宽度和纵横比限制的视图，不更新高度答案

【问题标题】：Views constrained by width and aspect ratio, not updating height受宽度和纵横比限制的视图，不更新高度
【发布时间】：2018-08-27 15:51:13
【问题描述】：

所以在我的 main.storyboard 上，我有一张图片和几个按钮。所有这些都是居中的。我想做的是缩放所有内容，使其在不同设备上从透视/比例的角度看起来完全相同。也就是说，如果 iPhone 8 Plus 比 iPhone 8 大 10%，我希望 Plus 上的按钮和图像大 10%。

我遵循了link，它告诉我将对象的宽度限制为屏幕宽度的某个百分比（例如 25%）。然后，他说要限制纵横比，这样当宽度根据屏幕尺寸变化时，高度也会跟着变化。

我这样做是为了我的按钮和图像视图。当我查看对象的尺寸并在通过 iPhone 8 Plus 和 iPhone SE 查看对象之间切换时，宽度会发生变化，但高度不会发生变化。很明显，宽度正在正确地适应屏幕尺寸，但高度却不是。（请注意，所有按钮和图像都会发生这种情况）。我应该只限制高度并摆脱纵横比限制吗？或者有没有办法可以修复纵横比以改变高度？

如果您有任何问题或cmets，请告诉我，期待回复！

编辑：根据要求，这里有 2 张约束图片。一是纵横比约束，二是宽度约束。

【问题讨论】：

附上一个项目的约束作为所有的例子
您是否将按钮高度限制为 自己的 宽度？
@DonMag 不，我根本没有限制高度。只是相对于超级视图的宽度
我的方法是 (a) 删除图像上的所有约束，(b) 将其绘制在我想要的位置，(c) 将前导边距和后边距约束 到父级视图，（d）约束纵横比，例如。在父视图中居中。

标签： ios swift xcode nslayoutconstraint

【解决方案1】：

看看这个例子：

两个按钮的宽度限制为视图的 25%（0.25 * 宽度）。

在为 iPhone SE 设计时，它们都是80 x 30

按钮 B 也有一个纵横比约束8:3

在 iPhone 8+ 上查看时

您会看到按钮 A 拉伸到 103.33 的宽度，但它的高度保持在 30。

按钮 B 拉伸到 103.33 的宽度，但由于它具有宽高比约束，它的高度也拉伸。在这种情况下，从 30 到 38.67。

【讨论】：

我相信我有同样的事情——我有宽度和纵横比的限制。我也在居中，但看起来你也是。
一步一个脚印... 为您的图像视图添加一个顶部约束。添加视图宽度的 0.75 的宽度约束。添加 31:10 的纵横比。将“视图为”更改为不同的设备尺寸。你的宽度和高度都在变化吗？
成功了！我最终只是清除了我的限制并尝试了这个，它奏效了。我会支持您的帖子，但是您应该创建一个新的“答案”，我可以将其标记为解决方案，还是应该将您已经提供的解决方案标记为正确答案？
我希望按原样接受它是可以的。这是正确的方法，您的 cmets 帮助澄清。
很好！最后一个问题：当我现在通过顶部约束将按钮附加到图像时，我想做乘数以使其在设备之间保持一致，对吗？那是什么乘数？屏幕高度？图片高度？

【解决方案2】：

为了这项工作你需要

1- 对屏幕任意百分比的宽度限制

2-纵横比约束

通过 ctrl 从元素拖动到自身并从弹出窗口中选择纵横比然后配置乘数，例如 0.5 平均高度将是一半宽度

3-原点约束x,y

【讨论】：

有趣，为什么需要原点约束？这将如何影响其根据纵横比更新高度的能力？
任何项目都应该有 x,y 约束来识别它的位置，然后根据宽度和高度它会拉伸，如果你想在你的情况下将项目居中，那么你需要 centerX 和 top跨度>
从你的截图中，红线表示缺少约束，你能指定你给的所有约束吗，最好设置 width = per*superview.width ，然后另一个约束 firstItem 是 height
@Addison 你的问题不在于宽度和纵横比约束，而是你没有对图像设置 top 和 centerX 约束
我实际上确实有一个 centerX 约束，但是屏幕截图中可能没有捕获到。无论如何，你的权利，我没有任何最高限制。由于图像朝向屏幕顶部，并且其下方的所有其他内容都使用顶部约束附加到它，我应该执行“顶部空间到安全区域”约束吗？当我尝试这样做时，我所有的其他按钮都离图像太近了，以至于它们重叠。为什么会发生这种情况？我在按钮和图像之间的约束都是基于乘数，而不是常量。他们不应该都随着图像向上移动吗？