使用自动布局将视图浮动到第二行

Posted 2023-02-27

【中文标题】使用自动布局将视图浮动到第二行

【英文标题】：Floating view into second row with autolayout

【发布时间】：2016-05-10 18:40:43

【问题描述】：

我可以在情节提要视图控制器视图上设置约束，以便在有足够的水平空间时，我将拥有三个并排的视图。在其他情况下，它会将一个视图“浮动”到下一行？

就像这个例子：

足够的空间

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

也许堆栈视图可以在这里提供帮助？

【问题讨论】：

覆盖这个方法 systemLayoutSizeFittingSize 并遵循这个：- programmingcrew.in/2016/06/…

【参考方案1】：

没有理由期望自动布局系统能够做到这一点，也不能。

您要在此处使用collection view (UICollectionView) 并让您的每个视图成为集合视图中的一个单元格。事实上，如果您查看您的视图，它们看起来更像是可重用的视图，其中每个视图都有一个图标、一个标题和一个详细信息文本。可以设置一个集合视图，将单元格并排放置，直到没有更多空间，然后在下方添加单元格，依此类推。

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

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

【讨论】：

好吧。我就是这样做的。对可重用单元格使用内容拥抱/压缩约束的组合。然而，它并不总是如我所愿。当只有一个适合行时，集合视图将我的单元格居中。

集合视图非常健壮。很可能您没有正确实现布局。我已经用一个示例布局更新了我的答案，该布局应该实现您所需要的。

我知道怎么做。但是我可以只用约束做同样的事情吗？无需手动计算布局属性？

有可能。从 ios 8 开始，当使用自动布局定义单元格时，集合视图单元格可以计算自己的属性。所以设置你的单元格，然后让系统找出属性。见这里：shinobicontrols.com/blog/…

我得到的解决方案几乎/（或可能）与您链接的博客中描述的解决方案相同。一切都差不多好了。但是，如果只有单个单元格的空间，我想避免居中。就像 shinobi 博客示例中的“点击和迫击炮”一样。

【参考方案2】：

否。无法在情节提要中设置视图和约束，如果它们不适合同一行，则它们会自动浮动到新行中。

（在我看来，这是自动布局系统的一大弱点。）

原因在于约束的概念：从数学上讲，它们表示线性方程，通常独立于 x 和 y 维度。唯一的例外是将视图的宽度与该（或另一个）视图的高度连接起来的纵横比约束。但我想不出如何在需要时使用纵横比约束将视图分成新行。

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

（堆栈视图无济于事，因为它们也只适用于一个维度：x 或 y。）

最近，我需要与您描述的相同的浮动行为，并创建了 UIView 的 FloatingContainerView 子类。我对其进行了概括，以便您可以将其用于任何类型的视图并将其翻译成 Swift。

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

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

【讨论】：

看起来很合理。我很想看看你到目前为止做了什么。只是为了强调...您是如何处理视图的“浮动”方面的？

为什么要重新发明***，既然您已经对这个目的（以及许多其他人）有了一个概括的看法 - UICollectionView？

这个想法是创建一个容器视图，在其中放置所有应该浮动的视图，并为其提供一个自定义类FloatingContainerView。设置其translatesAutoresizingMaskIntoConstraint = NO，以便您可以使用自动布局并将其与情节提要中的约束连接。在您的自定义类中，您保留对数组中所有浮动视图的引用。在 layoutSubviews 方法中，您遍历所有这些视图，为每个视图设置 translatesAutoresizingMaskIntoConstraint = YES 并手动定位它们。您还需要覆盖 intrinsicContentSize。

是的，但实施替代方案需要更长的时间。您可以做的是一些自定义视图，其中包含作为子视图的集合视图，并实现所需的所有内容。然后对外界来说，它就像一个正常的视图一样工作。这将是两全其美的，实际上实现了多少系统视图。 （日期选择器、警报控制器等）

@Fishman：我按照承诺将我的FloatingContainerView 课程放在了 GitHub 上。 :) 见上面的链接。以防万一收藏视图对您不起作用。 （但是，正如我在上面的评论中所述，我强烈建议在您的情况下使用集合视图。Leo 是对的。）