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

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最近才获得乘数支持,在我看来它并不是非常可靠的,所以当我想使用乘数时,我经常会回归以编程方式添加它们.

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