ios – 创建具有自动布局约束的3×3网格

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

iOS 8或更早版本

可以通过多种方法创建具有约束的布局.这是一个.

首先,提示：您可以在文档大纲中命名您的视图.这使得更容易理解哪些视图是哪些和您的约束相关联的.要命名视图,请在大纲中单击它,按返回键,然后键入名称.那么大纲可以如下所示：

如果更改名称,可能需要关闭文件(菜单栏> File>关闭“Main.storyboard”),然后重新打开以使所有更新都正确.

(请注意,这些名称仅在编辑故事板时使用,在运行时无法获取这些名称.)

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

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

重复上一行的其他两个视图.

接下来,将底行的顶边和底边限制为常数为零的最近邻.再次,如果你想限制到超级视图的底部边缘,你必须一次做一个.例：

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

注意,您不必为中间行创建顶层约束,因为顶部和底部行现在被限制到中间行.

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

在助理编辑器中使用预览查看结果：

如果您忘记任何限制,文档大纲将显示右上角的红色箭头.点击它可以帮助您识别缺少的内容.例如,如果您忘记将顶部和底部的约束添加到顶部中心视图,则会收到如下错误：