iOS Autolayout 如何在不同的屏幕尺寸、类型和方向下保持布局和纵横比

Question

我对自动布局和故事板感到沮丧（可能是因为我使用得不够多 - 我倾向于使用代码构建 UI，因为我发现这在平台之间移动时很有用，但是我想尝试解决这使用了一个视觉故事板）。在下图中，我展示了我想要实现的基本布局。

1) 图片 1 和图片 2（红色）应仅在带有缺口屏幕的 iPhone 上可见，例如它们在 iPhone 11 上而不是在 iPhone 8 上。

2) 图片 2 应填满屏幕顶部的整个“缺口”不安全区域 - 固定在顶部并根据需要调整大小

3) 图片 1 应填满屏幕底部的整个不安全区域 - 固定在底部并根据需要调整大小

4) 图像 4 应固定在安全区域的顶部以及左右边缘。它的高度应自动调整以保持图像的纵横比。

5) 图像 3 应固定在安全区域的底部以及左右边缘。它的高度应自动调整以保持图像的纵横比。

*另一个视图将位于包含内容的安全区域的顶部 - 但我稍后会谈到。

布局需要适用于 iPhone 和 iPad 的纵向和横向。看起来应该很容易，但它让我发疯！但是我设置了约束，我似乎无法让它按照我想要的方式运行！

这个想法是图像 2 是图像 4 顶部的扩展，图像 1 是图像 3 底部的扩展。不会对图像 1 和 2 进行控制，它纯粹是一个视觉的东西。

无论如何感谢任何建议，在此先感谢:-)

Answer 1

删除 Image 4 并从顶部给它安全区域的约束。最重要的是，在添加约束之后，将 Image 2 放在 Image 4 上方，然后添加将 Image 2 底部附加到 Image 4 的约束。

上述过程将使您的Image 2相应地调整大小。

现在对于图片 1，请遵循相同的过程。首先删除Image 3，为其添加约束。在剩余空间中添加 Image 1。