如何在iOS Auto布局中为按钮添加Equal Spacing和相等宽度

Question

Xcode中自动布局约束的新手。我有一个底部视图，如UITabBar和6 UIButtons。在没有约束的情况下，我将这些按钮与每个按钮的5个空格填充对齐，每个按钮的宽度为50。 现在，我试图通过使用自动布局来支持所有屏幕尺寸。

  

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

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

任何人都可以请求帮助吗？寻求帮助。提前谢谢。

Answer 1

检查此图片，并制定如下约束条件......

结果： - 以不同尺寸预览

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

  

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

Answer 2

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

以下逐步使用Storyboard。

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



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



1. 选择您的堆栈视图，转到Utilities面板，然后选择Attributes Inspector项。在那里，点击Distribution按钮并选择＆＃34;同等填写＆＃34;。



1. 目前，您的堆栈视图的高度取决于您的按钮内在内容大小。如果你对它很好，你可以转到第5步。但是，如果需要，你可以给你的堆栈视图一个高度约束。选择您的堆栈视图，单击Pin按钮，选中Height按钮，添加所需的值，然后单击Add 1 Constraint按钮。



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



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



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



您的堆栈视图现已设置。



进一步评论：

如果您不需要彩色视图宽度以匹配按钮宽度，则可以构建仅包含UIButtons的堆栈视图，只需在Attribute inspector中为堆栈视图添加间距。但是，您必须找到一种在堆栈视图后面添加背景颜色的方法。 Apple在UIKit Framework Reference中说明了这一点：

  

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

我构建了一个包含4种不同堆栈视图的Xcode项目：

• 一个有彩色视图且依赖嵌入式UIButton内在尺寸的高度，
• 一个有彩色视图并且UIButton＆＃34;宽度和高度相等的＆＃34;约束，
• 一个有彩色视图且有自己的高度限制的
• 一个没有彩色视图但有间距并嵌入彩色视图内的视图。

您可以在此GitHub repo找到此项目。

Answer 3

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

1. 通过选择所选视图右侧最近邻居的红线，从左上角视图到右上角视图创建水平约束
2. 通过选择所选视图的左侧最近邻居的红线，从右上角视图到左上角视图创建水平约束
3. 通过选择所选视图顶部最近邻居的红线，从顶部视图创建垂直约束
4. 选择高度，等宽附近的复选框，然后点击“添加22个约束”

Answer 4

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

Answer 5

除非您在边框之间需要空格，否则不再需要间隔视图。

您可以创建具有相等间距的StackView，该间距将动态调整堆栈视图之间的空间，以用尽所有可用空间，而不会更改子视图的大小。

界面生成器在这里可能会引起误解。输入的间距值是所需的最小间距，而不是实际间距。

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