如何使用Autolay来安排UIButtons

我只想让我的button有相同的空间,固定的拖尾和领先的空间。 我有点Autolayout noob,所以我没有任何线索如何解决这个问题。 我尝试了很多不同的configuration,但没有任何工作,因为它应该。 任何想法如何解决这个问题? 这将是非常棒的。

在这里输入图像说明

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

脚步:

  1. 创build可见的视图。

  2. 创build等于可见视图数加1的间隔视图。

  3. 交替放置您的意见,从一个spacer视图开始。

  4. 要放置两个可见视图,请将所有视图按照以下模式放置,从屏幕左侧开始向右移动:

spacer1 | view1 | spacer2 | view2 | spacer3。

  1. 限制间隔视图,使其长度相等。

  2. 创build从第一个间隔视图到容器视图的主要约束。

  3. 创build从最后一个间隔视图到容器视图的尾随限制。

  4. 在间隔视图和可见视图之间创build约束。

以下示例使用上述任务中的步骤显示如何按比例间隔放置两个视图。 例子中的spacer视图是注释的,但通常是空的,没有背景。 首先,创build两个视图,并将它们放置在故事板中。

在这里输入图像说明

添加三个spacer视图 – 一个在最左边的视图左边,一个在两个视图之间,右边一个在最右边的视图。 间隔视图目前不必是相同的大小,因为它们的大小将通过约束来设置。

在这里输入图像说明

为spacer视图创build以下约束:

  1. 将间隔视图2和间隔视图3的宽度限制为等于间隔视图1的宽度。
  2. 限制间隔视图1的宽度大于或等于最小所需宽度。
  3. 从隔离视图1到容器创build一个从容器约束的领先空间。
  4. 从间隔视图1到视图1创build一个水平间距约束。将此约束设置为一个优先级为1000的小于或等于约束。
  5. 创build从间隔视图2到视图1和视图2的水平间距约束。将这些约束设置为一个优先级为999的小于或等于约束。
  6. 从间隔视图3到视图2创build一个水平间距约束。将此约束设置为一个优先级为1000的小于或等于约束。
  7. 创build从间隔视图3到容器的尾部空间到容器约束。

    这些约束创build两个可见的视图和三个不可见的视图(间隔视图)。 这些间隔视图会在设备的方向发生变化时自动resize,从而保持可见视图的比例间隔,如下图所示:

在这里输入图像说明

在这里输入图像说明

在这个例子中,苹果也是这样build议的

除此之外,您还可以在button容器视图中执行这些操作,该视图具有这些button,并在您的视图中将该button容器视图alignment,并保持具有相同常数值的相等关系的前导和尾随约束。 并且可能需要添加剩余的顶部和底部约束。

我在这里给出了这个例子的相同步骤,因为根据链接的回答可能不是最好的。

如果从xib添加这些button,则删除自动布局,并在autoresizing部分下从xib设置中设置spring和struts