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

【问题标题】：How to add Equal Spacing and equal width for button in iOS Auto layout如何在 iOS 自动布局中为按钮添加等间距和等宽
【发布时间】：2015-12-28 00:08:52
【问题描述】：

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

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

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

谁能帮帮我？寻求帮助。提前致谢。

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

检查这张图片并做出如下约束...

结果：-不同尺寸的预览

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

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

【讨论】：

感谢您的帮助。我需要澄清一下。您是否在按钮 (1-6) 之间添加了 5 个视图？
@EICaptainv2.0 好答案！我有一个问题，为什么在使用 stackview 时视图没有获得完美的正方形？我发布了这个问题，但还没有答案stackoverflow.com/questions/38540494/…
完美解决100分给你
UIstackView 有一个间距选项，为什么不使用呢？并且您正在按钮之间添加额外的视图？
@KarimIhab 如果您不想使用具有单独间距的 sizeclass ，这只是简单的演示......这将根据视图调整间距

【解决方案3】：

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

下面一步一步使用Storyboard。

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

目前，堆栈视图的高度取决于按钮的内在内容大小。如果你没问题，你可以去第 5 步。但是，如果需要，你可以给你的堆栈视图一个高度限制。选择您的堆栈视图，单击Pin 按钮，检查Height 按钮，添加所需的值并单击Add 1 Constraint 按钮。

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

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

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

您的堆栈视图现已设置。

补充说明：

如果您不需要彩色视图的宽度来匹配按钮的宽度，则可以仅使用 UIButtons 构建堆栈视图，并在 Attribute inspector 中简单地为堆栈视图添加间距。但是，您必须找到一种在堆栈视图后面添加背景颜色的方法。苹果在UIKit Framework Reference：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

iOS 9 有一个名为 UIStackView 的新 UIKit 类。它非常有助于以您想要的方式水平或垂直堆叠视图。你应该看看这个教程：Raywenderlich: UIStackView Tutorial

【讨论】：