iOS - imageView 上不同屏幕尺寸按钮的自动布局缩放答案

【问题标题】：iOS - autolayout scaling for different screen sizes of buttons over an imageViewiOS - imageView 上不同屏幕尺寸按钮的自动布局缩放
【发布时间】：2018-11-13 05:07:31
【问题描述】：

我有一个父 UIView，里面有一个 UIImageView 和另一个 UIView。 UIImageView 有一个图像，它被限制为与父 UIView 相同的大小。子 UIView 也被限制为与父 UIView 相同的大小，并且它具有位于 UIImageView 某些部分上方的按钮（这允许用户单击图像以根据单击图像的位置触发操作）。

我尝试通过使用尺寸类来设置 AutoLayout 的约束，但我似乎无法让它们根据屏幕尺寸调整大小。我在 iPhone 8 屏幕上创建了固定约束。 iPhone 8、iPhone X 和 iPhone 8 Plus 都有宽度 Compact/height Regular，但它只在 iPhone 8/X 上看起来正确。我还希望缩小 iPhone SE/4s 的按钮尺寸。

这是它的样子（蓝色黑色背景已被替换为真实图像）： notice the buttons are the same size in all 3 screens

parent UIView constraints

child UIImageView constraints

child UIView constraints

子 UIView 内的按钮根据 iPhone 8/X 屏幕尺寸具有固定的顶部/尾部/前导/底部约束。

如何让按钮针对所有屏幕尺寸相应调整大小，同时在图像上保持相同位置，该位置也会根据屏幕尺寸进行缩放？

更新： 在用 StackView 替换内部 UIView 并更新约束后，分布均匀填充后，它看起来像以下结构：

Replaced UIView with StackView

如何让它看起来像这样？

original screen

更新 2：

增加了 stackView 的间距和居中的 X/Y。

updated stackView

更新 3： 我在 imageView 中的图像在 Aspect Fit 中具有内容模式。在这种模式下如何缩放按钮？

【问题讨论】：

标签： ios swift uibutton uiimageview autolayout

【解决方案1】：

首先关于父视图不要给它静态高度(371) -> 而是给主视图一个比例高度约束

其次关于内部子视图

1- imageView 不会像你想象的那样调整大小，因为它有leading 、 Trailing 、 Top 、 B 约束

2- 与按钮视图相同

考虑将这些子视图的 centerX&Y 与父视图的比例宽度和高度约束，而不是给予这些约束

如果您还没有使用它，stackView 也适合这些按钮

【讨论】：

我不明白您将 stackView 用于按钮的意思。我是用 stackView 替换内部 UIView 还是在 UIView 内创建 stackView？ stackView 如何帮助调整大小？我需要为 stackView 设置什么约束？
我的意思是你可以替换它，因为它非常适合调整大小，特别是给子视图相同的大小，如果你正确设置约束，你可以使用 UIView，但我建议阅读更多关于它的信息
如果我使用stackView，如何设置按钮大小和位置的初始约束？我是否对默认视图使用前导/尾随/顶部/底部约束，然后 stackView 会相应地自动调整？
我告诉过你使用 centerX,y 和 pro 宽度和高度约束作为按钮视图，即使你用 stackView 替换了那个视图，stackview 的优点是你不给位置/大小约束对于子视图，因为当您将 distribution 设置为 fillEqually 时，它会自动拉伸，,,,,,，您当前的 UI 需要嵌套 stackViews vertical/Horizontal ，不想让您感到困惑，它是您的高级 UI 组件当您更好地了解它的用法时可以使用它
我已经用你所说的更新了所有内容。现在所有按钮都被平均填充了，但是我之前的问题是如何设置按钮的约束以使其看起来像原始屏幕？请参阅发布的更新。注意：所有按钮的大小都不一样。

【解决方案2】：

您必须为按钮使用等宽和等高约束，使其根据屏幕尺寸采用尺寸。

在图像上放置两个水平视图。并使它们的高度约束相等。供参考查看下图。

然后在这些视图中放置按钮，然后设置等宽约束。参考下图。

希望这会对你有所帮助。

【讨论】：

有没有办法让按钮不等宽？如果您在我的图片中看到（在更新的 stackView 链接下），我有 2 个比其他按钮大的按钮。我在按钮之间也有间距，并且按钮必须保持在图像的黑框内，它们不能延伸到视图的边缘。