意外的 UIImageView 自动布局行为 - iOS 8

Question

我一直在尝试使屏幕看起来像这样：

但是当我运行它时，它一直显示如下：

到目前为止，我已尝试调试 View Hierarchy，但调试器显示了实际的预期视图：

我想出了一个解决方法，将 UIImageView 放在 View Hierarchy 中的顶部栏之前，这样当它扩展时，它会在顶部栏下方而不是顶部。

编辑：
底部的白框不是空白，实际上是一个用于承载 2 个按钮的视图。
我的约束设置如下：

• 顶部横幅：
  • 身高：50
  • 与顶部布局指南的垂直间距：0
  • superview 的前后间距：0
• 图像：
  • 到顶部横幅的垂直间距：0
  • superview 的前后间距：0
• 底视图（白框）：
  • 图像的垂直间距：0
  • superview 的前后间距：0
  • 图像高度比例：1:3

层次结构中没有其他视图，也没有其他约束。

Answer 1

您需要在顶部横幅（“Amigo invesa app”书面图像）和中间图像（带有未知绿色水果/蔬菜的图像）之间放置一个vertical spacing。但是有一个不清楚的地方，如下

1. 中间图像视图的底部到底需要多少间距

例如，您希望中​​间图像和视图控制器视图底部之间的距离为 64px，然后不要忘记放置一个间距为 64px 的vertical spacing。

根据您的第二次编辑：：
您在底部列出的所有约束。但是有一些缺失的约束是

顶部横幅的高度，但您可能希望在更大的屏幕上调整横幅的大小，这就是为什么您需要指定其他组件的高度（显式或隐式）。这里明确地说，我的意思是硬编码指定中间图像的高度和底部白色视图的高度，并且隐含地表示它们之间的比率，正如你提到的proportional height to Image: 1:3。在隐式情况下，未指定中间图像高度，因此自动布局无法指定底部白色视图的高度。对于自动布局来说，这是一个模棱两可的情况。

我的建议是请为顶部横幅和底部白色视图指定一个明确的高度并删除比率限制。那应该做你想做的。

快乐的 gui 设计。

Answer 2

我找到了问题和解决这个问题的方法。 UIImageView 实际上的行为符合预期，但它包含的图像溢出了视图，如 this answer 中所述。
参考答案中详细解释的解决方案就像设置imageView.clipsToBounds = true一样简单。