ios - 如何约束 2 个高度不等的 ui View 并在不同方向工作

Question

我有 2 个 UI View ，它们将充当控件的容器。顶部 UI View 的高度需要大于底部 UI View 。例如，对于 iPhone 8，总屏幕高度为 667。顶部 View 的高度为 475，底部 View 的高度为 192。对于两个 View ，宽度等于 Storyboard。

我首先将前端、顶部和后端边缘约束到顶部 UI View 的 Storyboard(全部设置为 0)。然后我将底部边缘限制到底部 UI View (也是 0)。

然后我对底部 View 重复了这个过程，除了我更改了顶部约束以将其自身约束到顶部 UI View (设置为 0)并将底部约束约束到 Storyboard的底部(0)。

这样做之后，我收到了关于这两个 View 在垂直方向上不明确的投诉。它显然需要 2 个 View 中的一个来设置明确的高度。所以我将底部 View 的高度限制为 192。

现在，这些尺寸在手机垂直放置时有效。但是，当我水平放置手机时，底部 UI View 超出 Storyboard边界，我设置的所有约束都变成红色。

我能想到的解决此问题的最简单方法是将两个 View 的高度设置为 Storyboard高度的百分比。但我不确定在 IB 中是否与此有关。

这就是我希望 View 在任一方向上的样子。我怎样才能做到这一点？这在 IB 中甚至可能吗？

Answer 1

我建议您使用堆栈 View 来解决这个问题。

---

• 只需选择两个 View 并将它们嵌入到 stackView 中即可。 (您可以在“编辑器”->“嵌入”->“StackView”下找到此选项)

• 然后将红色 View (更大的 View )的高度设置为与“StackView”的高度成比例。 (我将 StackView 高度的倍数设置为 0.71)

• 将“StackView”的上下前后固定到“SuperView”。
• 完成。

注意 - 还要确保 stackView 的“轴”是垂直的，并且“对齐”和“分布”都设置为填充。但您很可能不必手动设置它们，因为这些是默认配置。