布局设计的哪些场景需要动态高度标签和一个文本字段并排？

Question

1. 不确定在哪里需要使用动态高度标签和相邻的文本字段和
2. 约束配方如何使用必需、大于或等于约束和可选约束来根据最高点设置控件的垂直间距运行时控制？

取自 Apple Docs -

"此配方动态设置控件的垂直间距 基于运行时最高的控件。如果你增加标签的 字体大小为 36.0 点，则布局的垂直间距为 而是从标签顶部计算。如果你增加字体 标签的大小，您通常还会增加 文本字段。但是，鉴于可通过 iPhone 的辅助功能设置，这种技术可以证明是有用的 混合动态类型和固定大小的控件（如图像）时。”

参考：https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/ViewswithIntrinsicContentSize.html#//apple_ref/doc/uid/TP40010853-CH13-SW8

解决方案截图：Views with/without constraint recipe for Dynamic height label and a text field

Answer 1

即使您的问题有点不清楚，让我们看看这是否有助于解释事情......

假设我们从 2 个标签开始 - LabelA（绿色）和 LabelB（青色）：

LabelB 被限制在LabelA 下方 20 点...当我们向LabelA 添加文本时，它会增加高度，“推”LabelB 向下并保持 20 点垂直间距：

所有这些都非常简单，这正是我们所期望的。

但是，假设我们希望LabelB 从视图顶部（安全区域）的 100 点处开始，并且只有在 LabelA 变得足够高时才向下移动？

如果我们向LabelB 添加一个顶部约束，那将拉伸LabelA：

或者，它会压缩LabelA：

在这两种情况下，因为LabelB Top 不能同时是距顶部视图 100 分和距LabelA 底部 20 分。

所以，让我们将 LabelB 顶部从 LabelA 底部更改为 至少 20 分，方法是将其设置为 >=，然后，我们将更改 LabelB 顶部约束低于要求的优先级。在本例中，我们将使用Default High (750)。

我们所做的是告诉自动布局打破 100-pt 顶部约束如果需要。所以，如果LabelA 很短，LabelB 可以达到 100 分，但如果LabelA 变高，保持LabelB 低于LabelA 20 分并打破 100 分的顶部约束:

因此，与其说是评估约束的顺序，不如说是自动布局满足所有约束的逻辑能力。 p>

---

编辑

尝试并解释来自 Apple 的具体示例...

让我们从一组最小的约束开始，其中的字体是：

Label - 30pt
Field - 14pt

名称标签距离顶部 40 点，名称文本字段被限制在标签的 FirstBaseline 内。

现在让我们把字体改成这样：

Label - 20pt
Field - 30pt

所以字段比标签高，这是我们得到的：

标签的顶部仍距顶部 40 点，但该字段已向上移动（以保持基线对齐）并且该字段的顶部现在距顶部仅（大约）25 点。

目标是将最高元素的顶部保持在 40 分。正如我们所见，只有这两个垂直约束，我们失败了。

所以，让我们将字体重置为：

Label - 30pt
Field - 14pt

并添加具有指定优先级的附加约束：

定位与第一个示例相同，但是...如果我们再次将字体更改为：

Label - 20pt
Field - 30pt

这是结果：

字段顶部为 40 点，标签顶部已向下移动（以保持基线对齐）。

而且...我们已经实现了我们的目标！

---

编辑 2

尝试用“通俗易懂的语言”来澄清......

基线约束将控制两个元素的相对垂直对齐方式。当我们更改一个元素的字体大小时，它会使该元素“更高”（或“更短”），而另一个元素将垂直移动以保持基线对齐。

我们为每个元素添加了top >= 40 的必需约束。这告诉自动布局“不要让任何一个元素距离顶部的距离小于 40 点。”

我们为每个元素添加了top = 40 约束，优先级：249。这告诉自动布局“尝试将每个元素的顶部放在 40 点...如果你 不能（因为基线对齐将其拉下），然后继续并打破最高约束。”