视图中按钮的对齐方式

Posted 2023-03-15

【中文标题】视图中按钮的对齐方式

【英文标题】：Alignment of buttons in view

【发布时间】：2015-05-24 10:13:24

【问题描述】：

我连续有 4 个按钮，如何在每个设备的中间对齐？ iphone 4s、iphone 5s、iphone 6、iphone 6 plus。

只有在 iphone 6 上看起来不错。在 iphone 4s 上，按钮在视图之外，而在 5s 和 6 plus 上它不是居中的。

在左侧视图中您可以看到布局，在右侧视图中您可以看到预览。 我该如何解决这个问题？我试过自动布局，但这不起作用..

这里每个按钮上都有约束对齐（水平）。但他们不在中间..

谢谢。

【问题讨论】：

您是否在界面生成器中设置了约束？这很简单。

我已经尝试过了，但这对我不起作用。或者我做错了。

你添加了什么约束？

每个按钮的对齐方式（水平）。

【参考方案1】：

要对齐画布中心的多个按钮，您可以在每一侧放置两个“虚拟”或“辅助”视图。然后应用以下约束：

equal width 用于两个虚拟视图。 leading space to superview = 0 用于左侧虚拟视图。 trailing space to superview = 0 用于正确的虚拟视图。 horizontal spacing = 0 用于虚拟视图和按钮。 horizontal spacing = some fixed value 用于按钮。

您可以将虚拟视图的高度设置为0。

下面是故事板中的一个示例。为了简单起见，我只包括了两个按钮。使用此方法，您可以拥有任意数量的按钮。

【参考方案2】：

我可能在这里遗漏了一些东西。但这就是您所需要的，让多个按钮在容器中垂直居中并且水平居中（没有重叠和良好的对称性）。如果是这样，您可以执行以下操作。

约束是 -

按钮 A - 在容器中垂直居中

按钮 B：中心 Y = 按钮 A：中心 Y；按钮 C：中心 Y = 按钮 B：中心 Y

按钮 A：前导空间到超级视图 = 一些常量（比如 30）

按钮 C：到超级视图的尾随空格 = 与上面相同的常量

水平间距（按钮 A - 按钮 B）= 水平间距（按钮 B - 按钮 C）= 某个常数（比如 10）

宽度（按钮 A）= 宽度（按钮 B）= 宽度（按钮 C）