iOS - 通过imageView对不同屏幕尺寸的按钮进行自动布局缩放

Question

我有一个UIVmageView的父UIView和另一个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

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

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

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

Replaced UIView with StackView

如何让它看起来像这样？

original screen

更新2：

添加了stackView的间距和居中的X / Y.

updated stackView

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

Answer 1

首先关于父视图不要给它静态高度（371） - ＆gt;而是给主视图提供比例高度约束

关于内部子视图的第二个

1- imageView不会像您认为的那样调整大小，因为它具有前导，尾随，顶部，B约束

对于带按钮的视图，

2-相同

而不是给出这些约束条件考虑给予centerX＆amp; Y具有预定宽度＆amp;这些子视图到父视图的高度约束

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

Answer 2

按钮必须使用相等宽度和相同高度约束才能使其根据屏幕尺寸采用尺寸。

在图像上放置两个水平视图。并使他们的高度约束相等。以下是图片的参考视图。

然后在这些视图中放置按钮，然后设置相等的宽度约束。以下是图片的参考视图。

希望这会对你有所帮助。