如何解决这个带有约束的自动布局“难题”？

Posted 2023-03-15

【中文标题】如何解决这个带有约束的自动布局“难题”？

【英文标题】：How do I solve this Auto Layout "puzzle" with constraints?

【发布时间】：2014-11-02 01:25:50

【问题描述】：

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

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

【参考方案1】：

有两种方法可以让粉色框在超级视图的四个象限内居中：

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

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

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

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

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

【讨论】：

作为第三种选择，如何在主视图中心放置一个不可见的框（宽度和高度等于父视图的一半），并将粉红色的框固定在其角落？