使用自动布局创建一个大正方形的网格

Question

请告知我应该如何使用Xcode的自动布局实现以下布局？

这里的想法是redView和所有blueViews都是具有相等间距的完美正方形。

我只能使用redView和2垂直blueView创建工作版本而不使用底部3 blueViews。

Answer 1

以下是我接近它的方法。

1. 首先制作大黄色方块。给它一个宽高比1:1。添加约束以使其在视图中水平居中。给它前沿和顶边约束。
2. 添加视图B。给它一个宽高比1:1。将其与黄色正方形的上边缘和后缘对齐。
3. 添加视图C。将其与黄色的后缘对齐，并将其垂直居中，呈黄色。添加相等宽度和相等约束以查看B。从视图16为其提供B的垂直空间。
4. 添加视图F。将其与黄色的后缘和下缘对齐。赋予它相等的视图宽度和高度C。
5. 添加视图E。将其与黄色的下边缘对齐。将其水平放置在黄色中心。将它的宽度和高度设置为F。
6. 添加视图D。将其与黄色的前缘和下缘对齐。将它的宽度和高度设置为E。
7. 添加视图A。给它方面1:1。将其与黄色前缘和黄色上缘对齐。将其底边与C的底边对齐。
8. 将黄色的背景颜色更改为clear。

那就行了。黄色方块将调整所有设备的大小，红色和蓝色方块将相应调整大小。您可以更改视图B和C之间的距离约束，并且所有间隙都会自动调整，这样可以轻松调整所需的外观。

这是在模拟器中运行的示例。我连接滑块以更改constant的值，用于约束设置视图B和C之间的距离。

Answer 2

看看这是否有意义......

https://github.com/DonMag/ScratchPad

将所有观点嵌入＆＃34;包含＆＃34;视图（此处为黄色，但背景颜色将设置为清除）。这个视图将控制＆＃34;网格的整体大小。＆＃34;

将黄色宽度和高度分别设置为320.作为起点，这允许漂亮的偶数：红色视图为210x210，蓝色视图为100x100，视图之间间隔为10pt。

• 将红色视图放在x：0 y：0 - 左上角

• 将蓝色1放在x：220 y：0 - 右上角

• 将蓝色2放在x：220 y：110

• 将Blue 3置于x：220 y：220

• 将蓝色4放在x：110 y：220

• 最后Blue 5 at x：0 y：220

黄色＆＃34;包含视图＆＃34;时保持网格布局的关键。更改大小是使用比例宽度，宽高比和相对位置和大小的组合。

• Red将Top和Leading约束0设置为其superview（黄色） - 保持左上角，1：1的宽高比（保持正方形），以及其超视图的比例宽度（黄色）210：320。这意味着，如果您将黄色视图从320x320更改为160x160，红色视图将被限制为105x105。

• Blue 1将Top和Trailing约束0设置为其superview（黄色） - 保持其右上角，1：1的纵横比（保持正方形），以及其superview的比例宽度（黄色）100：320。这意味着如果您将黄色视图从320x320更改为160x160，例如，蓝色1将被限制为50x50。

那是＆＃34;棘手＆＃34;约束！

• 对于Blue 2至5，将每个设置为Equal Width，将Equal Height设置为Blue 1.

• 蓝色2的尾部为0，超级视图（黄色的右边缘），底部等于红色的底部。

• 蓝色3的尾部和底部为0到其超级视图（黄色） - 保持在右下角。

• 蓝色4的底部为0的底部为超级视图（黄色），尾部等于尾随的红色。

• 蓝色5获得领先和0的底部到其超级视图（黄色） - 保持在左下角。

含黄色的视图应该具有1：1的比例以保持正方形，然后是正常的位置和宽度约束。

您可以在此处查看实际的故事板：{{3}}（Grid Of Boxes示例）