NSLayoutContraints：如何将底部视图放置在两个标签中较高者的下方？

Posted 2023-02-23

【中文标题】NSLayoutContraints：如何将底部视图放置在两个标签中较高者的下方？

【英文标题】：NSLayoutContraints: How to position a bottom view below the higher of two labels?

【发布时间】：2019-08-20 10:21:38

【问题描述】：

我正在开发一个 ios 11+ 应用程序，并希望创建如下图所示的视图：

根据标签内容，这两个标签被定位为不同高度的列。由于用户输入的自定义文本，这两个标签的内容都是可变的。因此，我无法确定这两个标签中的哪一个在运行时更高，并且高度也没有限制。

如何定位 BottomView，使其与两列/标签中的较高者有 20 像素的边距？

两个标签都应该只使用最小值。显示所有文本所需的高度。因此，给两个标签一个相等的高度不是解决方案。

我尝试对两个标签使用大于 20px 的垂直间距，但这会导致（当然）Inequality Constraint Ambiguity。

是否可以仅使用自动布局来解决这个简单的任务，还是我必须在代码中手动检查/设置大小和边距？

【问题讨论】：

搁置一个问题有点奇怪，因为不清楚在答案被接受后问了什么，不是吗？如果有人在提出问题几分钟后发布了一个完全解决所描述问题的答案，那么这个问题就不会那么不清楚了，可以吗？唯一可能缺少的是两个列应该保持各自的高度并且应该顶部对齐。我还缺少什么？

【参考方案1】：

你可以给stackView添加标签

【讨论】：

实际上堆栈视图是无关紧要的。任何自我调整大小的超级视图都可以在这里进行。一个普通的 UIView 可以完成同样的事情。

@matt 你将如何配置/定位一个普通的UIView 以匹配两个标签中较大一个的高度？

@matt 与普通的UIView 相比，堆栈视图显然具有更多的内置选项/排列其子视图的可能性。使用堆栈视图，我可以简单地设置allignment = top 属性来获得所需的结果。您能否更详细地描述如何仅使用UIView 和约束来完成此操作？您如何确保UIView 的高度来自两个标签中较大的一个（不知道这是哪个标签），而较小的标签仅使用最小值。它需要的高度？

@AndreiHerford 你真的对细节感兴趣并且想学习，还是只是在扯我的链子？如果您真的感兴趣，您希望如何解释？评论太短且没有条理。希望我给出实际答案作为答案，还是提供可下载的示例？

@matt 很抱歉，如果我给人的印象是我并不是认真地提出这个问题。当然我不想浪费你的时间，但我真的很想了解如何用一个简单的 UIView 来解决这个问题（否则这个问题对我来说也是浪费时间）。我不知道我是否错过了树林中的森林，但我真的不知道如何使用 UIView 来完成。我认为在此处添加答案将是最简单的解决方案，但如果可下载的示例对您来说更容易，那当然也可以。

【参考方案2】：

一种方法是为两个标签分配相等的高度约束。通过这样做，标签的高度将始终等于大标签（具有更多内容的标签）。

您可以通过选择两个标签并添加相等的高度约束来完成此操作，如屏幕短片中所述。

结果会如下所示

【讨论】：

感谢您的好回答！但是，这并不能解决问题，因为两个标签中的文本都应该是顶部对齐的。

【参考方案3】：

https://***.com/a/57571805/341994 给出的答案确实有效，但它不是很有教育意义。 “使用堆栈视图。”是的，但什么是堆栈视图？这是一个为您设置约束的视图。这不是魔术。堆栈视图做什么，你可以做什么。围绕两个标签的普通视图并将其自身调整为它们中较长的一个就可以了。堆栈视图，作为堆栈视图，在这里没有做任何特别的事情。您可以自己使用约束来构建相同的东西。

（实际上，周围的视图也不是真正需要的，但它可能会使事情更加封装，所以让我们继续吧。）

这是您在我的机器上运行的项目的一个版本：

另外一个标签变长了：

那是怎么做到的呢？这只是普通的约束。这是故事板：

两个标签从它们的底部到父视图的底部都有一个大于或等于约束（恰好有一个常数 20）。他们所有的其他限制都是显而易见的，我不会在这里描述它们。

好的，但这还不够。仍然存在模棱两可的地方，Xcode 会告诉你。不平等需要以某种方式解决。我们需要在不平等的另一端瞄准一些东西。解决方案是另一个约束：superview 本身的高度约束为 1，优先级为 749。这是一个足够低的优先级以允许标签的抗压缩性运行。​​

所以标签得到了它们的完整高度，并且超级视图试图尽可能短地折叠到 1，但它被两个不等式阻止：它的底部必须比两个标签的底部低 20 点以上。所以我们得到了想要的结果：superview 的底部在 longest 标签的底部下方 正好 20 点。

【讨论】：

请参阅github.com/mattneub/LongerLabel 了解可下载的演示项目。

非常感谢您的出色回答！使用 height = 1 约束为 AutoLayout 提供解决歧义的信息是我缺少的技巧！