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

Posted 2023-03-11

【中文标题】使用自动布局创建一个大正方形的网格

【英文标题】：Creating grid with one big square using auto layout

【发布时间】：2017-03-11 10:05:36

【问题描述】：

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

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

我只能使用 redView 和 2 个垂直的 blueView 创建工作版本，而没有底部的 3 个 blueViews。

【参考方案1】：

---

这是我的处理方法。

首先创建黄色的大方块。给它一个纵横比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。我设法根据您的建议做到了！

【参考方案2】：

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

将所有视图嵌入到“包含”视图中（此处为黄色，但背景颜色将设置为清除）。这是控制“网格”整体大小的视图。

将黄色的宽度和高度分别设置为 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（盒子网格示例）

【讨论】：

我对你的回答投了赞成票，因为我认为这是在所有设备上保持相同外观的好方法。