如何使用自动布局平均分配 UIButton

Posted 2023-03-12

【中文标题】如何使用自动布局平均分配 UIButton

【英文标题】：How to equally distribute UIButtons using Autolayout

【发布时间】：2014-09-19 12:06:09

【问题描述】：

我只希望我的按钮彼此之间有相等的空格，并且有一个固定的尾随和前导空格。 我有点自动布局菜鸟，所以我不知道如何解决这个问题。我尝试了很多不同的配置，但没有任何效果。任何想法如何解决这个问题？

更新

2018 年 StackViews 就是答案。

【参考方案1】：

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

步骤：

创建可见视图。

创建等于可见视图数加一的间隔视图。

交替放置视图，从间隔视图开始。

要分隔两个可见视图，请按以下模式放置所有视图，从屏幕左侧开始向右移动：

spacer1 |视图1 |垫片2 |视图2 |垫片3。

约束间隔视图，使它们的长度彼此相等。

创建从第一个间隔视图到容器视图的前导约束。

创建从最后一个间隔视图到容器视图的尾随约束。

在间隔视图和可见视图之间创建约束。

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

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

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

将间隔视图 2 和间隔视图 3 的宽度限制为等于间隔视图 1 的宽度。 将间隔视图 1 的宽度限制为大于或等于所需的最小宽度。 创建从间隔视图 1 到容器的前导空间到容器约束。 创建从间隔视图 1 到视图 1 的水平间距约束。将此约束设置为优先级为 1000 的小于或等于约束。 创建从间隔视图 2 到视图 1 和视图 2 的水平间距约束。将这些约束设置为优先级为 999 的小于或等于约束。 创建从间隔视图 3 到视图 2 的水平间距约束。将此约束设置为优先级为 1000 的小于或等于约束。

创建从间隔视图 3 到容器的 Trailing Space to Container 约束。

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

这也是苹果在this example中建议的方式

除此之外，您在按钮容器视图中执行这些操作，该视图具有这些按钮，并在您的视图中对齐该按钮容器视图，并保持前导约束和尾随约束具有相同的常数值的相等关系。并根据需要添加剩余的顶部和底部约束。

我在这里给出了与示例相同的步骤，因为取决于链接的答案可能并不可取。

【参考方案2】：

如果您要从 xib 添加这些按钮，则删除自动布局并在 autoresizing 部分下的 xib 设置中设置 spring 和 struts