使用自动布局在屏幕上水平均匀分布按钮。它们之间的间距不相等

Posted 2023-03-15

【中文标题】使用自动布局在屏幕上水平均匀分布按钮。它们之间的间距不相等

【英文标题】：Evenly spread buttons horizontally across screen using autolayout. Not equal spacing between them

【发布时间】：2015-03-23 19:58:44

【问题描述】：

我需要在屏幕上水平布局一系列按钮，使它们在屏幕上等距分布，而不是在它们之间等距分布。例如，有 3 个按钮，它们间隔均匀，因此第一个按钮位于屏幕宽度的 25% 处，其他按钮位于屏幕宽度的 50%、75% 处。

手动将它们放置在 x,y 坐标中相对简单，但我试图避免混合方法。

普遍的建议是在按钮之间使用间隔（UIView）并放置一个约束以使间隔相等。如果间隔按钮的大小可能不同，这将不起作用。假设有 3 个标记为“A”、“B”、“ReallyLong”的按钮。我仍然希望它们居中，屏幕中间有“B”。相等的垫片在它们之间留下相等的间距，但不是均匀分布的按钮。 ReallyLong 占用空间太大，B 不居中

【问题讨论】：

你不能把 A 和 B 放在与ReallyLong 大小相同的视图中吗？

【参考方案1】：

您可以创建一个约束来将按钮的 centerX 与其容器对齐。然后，编辑该约束，使按钮的 centerX 等于容器的 trailing 属性，乘数为 0.25、0.5 或 0.75（以及 0 常量）。要最自然地做到这一点，您可能需要告诉 Xcode 交换第一项和第二项，以便 Button.CenterX 等于 Superview.Trailing（带乘数），而不是相反。

【讨论】：

这应该是答案，因为它不需要垫片

正如@hackphone 所说，没有垫片会更好，这里有一个非常好的快速回答如何在没有垫片的情况下做到这一点：***.com/a/25898949/1953914

【参考方案2】：

Apple 解释的很好。

在视图之间创建相等的间距

要根据设备的方向按比例间隔布置多个视图，请在可见视图之间创建间隔视图。正确设置这些间隔视图的约束，以确保可见视图能够根据设备的方向保持间隔。

以下示例使用上述任务中的步骤来展示如何按比例间隔放置两个视图。间隔视图已针对示例进行了注释，但通常为空且没有背景。首先，创建两个视图并将它们放在情节提要中。

添加三个间隔视图 - 一个位于最左侧视图的左侧，一个位于两个视图之间，一个位于最右侧视图的右侧。此时间隔视图的大小不必相同，因为它们的大小将通过约束来设置。

为间隔视图创建以下约束：

将间隔视图 2 和间隔视图 3 的宽度约束为等于 间隔视图 1 的宽度。

将间隔视图 1 的宽度限制为大于或等于 所需的最小宽度。

创建从间隔视图 1 到容器的前导空格约束 容器。

创建从间隔视图 1 到视图 1 的水平间距约束。 使用 将此约束设置为小于或等于约束 优先级为 1000。

创建从间隔视图 2 到视图 1 的水平间距约束 并查看 2. 将这些约束设置为小于或等于 优先级为 999 的约束。

创建从间隔视图 3 到视图 2 的水平间距约束。 使用 将此约束设置为小于或等于约束 优先级为 1000。

创建从间隔视图 3 到容器的尾随空格约束 容器。

这些约束创建两个可见视图和三个不可见视图（间隔视图）。这些间隔视图会随着设备方向的变化而自动调整大小，使可见视图保持按比例间隔，如下两图所示：

【讨论】：

这个答案给了我解决问题的方法：4 个按钮宽度相等且间隔均匀。通过在所有这些间隔之间创建具有宽度相等约束的上述间隔宽度来解决，没有明确的间隔宽度约束，但 键一直是中间间隔的中心 y 对齐约束。

【参考方案3】：

我想我解决了。通过在每个按钮之间插入垫片并将垫片宽度设置为相等，我之前已经能够在按钮之间获得均匀的空格。并且加法是还要指定按钮宽度相等。这似乎运作良好。所有文本都在适当的位置居中。

对于 3 个按钮，这似乎是一种视觉约束。

Constraint = "H:|[spacer0(>=0)][button0][spacer1(==spacer0)][button1(==button0)][spacer2(==spacer0)][button2(==button0)][spacer3(==spacer0)]|"

上面的文字看起来像这样，这就是我要找的。中间按钮居中，右侧按钮居中在屏幕右三分之一处：

【讨论】：

是的，这正是我要做的。