Ios 如何约束两个高度不等的ui视图并在不同方向上工作

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

我首先将顶部UI视图的前缘、顶边和后缘约束到情节提要（全部设置为0）。然后，我将底部边缘约束到底部UI视图（也是0）

然后，我对底部视图重复了该过程，但我更改了顶部约束以将其自身约束到顶部UI视图（设置为0），并将底部约束约束约束到故事板的底部（0）

在这样做之后，我收到了关于这两种观点在纵向上模棱两可的投诉。显然，它需要两个视图中的一个来设置明确的高度。因此，我将底部视图的高度限制为192

现在，当手机处于垂直方向时，这些尺寸就起作用了。但是，当我水平定向手机时，底部UI视图超出了故事板的边界，我设置的所有约束都变为红色

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

这就是我希望视图在任一方向上的外观。 我怎样才能做到这一点？这在IB中可能吗

---

是的，您可以使用纵横比约束将约束设置为百分比值

然后设置约束中涉及的项目之间的比例。具体而言，您可以设置：

TopView.Height等于ContainerView.Height，乘数为0.7 和BottomView.Height等于ContainerView.Height，乘数为0.3

您可以在情节提要中设置它们：

---

我建议您使用堆栈视图解决此问题

---

• 只需选择这两个视图并将它们嵌入stackView。（您将在“编辑器”->“嵌入”->“堆栈视图”下找到此选项）

• 然后将红色视图（较大视图）的高度与“StackView”的高度成比例设置。（我将乘数设置为StackView高度的0.71）

• 将“StackView”的顶部底部引线尾部固定到“SuperView”
• 完成了

---

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

您可以使用大小类，并为每个sizeClass紧凑/常规宽度/高度组合添加约束

---

此解决方案最适合我的需要。我在尝试使用@andrehungaro解决方案时遇到了XCode崩溃的问题。