ios 如何在iOS自动布局中为按钮添加等间距和等宽

How to add Equal Spacing and equal width for button in iOS Auto layout

提问by Yuvaraj.M

Am new to Auto layout constraints in Xcode. I have one Bottom View like UITabBarwith 6 UIButtons. Without constraints I aligned those buttons with 5 space padding with each buttons and each buttons has 50 width. Now,I am trying to make it by using Auto layout to support all Screen sizes.

我是 Xcode 中自动布局约束的新手。我有一个像UITabBar6 的底视图UIButtons。在没有约束的情况下，我将这些按钮与每个按钮的 5 个空格对齐，每个按钮的宽度为 50。现在，我正在尝试使用自动布局来支持所有屏幕尺寸。

In Storyboard constrains I set equal width for 6 buttons and I made 60 space between each buttons. I set first button 0 to leading space and I set the last button 0 to tail constraints.

在 Storyboard 约束中，我为 6 个按钮设置了相等的宽度，并且在每个按钮之间留出了 60 个空间。我将第一个按钮 0 设置为前导空格，并将最后一个按钮 0 设置为尾部约束。

I want the buttons with equal width and flexible spacesbetween views in all device sizes.

我想要buttons with equal width and flexible spaces所有设备尺寸的视图之间。

Can anyone pleas help me? Looking for the help. Thanks in advance.

任何人都可以帮助我吗？寻找帮助。提前致谢。

回答by EI Captain v2.0

check this image and made your constraints like below...

检查此图像并设置如下约束...

RESULT:-preview in different sizes

结果：-以不同尺寸预览

---

---

With Stackview(For iOS 9.0 and above)

使用 Stackview（适用于 iOS 9.0 及更高版本）

NOTE: If you have to make app for iOS 9 and later then UIStackViewis another option for you

注意：如果您必须为 iOS 9 及更高版本制作应用程序，那么这UIStackView是您的另一种选择

回答by Imanou Petit

With iOS 9 and Xcode 7, you can now have the expected result with UIStackViewand only 3 or 4 auto layout constraints.

使用 iOS 9 和 Xcode 7，您现在可以获得预期的结果，UIStackView并且只有 3 或 4 个自动布局约束。

The following step by step uses Storyboard.

下面一步一步地使用 Storyboard。

1. Create 6 UIButtons and 5 UIViews. Align them horizontally. Give some color to your views.

1. 创建 6UIButton秒和 5UIView秒。将它们水平对齐。给你的观点一些颜色。

1. Select all your views and buttons and click on the Stackbutton. You will have all your buttons and colored views aligned in a UIStackView.

2. 选择所有视图和按钮，然后单击Stack按钮。您将所有按钮和彩色视图对齐在一个UIStackView.

1. Select your stack view, go to the Utilitiespanel and select the Attributes Inspectoritem. There, click on the Distributionbutton and select "Fill Equally".

3. 选择您的堆栈视图，转到Utilities面板并选择Attributes Inspector项目。在那里，单击Distribution按钮并选择“等量填充”。

1. For now, your stack view's height relies on your buttons intrinsic content size. If you're fine with it, you can go to step 5. However, if needed, you can give your stack view a height constraint. Select your stack view, click on the Pinbutton, check the Heightbutton, add the required value and click on the Add 1 Constraintbutton.

4. 目前，您的堆栈视图的高度取决于您的按钮内在内容大小。如果没有问题，可以转到第 5 步。但是，如果需要，可以为堆栈视图设置高度约束。选择您的堆栈视图，单击Pin按钮，选中该Height按钮，添加所需的值并单击该Add 1 Constraint按钮。

As an alternative, If you want each element of your stack view to have its height matching its width, select the first button of your stack view, click on the Pinbutton, select Aspect Ratioand click on the Add 1 Constraintbutton.

作为替代方案，如果您希望堆栈视图的每个元素的高度与其宽度相匹配，请选择堆栈视图的第一个按钮，单击该Pin按钮，Aspect Ratio然后选择并单击该Add 1 Constraint按钮。

You can check that your aspect ratio constraint is correct in your Document outline(left panel) and, if you need, you can change it with a different constraint in the Attribute inspector(right panel).

您可以在Document outline（左侧面板）中检查您的纵横比约束是否正确，如果需要，您可以在Attribute inspector（右侧面板）中使用不同的约束进行更改。

