使用autolayout将视图浮动到第二行

Question

我可以在情节提要视图控制器视图上设置约束，这样当有足够的水平空间时，我将有三个视图紧挨着另一个视图。在其他情况下，它会将其中一个视图“浮动”到下一行？

就像这个例子一样：

1. 足够的空间

2. 导致第三个视图“浮动”的文本

也许堆栈视图可以帮到这里？

Answer 1

没有理由期望自动布局系统能够实现这一目标，也不能。

您要在此处使用的是collection view（UICollectionView），并且您的每个视图都是集合视图中的一个单元格。事实上，如果你看一下你的观点，它们看起来就是可重复使用的观点，每个观点都有一个图标，一个标题和一个细节文本。可以设置一个集合视图，将单元格放在另一个旁边，直到没有更多的空间，然后在下面添加单元格，依此类推。

然后，您可以使用自动布局将场景设置为围绕集合视图进行布局，其中当集合视图的高度增加时，其他视图将在集合视图内容下正确重新定位。

请参阅this布局作为您需要的示例。

Answer 2

否。如果故事板中的视图和约束不适合同一行，则无法自动浮动到新行中。

（在我看来，这是Autolayout系统的一大弱点。）

其原因在于约束的概念：数学上它们代表线性方程，通常独立于x和y维度。唯一的例外是宽高比约束，它将视图的宽度与该视图（或另一视图）的高度相关联。但是，如果需要，我无法想象如何使用宽高比约束将视图分解为新行。

当系统在运行时解析约束并计算视图的实际帧时，它只需求解每个维度的线性方程组（如果存在宽高比约束，则为两个维度）。将浮动视图选项添加到Autolayout系统会使整个布局过程变得更加复杂，因为您无法将该行为描述为简单的线性方程。

（堆叠视图无法提供帮助，因为它们仅适用于一个维度：x或y。）

最近，我需要您描述的完全相同的浮动行为，并创建了FloatingContainerView UIView的子类。我概括了它，所以你可以将它用于任何类型的视图并将其转换为Swift。

您现在可以在GitHub上找到它：

https://github.com/mischa-hildebrand/FloatingContainerView