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

Creating a 3x3 grid with auto layout constraints

提问by rob mayoff

Xcode has said there are no layout issues but as you can see there is. I have tried everything. Apple docs, YouTube, Google, etc. It seems I am doing it right however maybe the order I'm doing things in or something else is causing these issues. After trying everything I finally let Xcode add missing constraintsand it's the best result so far. I have 9 buttons onto of 9 UIImages so I have to do the same thing I do to the buttons as I do with the UIImages. I have temporarily placed the UIImages on top of the buttons so I can see what I'm doing more easily. I've got 2 screenshots. Please advise.

Xcode 表示没有布局问题，但正如您所看到的。我已经尝试了一切。Apple 文档、YouTube、Google 等。似乎我做得对，但也许我做事的顺序或其他原因导致了这些问题。在尝试了一切之后，我终于让 Xcode 了add missing constraints，这是迄今为止最好的结果。我在 9 个 UIImages 上有 9 个按钮，所以我必须对按钮执行与处理 UIImages 相同的操作。我暂时将 UIImages 放在按钮的顶部，这样我就可以更轻松地看到我在做什么。我有2张截图。请指教。

Beginning

开始

This is after using Xcode's add missing constraintsoption. Sorta what I want but no cigar.

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

回答by rob mayoff

iOS 9 or later

iOS 9 或更高版本

If your deployment target is iOS 9 or later, there is a simpler solution using UIStackView. Please see my other answer.

如果您的部署目标是 iOS 9 或更高版本，则使用UIStackView. 请看我的另一个回答。

iOS 8 or earlier

iOS 8 或更早版本

There are a number of ways you could create this layout with constraints. Here's one.

有多种方法可以创建带有约束的布局。这是一个。

First, a tip: you can name your views in the document outline. This makes it much easier to understand which views are which and what your constraints are connected to. To name a view, click it in the outline, press return, and type the name. Then the outline can look like this:

首先，提示：您可以在文档大纲中命名您的视图。这使得了解哪些视图是哪些以及您的约束所连接的内容变得更加容易。要命名视图，请在大纲中单击它，按回车键，然后键入名称。然后大纲可以是这样的：

If you change the names, you may need to close the file (menu bar > File > Close “Main.storyboard”) and reopen it to make everything update properly.

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

(Note that these names are only used when editing the storyboard. There is no way to get these names at runtime.)

（请注意，这些名称仅在编辑情节提要时使用。在运行时无法获取这些名称。）

OK, now to create the constraints. Start by constraining all the left-right edges to nearest neighbor with constant value zero:

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

Next, constrain the top and bottom edges of the top row to nearest neighbor with constant value zero. If you want to constrain to the top edge of the superview, rather than to the top layout guide, you have to do them one by one. Here's how to do the first one:

接下来，将顶行的顶部和底部边缘约束为常数值为零的最近邻。如果你想约束到superview的顶部边缘，而不是顶部布局指南，你必须一一进行。这是第一个的方法：

Repeat for the other two views in the top row.

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

Next, constrain the top and bottom edges of the bottom row to nearest neighbor with constant value zero. Again, if you want to constrain to the bottom edge of the superview, you have to do them one at a time. Example:

接下来，将底行的顶部和底部边缘约束为常数值为零的最近邻。同样，如果你想限制在超级视图的底部边缘，你必须一次做一个。例子：

Repeat for the other two views in the bottom row.

对底行中的其他两个视图重复此操作。

Note that you don'thave to create top-bottom constraints for the middle row, because the top and bottom rows are now constrained to the middle row.

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

Finally, select all your views and create equal-width and equal-height constraints:

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

Check out the result using Preview in the Assistant editor:

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

If you forget any constraints, the document outline will show a red arrow at the top right. Click it for some help identifying what's missing. For example, if you forget to add the top and bottom constraints to the top-center view, you get an error like this:

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

回答by rob mayoff

If you're targeting iOS 9 or later,you can make a grid of any dimensions much more easily using stack views. Make one horizontal stack view for each row, and then put all the horizontal stack views in a single vertical stack view. Set the Distribution of all of the stack views (both horizontal and vertical) to Fill Equally. Then set constraints on the vertical stack view to control the overall size of the grid.

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

Here's a demo. I'll start with nine image views:

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

First I'll create three horizontal stack views, one for each row of the grid. Since I've already manually arranged the image views in a rough grid shape, Xcode is smart enough to use horizontal stack views automatically:

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

Next I'll select the three horizontal stack views and set the Distribution of all three to Fill Equally at the same time:

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

Now I'll put all of the horizontal stack views into one vertical stack view, and set the vertical stack view's Distribution to Fill Equally. Again, since the horizontal stack views are already laid out roughly vertically, Xcode is smart enough to use a vertical stack view automatically:

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

Finally, I'll put constraints on the vertical stack view to make it fill its container (except for the status bar area). Then I'll tell Xcode to update the frames of all the views, and I'll have a perfect 3x3 grid with hardly any work:

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