如何使用Autolayout平均分配UIButton

时间:2014-09-19 12:06:10

标签: ios xcode cocoa-touch autolayout

我只是希望我的按钮彼此之间具有相等的空间以及固定的尾随和前导空间。 我有点像Autolayout noob,所以我不知道如何解决这个问题。我尝试了很多不同的配置,但没有任何效果。任何想法如何解决这个问题?

enter image description here

更新

在2018年,StackViews就是答案。

2 个答案:

答案 0 :(得分:2)

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

步骤:

  1. 创建可见视图。

  2. 创建等于可见视图数量加上一个的间隔视图。

  3. 从间隔视图开始,交替放置您的视图。

  4. 要分隔两个可见视图,请将所有视图放在以下图案中,从屏幕左侧开始向右移动:

  5. spacer1 | view1 | spacer2 | view2 | spacer3。

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

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

    3. 从最后一个spacer视图到容器视图创建一个尾随约束。

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

    5. 以下示例使用上述任务中的步骤来说明如何按比例间隔定位两个视图。间隔视图是为示例注释的,但通常是空的,没有背景。首先,创建两个视图并将它们放在故事板中。

      enter image description here

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

      enter image description here

      为spacer视图创建以下约束:

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

        这些约束创建了两个可见视图和三个不可见视图(间隔视图)。这些间隔视图会随着设备方向的变化自动调整大小,保持可视视图的比例间隔,如下图所示:

      8. enter image description here

        enter image description here

        这也是苹果在this example

        中建议的方式

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

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

答案 1 :(得分:1)

如果要从xib添加这些按钮,则删除自动布局并在自动调整部分下的xib设置中设置弹簧和支柱