自动布局将两个标签彼此相邻对齐

Posted 2023-03-13

【中文标题】自动布局将两个标签彼此相邻对齐

【英文标题】：Auto Layout align two labels next to eachother

【发布时间】：2014-09-13 12:52:28

【问题描述】：

我正在尝试将我的应用转换为使用自动布局。

这是它的外观（在我使用自动布局之前）：

现在我不确定如何使用自动布局实现以下目标：

左侧文本标签（其中包含 22:35）必须在水平方向 KL1032 标签的中心，当右标签不存在时（与 -14 分钟）。 如果确实存在正确的标签，则 22:35 标签应与 KL1032 的水平中心对齐 标签和 -14 min 标签的左边缘也应与 KL1032 标签的水平中心，留一点空间 在标签之间，就像屏幕截图中一样。

我需要使用哪些约束来实现这一目标？我是否也使用 Content Hugging 优先级？

我尝试将 22:35 标签居中，如果正确的标签为空/不存在，这很好。但是当存在正确的标签时，这当然不能正常工作。

【参考方案1】：

在视图中嵌入每个标签，并为所有视图提供 14 的最小宽度约束。然后当右侧标签为空时，布局会根据您的描述进行调整。因此，您可以对嵌入视图进行布局：

【讨论】：

这似乎与问题想要的相反。

@KenThomases 不，即使标签为空，这也允许布局保持不变。我就是这么读他的问题的。

他希望在正确的标签不存在/为空时更改布局。

@KenThomases 我更新了答案以反映最小 14 宽度。但重点是在视图中嵌入标签，这是不变的。

【参考方案2】：

您将不得不添加和删除“（-14 分钟）”标签，而不仅仅是隐藏它或将其设置为空。

将 22:35 标签设置为使其水平中心与 KL1032 标签的水平中心对齐，但优先级有所降低（例如 750）。还要设置一个约束，使后缘大于或等于 KL1032 标签的中心减去您想要的任何微小间距。这个优先级应该是 1000（必需）。

当“（-14 分钟）”标签应该出现时，添加它并在其上设置约束。将其前沿限制为 22:35 标签的后沿加上所需的间距。还要创建一个约束以使其中心与 KL1032 标签的中心对齐，但将其优先级设置在必需 (1000) 和以 22:35 标签为中心的约束之间，例如 800。布局系统将无法将其居中，因为这会强制 22:35 标签超出其所需的约束，但它会使其尽可能接近。

当该标签不应该出现时，只需将其从层次结构中删除，这也将删除其约束。 22:35 标签将移回居中（因为它可以并且它“更喜欢”）。

如果您愿意，您可以在两个标签都存在的情况下在 NIB 中进行布局。制作“（-14 分钟）”标签及其约束的出口。将它们设为strong，因为您将暂时将它们从层次结构中删除，但不希望它们被释放。这样，您的代码可以根据需要删除和重新添加它们，而无需在代码中表达约束。

---

编辑：哦，您需要一个约束，将“（-14 分钟）”标签的基线设置为等于 22:35 标签的基线。您必须每次在代码中添加它，或者在具有强大插座的 NIB 中设置它，然后每次都重新添加它，就像其他人一样。

---

编辑 2： 我想到了另一种方法。您可以将“（-14 分钟）”视图保留在层次结构中，并且始终保留所有约束。当您不希望它显示时，将视图设置为隐藏并将其中心与 KL1032 标签中心之间的约束的constant 设置为更大的值。绝对大到足以让 22:35 标签占据其首选的居中位置，可能大到足以远离屏幕。

由于您不希望 22:35 标签一直跟随它，因此建立这两个标签之间间距的约束应设为“大于或等于”而不是“相等”。此更改不以是否显示“（-14 分钟）”标签为条件。这就是该约束应该始终存在的方式。

如果您确实希望显示“（-14 分钟）”标签，请将试图使其居中的约束重置为使 constant 等于 0。当然，也可以取消隐藏它。

【讨论】：

感谢您提供非常详细的回答。但是我怎样才能“设置一个约束，使后沿大于或等于 KL1032 标签的中心”。我可以对齐两个标签的后缘，但我看不出如何将 22:35 标签的后缘与 KL1032 标签的中心对齐。

几乎可以创建任何水平约束。例如，创建一个对齐两个视图的中心 X 的视图。然后，在文档大纲中选择新约束并打开 Attributes Inspector。在那里，您将能够更改要关联的视图的哪些属性。您可以将其从 CenterX 和 CenterX 更改为其中一个的 Trailing 和另一个的 CenterX。然后你也可以调整常量来创建间距。