【发布时间】：2017-03-11 10:05:36
【问题描述】：
请告知我应该如何使用 Xcode 的自动布局来实现以下布局？
这里的想法是redView 和所有blueViews 都是等间距的完美正方形。
我只能使用 redView 和 2 个垂直的 blueView 创建工作版本，而没有底部的 3 个 blueViews。
【问题讨论】：
标签： ios xcode autolayout interface-builder
【发布时间】：2017-03-11 10:05:36
【问题描述】：
这是我的处理方法。
- 首先创建黄色的大方块。给它一个纵横比
1:1。添加一个约束使其在视图中水平居中。给它前缘和上缘约束。 - 添加视图
B。给它一个纵横比1:1。将其与黄色方块的上边缘和后边缘对齐。 - 添加视图
C。将它与黄色的后缘对齐，并以黄色垂直居中。添加相等宽度和相等约束以查看B。从B视图中给它一个16的垂直空间。 - 添加视图
F。将其与黄色的后缘和底部边缘对齐。给它相同的宽度和高度的视图C。 - 添加视图
E。将其与黄色的底部边缘对齐。以黄色水平居中。给F赋予相同的宽度和高度。 - 添加视图
D。将其与黄色的前缘和下缘对齐。给E赋予相同的宽度和高度。 - 添加视图
A。给它方面1:1。将其与黄色的前缘和黄色的上缘对齐。将其底边与C的底边对齐。 - 将黄色的背景颜色更改为
clear。
这样就可以了。黄色方块将针对所有设备调整大小，红色和蓝色方块将相应调整大小。您可以更改视图B 和C 之间的距离约束，并且所有间隙都会自动调整，这使得它可以轻松调整为所需的外观。
这是一个在模拟器中运行的示例。我连接了滑块以更改constant 的值，以设置视图B 和C 之间的距离。
【讨论】：
-
我赞成你的回答，因为它回答了原始问题，并且很容易调整间距:)
-
非常感谢 vacawama 和 DonMag。我设法根据您的建议做到了！
看看这是否有意义......
将所有视图嵌入到“包含”视图中（此处为黄色，但背景颜色将设置为清除）。这是控制“网格”整体大小的视图。
将黄色的宽度和高度分别设置为 320。作为起点，这允许使用漂亮的偶数：红色视图为 210x210，蓝色视图均为 100x100，视图之间有 10pt 的间隙。
将红色视图放在 x:0 y:0 - 左上角
将蓝色 1 放在 x:220 y:0 - 右上角
将蓝色 2 放在 x:220 y:110
将蓝色 3 放在 x:220 y:220
将蓝色 4 放在 x:110 y:220
最后是蓝色 5 在 x:0 y:220
当黄色“包含视图”改变大小时保持网格布局的关键是使用比例宽度、纵横比以及相对位置和大小的组合。
Red 对其父视图（黄色）的 Top 和 Leading 约束为 0 - 使其保持在左上角，纵横比为 1:1（保持正方形），以及与其父视图的比例宽度（黄色) 的 210:320。这意味着如果您将黄色视图从 320x320 更改为 160x160，例如，红色视图将被限制为 105x105。
蓝色 1 对其父视图（黄色）的顶部和尾随约束为 0 - 将其保持在右上角，纵横比为 1:1（使其保持正方形），以及与其父视图的比例宽度（黄色）的 100:320。这意味着如果您将黄色视图从 320x320 更改为 160x160，例如，蓝色 1 将被限制为 50x50。
这就是“棘手的”约束！
对于蓝色 2 到 5，将每个设置为等宽和等高到蓝色 1。
蓝色 2 在其父视图（黄色的右边缘）的尾随为 0，底部等于红色的底部。
蓝色 3 在其父视图（黄色）的尾随和底部为 0 - 保持在右下角。
Blue 4 将 Bottom of 0 获取到其父视图（黄色），并且 Trailing 等于 Trailing of Red。
蓝色 5 在其父视图（黄色）中获得领先和底部 0 - 保持在左下角。
包含黄色的视图应具有 1:1 的比例以使其保持正方形，然后是正常的位置和宽度约束。
您可以在此处查看实际的故事板：https://github.com/DonMag/ScratchPad（盒子网格示例）
【讨论】：
-
我对你的回答投了赞成票，因为我认为这是在所有设备上保持相同外观的好方法。