如何在 ViewController 中居中多个按钮？

Posted 2023-03-15

【中文标题】如何在 ViewController 中居中多个按钮？

【英文标题】：How to center multiple buttons in a ViewController?

【发布时间】：2019-10-22 18:28:54

【问题描述】：

我有 3 个按钮，我想在 ViewController 顶部居中，这样无论 iPhone 或 iPad 的屏幕大小如何，它们都保持居中。我尝试过：

在视图控制器两侧的按钮上使用前导空格和尾随空格使它们居中。 将按钮放在视图中，然后将视图相对于 ViewController 居中。 将约束添加为比率。 对按钮使用约束。

这些方法似乎都不适合我，我不知道如何解决这个问题。我四处寻找解决方案，但找不到任何可以让我这样做的东西。

【问题讨论】：

您使用的方法无法保证您需要的结果。你是如何设置约束的？你试过StackView吗？

这些方法似乎都不起作用不足以让我们帮助您。对所需结果进行更明确的描述也会有所帮助 - 您是否希望三个按钮实际上都居中，或者让中间一个居中而其他按钮相距一些像素，或者相同但其他一些百分比走了？

@Caleb 抱歉含糊其辞，我希望将按钮作为一组居中，因此中间的按钮居中，而其他按钮理想地相距一定百分比（以便在较大的显示器上看起来不错）

【参考方案1】：

这些方法似乎都不适合我，我不知道如何解决这个问题。我四处寻找解决方案，但找不到任何可以让我这样做的方法。

只使用约束就可以轻松地将按钮组“居中”。这是一个例子：

为了实现这一点，我首先将Button 2 限制在安全区域的水平中心，并将其top 限制在安全区域的top 加上128px。然后我限制 Button 1 和 Button 3 的 top 等于 Button 2 的 top。最后，我将 Button 1 的 trailing 限制为 Button 2 的 leading 加上 100px，以及 Button 3 的 leading > 到 Button 2 的 trailing 加上 100 像素。以下是约束的列出方式：

我不确定为什么这对您不起作用 - 您没有向我们提供有关您的尝试如何失败的任何信息。您列出的其他方法也应该有效。例如，您当然可以将按钮放在视图中，并将视图置于安全区域或主视图的中心。

如果希望间距与屏幕宽度成比例，可以使用约束的multiplier 字段。比如删除Button 1和Button 2之间的水平间距约束，然后新建一个约束Button 1的centerX > 到 按钮 2 的 centerX。接下来，选择您刚刚创建的约束并将其设置为multiplier 字段，例如，0.5。您可以对 Button 3 执行相同的操作，但将 multiplier 设置为 1.5。现在，您将 Button 2 置于安全区域的中心，而其他两个按钮则放置在安全区域边缘和中心之间的中间位置，无论屏幕尺寸如何。当然，您可以更改这些值以获得不同的间距。