创建具有自动布局约束的3x3网格

Question

Xcode表示没有布局问题，但正如你所看到的那样。我尝试了一切。苹果文档，YouTube，谷歌等。看来我做得对，但也许我正在做的事情或其他事情导致这些问题。在尝试了一切后，我终于让Xcode add missing constraints，这是迄今为止最好的结果。我在9个UIImages上有9个按钮，所以我必须对按钮执行与UIImages相同的操作。我暂时把UIImages放在按钮的顶部，这样我就可以更容易地看到我在做什么了。我有2个截图。请指教。

初​​

这是在使用Xcode的add missing constraints选项之后。 排序我想要的但没有雪茄。

Answer 1

iOS 9或更高版本

如果您的部署目标是iOS 9或更高版本，则使用UIStackView有一个更简单的解决方案。请参阅my other answer。

iOS 8或更早版本

您可以通过多种方式使用约束创建此布局。这是一个。

首先，提示：您可以在文档大纲中命名您的视图。这使得更容易理解哪些视图是哪些以及您的约束连接到哪些视图。要命名视图，请在大纲中单击它，按Return键，然后键入名称。然后大纲可能如下所示：

如果您更改名称，则可能需要关闭文件（菜单栏＆gt;文件＆gt;关闭“Main.storyboard”）并重新打开它以使所有内容都正确更新。

（请注意，这些名称仅在编辑故事板时使用。无法在运行时获取这些名称。）

好的，现在要创建约束。首先将所有左右边缘约束到具有常数值零的最近邻居：

接下来，将顶行的顶部和底部边缘约束为具有常数值零的最近邻居。如果要约束到超级视图的顶部边缘，而不是顶部布局指南，则必须逐个执行。以下是第一个如何做的事情：

对顶行中的其他两个视图重复。

接下来，将底行的顶部和底部边缘约束到具有常数值零的最近邻居。同样，如果要约束到superview的底边，则必须一次执行一个。例如：

重复底行中的其他两个视图。

请注意，您不必须为中间行创建上下限制，因为顶行和底行现在都被约束到中间行。

最后，选择所有视图并创建等宽和等高约束：

使用“助理”编辑器中的“预览”检查结果：

如果您忘记了任何限制，文档大纲将在右上方显示一个红色箭头。点击它以获取一些帮助，以确定缺少的内容。例如，如果您忘记将顶部和底部约束添加到顶部中心视图，则会出现如下错误：

Answer 2

如果您要定位iOS 9或更高版本，则可以使用堆栈视图更轻松地制作任意尺寸的网格。为每一行创建一个水平堆栈视图，然后将所有水平堆栈视图放在一个垂直堆栈视图中。将所有堆栈视图（水平和垂直）的分布设置为“均匀填充”。然后在垂直堆栈视图上设置约束以控制网格的整体大小。

这是一个演示。我将从九个图像视图开始：

首先，我将创建三个水平堆栈视图，每个网格对应一行。由于我已经手动将图像视图排列成粗糙的网格形状，因此Xcode足够智能，可以自动使用水平堆栈视图：

接下来，我将选择三个水平堆栈视图，并将所有三个的分布设置为同时填充：

现在我将所有水平堆栈视图放入一个垂直堆栈视图中，并将垂直堆栈视图的分布设置为同等填充。同样，由于水平堆栈视图已经大致垂直布局，Xcode足够智能，可以自动使用垂直堆栈视图：

最后，我将对垂直堆栈视图设置约束以使其填充其容器（状态栏区域除外）。然后我告诉Xcode更新所有视图的帧，我将拥有一个完美的3x3网格，几乎没有任何工作：