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

标签 ios swift uibutton uiimageview autolayout

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

我尝试通过使用尺寸类来设置自动布局的约束,但我似乎无法让它们根据屏幕尺寸相应地调整大小。我在 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 中具有内容模式。如何在此模式下缩放按钮?

最佳答案

首先,关于父 View ,不要给它静态高度(371) -> 而是为主视图提供比例高度约束

第二个关于内部 subview

1- imageView 不会像你想象的那样调整大小,因为它有前导、尾随、顶部、B 约束

2- 带按钮的 View 相同

不要给出这些约束,而是考虑为父 View 的这些 subview 提供具有比例宽度和高度约束的 centerX&Y

如果您尚未使用 stackView,它也适合这些按钮

关于iOS - 针对 imageView 上按钮的不同屏幕尺寸的自动布局缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50670832/

相关文章:

string - 如何找到两个单词的共同字母?

xcode - 在 swift 中使用 Core Motion

ios - 删除 NSAttributedString 属性

ios - iAd Interstitials 显示不一致?根本不在模拟器上

ios - Xcode动态实时更新折线图

json - 尝试解析 JSON 时无法下标值错误

ios - 如何使用动画闪烁/更改 UIButton borderColor

ios - 以编程方式删除 UIButton 背景颜色

iphone - 将按钮动态添加到 uitableviewcell - iPhone 应用程序

ios - Swift 3.0中如何用代码控制Status Bar样式