1. Now, it's time to give some external constraints to your stack view. Select your stack view. Click on the pinbutton, make sure the Constrain to marginbutton is not select and set leading, trailing and bottom constraints to zero. Make sure that the bottom constraint is related to your view controller's view. Then, change the Update Framesbutton to "All Frames in Container". You can now click on the Add 3 Constraintsbutton.

5. 现在，是时候为您的堆栈视图提供一些外部约束了。选择您的堆栈视图。单击该pin按钮，确保该Constrain to margin按钮未被选中并将前导、尾随和底部约束设置为零。确保底部约束与您的视图控制器的视图相关。然后，将Update Frames按钮更改为“容器中的所有框架”。您现在可以单击该Add 3 Constraints按钮。

Your stack view is now set.

您的堆栈视图现已设置。

Further remark:

补充说明：

If you don't need your colored views width to match your buttons width, you can build a stack view with only UIButtonsand simply add spacing to your stack view in the Attribute inspector. However, you will have to find a way to add a background color behind your stack view. Apple states about it in the UIKit Framework Reference:

如果您不需要彩色视图宽度来匹配您的按钮宽度，您可以构建一个堆栈视图，UIButtons只需在Attribute inspector. 但是，您必须找到一种方法在堆栈视图后面添加背景颜色。Apple 在UIKit 框架参考中对此进行了说明：

The UIStackView is a nonrendering subclass of UIView. It does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no affect on the stack view.

UIStackView 是 UIView 的非渲染子类。它不提供任何自己的用户界面。相反，它只是管理其排列视图的位置和大小。因此，某些属性（如 backgroundColor）对堆栈视图没有影响。

---

---

I've build a Xcode project with 4 different stack views:

我已经用 4 个不同的堆栈视图构建了一个 Xcode 项目：

• one with colored views and relying on the embedded UIButtons intrinsic content size for its height,
• one with colored views and with a UIButton"equal width and height" constraint,
• one with colored views and with its own height constraint,
• one without colored views but with spacing and embedded inside a colored view.

• 一个带有彩色视图并依赖UIButton于其高度的嵌入式的内在内容大小，
• 一个带有彩色视图和UIButton“等宽和高度”约束的，
• 一个有彩色视图和它自己的高度限制，
• 一个没有彩色视图但有间距并嵌入在彩色视图中。

You can find this project on this GitHub repo.

你可以在这个GitHub repo上找到这个项目。

回答by Anand V

iOS 9 has a new UIKit class called UIStackView. It is very helpful in stacking up views horizontally or vertically, like the way you want. You should check out this tutorial: Raywenderlich: UIStackView Tutorial

iOS 9 有一个名为 UIStackView 的新 UIKit 类。这对于水平或垂直堆叠视图非常有帮助，就像你想要的那样。您应该查看本教程：Raywenderlich：UIStackView 教程

回答by Manisha

Select all the buttons and in Xcode's Pin menu

选择所有按钮并在 Xcode 的 Pin 菜单中

1. Create a horizontal constraint from the top left view to the top right view by selecting the red line to the selected view's right side nearest neighbor
2. Create a horizontal constraint from the top right view to the top left view by selecting the red line to the selected view's left side nearest neighbor
3. Create a vertical constraint from the top view by selecting the red line to the selected view's top side nearest neighbor
4. Select checkbox near to Height, Equal Widths and click on "Add 22 Constraints"

1. 通过选择选定视图右侧最近邻的红线，创建从左上视图到右上视图的水平约束
2. 通过选择选定视图左侧最近邻的红线，创建从右上视图到左上视图的水平约束
3. 通过选择到所选视图的顶侧最近邻的红线，从顶视图创建垂直约束
4. 选中 Height、Equal Widths 附近的复选框，然后单击“ Add 22 Constraints”

回答by Declan McKenna

Spacer views should no longer be necessary unless you need space between borders.

除非您需要边界之间的空间，否则不再需要间隔视图。

You can create a StackView with equal spacing which will dynamically adjust the space between your stack views to use up all available space without altering the size of your subviews.

您可以创建一个等间距的 StackView，它会动态调整堆栈视图之间的空间，以用完所有可用空间，而不会改变子视图的大小。

Interface builder can be a bit misleading here. the value you put in for spacing is the minimum spacing required not what the actual spacing will be.

界面构建器在这里可能有点误导。您输入的间距值是所需的最小间距，而不是实际间距。

The StackView will handle your spacing, making the size of your buttons equal you can use regular constraints for.

StackView 将处理您的间距，使您的按钮的大小等于您可以使用常规约束的大小。