创建具有自动布局约束的 3x3 网格
Creating a 3x3 grid with auto layout constraints
Xcode 表示没有布局问题，但正如您所见，确实存在。我已经尝试了一切。 Apple 文档、YouTube、Google 等。看来我做对了，但也许我做事的顺序或其他原因导致了这些问题。在尝试了所有方法后，我终于让 Xcode add missing constraints 成为迄今为止最好的结果。我在 9 个 UIImages 上有 9 个按钮，所以我必须对按钮做同样的事情，就像我对 UIImages 做的一样。我暂时将 UIImages 放在按钮的顶部，这样我可以更轻松地看到我在做什么。我有2个截图。请指教。
开始
这是在使用 Xcode 的 add missing constraints 选项之后。
有点我想要的，但没有雪茄。
iOS 9 或更高版本
如果您的部署目标是 iOS 9 或更高版本，则使用 UIStackView 有一个更简单的解决方案。请参阅 。
iOS 8 或更早
您可以通过多种方式创建带有约束的布局。这是一个。
首先，提示：您可以在文档大纲中命名您的观点。这使得更容易理解哪些视图是哪些以及您的约束连接到什么。要命名视图，请在大纲中单击它，按 return，然后键入名称。那么大纲可以是这样的：
如果更改名称，您可能需要关闭文件（菜单栏 > 文件 > 关闭“Main.storyboard”）并重新打开它以使所有内容正确更新。
（请注意，这些名称仅在编辑故事板时使用。无法在运行时获取这些名称。）
好的，现在创建约束。首先将所有 left-right 边约束到具有常数值零的最近邻居：
接下来，将顶行的顶部和底部边缘限制为常数值为零的最近邻域。如果你想约束到父视图的顶部边缘，而不是顶部布局指南，你必须一个一个地做。以下是第一个的操作方法：
对顶行中的其他两个视图重复上述操作。
接下来，将底行的顶部和底部边缘限制为常数值为零的最近邻域。同样，如果你想限制在父视图的底部边缘，你必须一次一个地做。示例：
对底行中的其他两个视图重复上述操作。
请注意，您 不必 为中间行创建 top-bottom 约束，因为顶部和底部行现在被限制到中间行。
最后，select 您的所有视图并创建 equal-width 和 equal-height 约束：
在辅助编辑器中使用预览查看结果：
如果您忘记了任何约束，文档大纲将在右上角显示一个红色箭头。单击它可帮助识别缺少的内容。例如，如果您忘记将顶部和底部约束添加到 top-center 视图，则会出现如下错误：
如果您的目标是 iOS 9 或更高版本， 您可以使用堆栈视图更轻松地制作任何尺寸的网格。为每一行制作一个水平堆栈视图，然后将所有水平堆栈视图放在一个垂直堆栈视图中。将所有堆栈视图（水平和垂直）的 Distribution 设置为 Fill Equally。然后在垂直堆栈视图上设置约束以控制网格的整体大小。
这是一个演示。我将从九个图像视图开始：
首先，我将创建三个水平堆栈视图，一个用于网格的每一行。由于我已经手动将图像视图排列成粗略的网格形状，Xcode 足够聪明，可以自动使用水平堆栈视图：
接下来我将 select 三个水平堆栈视图并同时将所有三个的 Distribution 设置为 Fill Equally:
现在我将把所有的水平堆栈视图放到一个垂直堆栈视图中，并将垂直堆栈视图的分布设置为均匀填充。同样，由于水平堆栈视图已经大致垂直布局，Xcode 足够聪明，可以自动使用垂直堆栈视图：
最后，我将对垂直堆栈视图施加约束以使其填满其容器（状态栏区域除外）。然后我会告诉 Xcode 更新所有视图的框架，我将得到一个完美的 3x3 网格，几乎不需要任何工作：
Xcode 表示没有布局问题，但正如您所见，确实存在。我已经尝试了一切。 Apple 文档、YouTube、Google 等。看来我做对了，但也许我做事的顺序或其他原因导致了这些问题。在尝试了所有方法后，我终于让 Xcode add missing constraints 成为迄今为止最好的结果。我在 9 个 UIImages 上有 9 个按钮，所以我必须对按钮做同样的事情，就像我对 UIImages 做的一样。我暂时将 UIImages 放在按钮的顶部，这样我可以更轻松地看到我在做什么。我有2个截图。请指教。
开始
这是在使用 Xcode 的 add missing constraints 选项之后。
有点我想要的，但没有雪茄。
iOS 9 或更高版本
如果您的部署目标是 iOS 9 或更高版本，则使用 UIStackView 有一个更简单的解决方案。请参阅
iOS 8 或更早
您可以通过多种方式创建带有约束的布局。这是一个。
首先，提示：您可以在文档大纲中命名您的观点。这使得更容易理解哪些视图是哪些以及您的约束连接到什么。要命名视图，请在大纲中单击它，按 return，然后键入名称。那么大纲可以是这样的：
如果更改名称，您可能需要关闭文件（菜单栏 > 文件 > 关闭“Main.storyboard”）并重新打开它以使所有内容正确更新。
（请注意，这些名称仅在编辑故事板时使用。无法在运行时获取这些名称。）
好的，现在创建约束。首先将所有 left-right 边约束到具有常数值零的最近邻居：
接下来，将顶行的顶部和底部边缘限制为常数值为零的最近邻域。如果你想约束到父视图的顶部边缘，而不是顶部布局指南，你必须一个一个地做。以下是第一个的操作方法：
对顶行中的其他两个视图重复上述操作。
接下来，将底行的顶部和底部边缘限制为常数值为零的最近邻域。同样，如果你想限制在父视图的底部边缘，你必须一次一个地做。示例：
对底行中的其他两个视图重复上述操作。
请注意，您 不必 为中间行创建 top-bottom 约束，因为顶部和底部行现在被限制到中间行。
最后，select 您的所有视图并创建 equal-width 和 equal-height 约束：
在辅助编辑器中使用预览查看结果：
如果您忘记了任何约束，文档大纲将在右上角显示一个红色箭头。单击它可帮助识别缺少的内容。例如，如果您忘记将顶部和底部约束添加到 top-center 视图，则会出现如下错误：
如果您的目标是 iOS 9 或更高版本， 您可以使用堆栈视图更轻松地制作任何尺寸的网格。为每一行制作一个水平堆栈视图，然后将所有水平堆栈视图放在一个垂直堆栈视图中。将所有堆栈视图（水平和垂直）的 Distribution 设置为 Fill Equally。然后在垂直堆栈视图上设置约束以控制网格的整体大小。
这是一个演示。我将从九个图像视图开始：
首先，我将创建三个水平堆栈视图，一个用于网格的每一行。由于我已经手动将图像视图排列成粗略的网格形状，Xcode 足够聪明，可以自动使用水平堆栈视图：
接下来我将 select 三个水平堆栈视图并同时将所有三个的 Distribution 设置为 Fill Equally:
现在我将把所有的水平堆栈视图放到一个垂直堆栈视图中，并将垂直堆栈视图的分布设置为均匀填充。同样，由于水平堆栈视图已经大致垂直布局，Xcode 足够聪明，可以自动使用垂直堆栈视图：
最后，我将对垂直堆栈视图施加约束以使其填满其容器（状态栏区域除外）。然后我会告诉 Xcode 更新所有视图的框架，我将得到一个完美的 3x3 网格，几乎不需要任何工作：