创建具有自动布局约束的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.请看我的其他答案.

iOS 8或更早版本

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

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

如果更改名称,可能需要关闭文件(菜单栏>文件>关闭"Main.storyboard")并重新打开它以使所有内容都正确更新.

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

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

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

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

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

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

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

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

使用"助理"编辑器中的"预览"检查结果:

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

Answer 2

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

这是一个演示.我将从九个图像视图开始:

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

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

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

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