如何使用自动布局平均分配UIButton [英] How to equally distribute UIButtons using Autolayout

问题描述

我只希望我的按钮之间具有相等的空间，并有固定的尾随和前导空间. 我有点自动布局，所以我不知道如何解决此问题.我尝试了很多不同的配置，但没有任何效果.有什么想法可以解决这个问题吗?

I just want my buttons to have equal spaces to each other and a fixed trailing and leading space. I am kinda Autolayout noob, so I don't have any clue how to solve this problem. I tried a lot of different configurations but nothing worked as it should. Any ideas how to solve this Issue ?

更新

在2018年，StackViews就是答案.

In year 2018 StackViews are the answer.

推荐答案

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

To lay out several views that are proportionally spaced based on the orientation of a device, create spacer views between the visible views. Set the constraints of these spacer views correctly to ensure that the visible views are able to stay spaced apart based on the orientation of the device

步骤:

1. 创建可见视图.

1. Create the visible views.

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

Create the spacer views equal to the number of visible views plus one.

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

Alternate placing your views, starting with a spacer view.

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

To space two visible views, place all of the views in the following pattern, starting from the left side of the screen and moving right:

spacer1 | view1 | spacer2 | view2 | spacer3.

spacer1 | view1 | spacer2 | view2 | spacer3.

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

1. Constrain the spacer views so that their lengths are equal to each other.

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

Create a leading constraint from the first spacer view to the container view.

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

Create a trailing constraint from the last spacer view to the container view.

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

Create constraints between the spacer views and the visible views.

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

The following example uses the steps in the above task to show how to position two views proportionally spaced. The spacer views are annotated for the example, but are normally left empty with no background. First, create the two views and place them in the storyboard.

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

Add the three spacer views—one to the left of the leftmost view, one between the two views, and one to the right of the rightmost view. The spacer views don’t have to be the same size at this time because their size will be set through constraints.

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

Create the following constraints for the spacer views:

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

7. 创建从间隔视图3到容器的到容器的尾随空间"约束.

1. Constrain the width of spacer view 2 and spacer view 3 to be equal to the width of spacer view 1.
2. Constrain the width of spacer view 1 to be greater than or equal to the minimum desired width.
3. Create a Leading Space to Container constraint from spacer view 1 to the container.
4. Create a Horizontal Spacing constraint from spacer view 1 to view 1. Set this constraint to be a less-than-or-equal-to constraint with a priority of 1000.
5. Create Horizontal Spacing constraints from spacer view 2 to view 1 and view 2. Set these constraints to be a less-than-or-equal-to constraint with a priority of 999.
6. Create a Horizontal Spacing constraint from spacer view 3 to view 2. Set this constraint to be a less-than-or-equal-to constraint with a priority of 1000.

7. Create a Trailing Space to Container constraint from spacer view 3 to the container.

这些约束创建两个可见视图和三个不可见视图(间隔视图).这些间隔视图会随着设备方向的改变而自动调整大小，从而使可见视图按比例间隔开，如以下两个图所示:

These constraints create two visible views and three invisible views (spacer views). These spacer views automatically resize as the orientation of the device changes, keeping the visible views proportionally spaced, as shown in the following two figures:

这也是苹果公司建议在

This is the way apple also suggests to do in this example

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

In addition to this, You do these things in a buttons container view which is having those buttons and align that button container view in your view and keep leading and trailing constraints with equal relationship with same constant value. And add the remaining top and bottom constraints as those may be needed.

我在这里给出了与示例相同的步骤，因为根据链接的答案可能不是更好的选择.

I have given same steps of the example here, because answer depending on links may not be preferable.

这篇关于如何使用自动布局平均分配UIButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！