如何使用约束解决此自动布局“难题”？

Question

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

我的问题是我无法弄清楚如何将粉红色框保持在其单元格中心，并且随着布局在任何方向上增长，粉红色框之间的绿线连接起来。 只有这两个视图的AutoSizing.xib可以在这里找到：https://dl.dropboxusercontent.com/u/6979623/AutoSizing.xib

Answer 1

有两种方法可以将粉红色框保持在超视图的四个象限内：

1. 您可以添加四个不可见的视图，甚至可以分割此主视图的四个象限（使用约束将它们固定到各自的角上，使用另一组约束使它们等于宽度和高度）。如果我要在VFL中表示它（仅仅因为它是表示所有这些约束的简洁方式），它可能是这样的：

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

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

2. 您可以添加使用乘数的中心约束，以在共享的超级视图中偏移这些粉红色方块。 Interface Builder最近才获得乘数支持，在我看来它并不是非常可靠，所以当我想使用乘数时，我经常会回归以编程方式添加它们。

一旦正确布置了粉红色的盒子，它们之间的绿线就分别固定为水平或垂直线的前/后或顶/下。将其与固定宽度和中心对齐相结合，您就完成了。最重要的是，如上所述，处理粉红色盒子的位置，然后绿线的创建变得非常容易。