IB，保持 ImageView 居中，但随着屏幕尺寸增长，保持纵横比

Posted 2023-03-11

【中文标题】IB，保持 ImageView 居中，但随着屏幕尺寸增长，保持纵横比

【英文标题】：IB, Keep ImageView centre, but grow as the screen size, keeping the aspect ratio

【发布时间】：2017-10-22 13:06:19

【问题描述】：

因为我可以在 android 和 WPF 中轻松地做同样的事情，所以我认为 XCode 的 Interface Builder 也会很简单。但是我错了。我花了几个小时在故事板上多次重置约束。我知道这个问题看起来很愚蠢，但请给我一个提示。

我想要在故事板上出现这样的内容。我应该设置什么约束？

应保持 ImageView 的纵横比。 ImageView 水平居中。 ImageView 会随着屏幕宽度而增长，例如垂直手机屏幕宽度的 90%。或者，我希望我可以设置一个最大值，例如，不大于 400。我的意思是，iPad 上的 90% 太大了。 ImageView 的上边距应该与屏幕大小相适应。我的意思是，硬编码的边距 20 会使它在 iPad 上过于接近顶部，而硬编码的边距 200 在 iPad 上看起来不错，但在 iPhone SE 上却不行。

【问题讨论】：

这是一个答案（由我提供） - ***.com/questions/42860324/… - 带有相关的回购 (github.com/justdfd/soSquare)。这是 Swift 3，但重要的部分...... IB 约束、优先级等无论如何都应该起作用。诀窍是具有优先级的多个约束，让布局引擎知道要打破什么。此外，“正方形”UIView 可以是 (a) 具有纵横比的 UIImageView，(b) 可以是简单的矩形。

对于 ios，坚持百分比世界并不好。自动布局不是这样的，它迟早会带来麻烦。

【参考方案1】：

约束宽度和高度以保持纵横比（一个约束：

imageView.widthAnchor.constraint(equalTo: imageView.heightAnchor, multiplier: 0.6).isActive = true

将centerX约束到viewController的视图centerX：

imageView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0).isActive = true

使用某个比例（此处为 90%）将imageView 的宽度（或高度）限制为viewController 视图的宽度：

imageView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.9).isActive = true

这是唯一的问题，什么是合理的偏移量？要求太模糊。但是，如果您唯一的问题是根据给定的 UI 设置适当的偏移量，我会使用大小类来根据给定的大小类提供不同的约束 - 请参阅 documentation。

【讨论】：

难道他们不能用设计师本身，我必须以编程方式做这些吗？对于 4，简单来说，我可以将上边距设置为屏幕的百分比，而不是硬编码的数字吗？

我不使用故事板，所以我以编程方式为您绘制了草图，但据我所知，所有这些都应该可以使用 IB 创建。

右键拖动 iv 并选择 Aspect Ratio。设置 iv.centerX = centerX, iv.width = 0.9 x 宽度。宽度增加，但高度保持不变，扭曲了 iv。为什么不保留纵横比？

@DamnVegetables，您还可以在这种情况下使用虚拟视图或布局指南——例如，您可以使用它们来使计算出的图像视图的前边距和后边距与上边距匹配。见Auto Layout Guide.

你提到的那两个约束是#2 和#3，你需要对#1 多一个约束——你需要约束 imageView 的高度到宽度

【参考方案2】：

如果您想在情节提要中实现这一点，请执行以下操作：

将您的 imageView 放在所需的大小和位置 为您的 imageView 添加纵横比约束 向 imageView 添加中心水平约束 将宽度约束添加到您的 imageView 等于其父视图的宽度；然后将乘数更改为(desired width) / (width of the superview)。将优先级更改为 999 为您的 imageView 添加宽度约束并将关系设置为小于或等于。将您的最大值放在这里 (400) 对于顶部偏移，在您的 superView 中添加一个背景清晰的 UIView。将其顶部、左侧和右侧设置为您的超级视图的顶部左侧和右侧，并为您的 imageView 添加垂直间距 0。然后添加一个等于其父视图高度的高度约束并将乘数更改为(desired space) / (height of the superview)。 （附件中的粉色视图）