ios - 如何使用约束解决此自动布局 "puzzle"？

Question

左边是布局的正常状态。右边是布局的展开状态。

我的问题是我不知道如何让粉色框在它们的单元格中居中，并且随着布局向任何方向增长，粉色框之间的绿线连接起来。
只有这两个 View 的 AutoSizing.xib 可以在这里找到:https://dl.dropboxusercontent.com/u/6979623/AutoSizing.xib

Answer 1

有两种方法可以将粉色框保持在 super View 的四个象限的中心:

您可以添加四个不可见的 View ，它们甚至可以拆分此主视图的四个象限(使用约束将它们固定到各自的角，并使用另一组约束使它们的宽度和高度相等)。如果我要在 VFL 中表示它(只是因为它是表示所有这些约束的简洁方式)，它可能类似于:

H:|[quadrant1][quadrant2(==quadrant1)]|
H:|[quadrant3(==quadrant1)][quadrant4(==quadrant1)]|
V:|[quadrant1][quadrant3(==quadrant1)]|
V:|[quadrant2(==quadrant1)][quadrant4(==quadrant1)]|

然后，您可以将粉色 View 置于这四个象限 View 的中心。

您可以添加使用乘数的中心约束来抵消它们共享的 super View 中的这些粉红色方 block 。 Interface Builder 最近才获得乘数支持，在我看来，它并不是 super 可靠，所以当我想使用乘数时，我经常回退到以编程方式添加它们。

正确布置粉红色框后，它们之间的绿线分别是水平或垂直线的固定间距前导/尾随或顶部/底部。将其与固定宽度和中心对齐相结合，您就完成了。最重要的是，如上所述，注意粉红色框的位置，然后绿色线条的创建变得非常容易。