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

在Xcode中，自动布局约束是新的。 我有一个像UITabBar 6 UIButtons底视图。 没有限制，我将这些button与每个button的5个空格填充alignment，每个button都有50个宽度。 现在，我试图通过使用自动布局来支持所有的屏幕尺寸。

在故事板约束中，我为6个button设置了相等的宽度，并在每个button之间创build了60个空间。 我将第一个button0设置为前导空格，并将最后一个button0设置为尾部约束。

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

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

Answer 1

检查这个图像，并做出如下约束…

结果： –以不同尺寸预览

---

随着Stackview （iOS 9.0及以上）

注意：如果你必须为iOS 9开发应用程序，那么UIStackView是另一种select

Answer 2

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

以下逐步使用Storyboard。

1. 创build6个UIButton和5个UIView 。 水平alignment它们。 给你的意见一些颜色。

2. select所有的视图和button，然后点击Stackbutton。 您将在UIStackView中将所有button和彩色视图alignment。

3. select你的堆栈视图，进入Utilities面板并selectAttributes Inspector项目。 在那里，点击Distributionbutton，然后select“平等填充”。

4. 现在，你的堆栈视图的高度依赖于你的button的内容大小。 如果你没有问题，你可以到第5步。但是，如果需要的话，你可以给你的堆栈视图一个高度限制。 select你的堆栈视图，点击Pinbutton，选中Heightbutton，添加所需的值，然后点击Add 1 Constraintbutton。

或者，如果您希望堆栈视图的每个元素的高度都与其宽度匹配，请select堆栈视图的第一个button，单击Pinbutton，selectAspect Ratio ，然后单击Add 1 Constraintbutton。

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

5. 现在，是时候给你的堆栈视图提供一些外部约束。 select你的堆栈视图。 点击pinbutton，确保“ Constrain to marginbutton不被select，并将前导，尾部和底部约束设置为零。 确保底部约束与您的视图控制器的视图相关。 然后，将Update Framesbutton更改为“容器中的所有框架”。 你现在可以点击Add 3 Constraintsbutton。

你的堆栈视图现在被设置。

进一步说明：

如果你不需要你的彩色视图宽度来匹配你的button宽度，你可以只用UIButtonsbuild立一个堆栈视图，只需在Attribute inspector为你的堆栈视图添加空格。 但是，您将不得不在堆栈视图后面添加背景颜色。 苹果在UIKit框架参考中声明 ：

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

---

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

• 一个有着色的视图，依靠embedded的UIButton内在的内容大小为其高度，
• 一个带有彩色视图和UIButton “等宽和高”约束，
• 一个有色的意见和自己的身高限制，
• 一个没有彩色的意见，但与间距，embedded彩色视图内。

你可以在这个GitHub仓库中find这个项目。

Answer 3

iOS 9有一个名为UIStackView的新UIKit类。 这是在水平或垂直堆放视图非常有用，就像你想要的方式。 你应该看看这个教程： Raywenderlich：UIStackView教程

Answer 4

select所有button，然后在Xcode的Pin菜单中

1. 通过select红线到所选视图的右侧最近邻居，从左上angular到右上angular创build一个水平约束
2. 通过select所选视图的左侧最近邻居的红线，从右上angular视图到左上angular视图创build一个水平约束
3. 通过select红线到所选视图的顶端最近邻居，从顶视图创build垂直约束
4. select“高度”，“等宽”旁边的checkbox，然后单击“ 添加22约束 ”