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

what scenarios of layout design needs Dynamic height label and a text field next to each other?

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

摘自 Apple 文档 -

"This recipe dynamically sets the vertical spacing of the controls based on the tallest control at runtime. If you increase the label’s font size to 36.0 points, then the layout’s vertical spacing is calculated from the top of the label instead. If you increase the font size of a label, you would typically also increase the font size of the text field. However, given the extra large fonts available through the iPhone’s accessibility settings, this technique can prove useful when mixing dynamic type and fixed-sized controls (like images)."

参考: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

尽管你的问题有点不清楚,让我们看看这是否有助于解释事情...

假设我们从 2 个标签开始 - LabelA(绿色)和 LabelB(青色):

LabelB 被限制在 LabelA 以下 20 磅...当我们向 LabelA 添加文本时,它会增加高度,“推动”LabelB 向下并保持 20 磅的垂直间距:

所有这些都非常简单,而这正是我们期望发生的事情。

但是,假设我们希望 LabelB 从距视图顶部(安全区域)100 点处 开始 ,并且只有在 LabelA 够高吗?

如果我们向 LabelB 添加 Top 约束,那将拉伸 LabelA:

或者,它将压缩 LabelA:

在这两种情况下,因为 LabelB 顶部不能同时距离视图 100 分 Top AND 距离视图 20 分LabelA同时底部

所以,让我们将 LabelB 顶部更改为 LabelA 底部至少 20 点,方法是将其设置为 >=,并且,我们会将 LabelB Top 约束更改为 less-than-required 的优先级。在此示例中,我们将使用 Default High (750).

我们所做的是告诉自动布局打破 100 点顶部约束如果需要。因此,如果 LabelA 矮,LabelB 可以达到 100 分,但如果 LabelA 变高, 保持 LabelB 低于 [=] 20 分14=] 并打破 100 点顶部约束:

因此,与其说是 order 在其中评估约束,不如说是 logical 自动布局的能力满足所有约束条件。


编辑

尝试解释 Apple 的具体示例...

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

Label - 30pt
Field - 14pt

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

现在让我们将字体更改为:

Label - 20pt
Field - 30pt

所以 Field 比 Label 高,这是我们得到的:

标签的顶部仍然距顶部 40 磅,但该字段已向上移动(以保持基线对齐)并且该字段的顶部现在仅(大约)25 磅距顶.

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

那么,让我们将字体重置为:

Label - 30pt
Field - 14pt

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

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

Label - 20pt
Field - 30pt

这是结果:

字段顶部为 40 磅,标签顶部向下移动(以保持基线对齐)。

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


编辑 2

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

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

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

我们为每个元素添加了top = 40的约束,优先级:249。这告诉自动布局 "尝试将每个元素的顶部放在 40 点处......如果你 不能 (因为基线对齐将其拉低), 然后继续打破那个最高约束。"