如何使 Collection View Cells 的内容在单元格中排列

How to make UICollectionViewCells with content lined up across cells

我有一个使用流布局的 UICollectionView,它是水平滚动的。在每个单元格中,我有五个子视图(标签和图像视图)。我有一组模型 objects,每个单元格一个 object,其中包含要在每个单元格的每个子视图中显示的数据。

有些项目可以比其他项目包含更多内容(一些标签将包含更多文本),但我希望所有单元格的高度相同。我也想要它,以便每个子视图的顶部与其他单元格中同一子视图的顶部对齐。如果所有模型 object 的其中一个字段的值为 nil,则该字段的子视图应排除在每个单元格之外。

例如,我有下图,其中显示了三个单元格和每个单元格中的子视图。对于这个例子,所有的单元格都有子视图 1 的数据,所以它显示在所有的单元格中。但是只有前两个单元格有子视图 2 的数据,所以它只显示在那些单元格中。同样,子视图 3 仅显示在第一个单元格中,因为这是唯一具有该子视图数据的单元格。现在对于子视图 4,none 个单元格有它的数据,因此它被完全跳过并且没有 space 占用任何单元格来呈现它。相反,子视图 5 呈现在通常呈现子视图 4 的位置,并且它只在第三个单元格中,因为只有那个单元格有它的数据。

我还在子视图之间添加了虚线,表明它们应该跨单元格排列。

问题

所以我很好奇,考虑到这些要求,执行此类操作的最佳方法是什么。这可以使用 AutoLayout 完成还是我需要手动布局这些子视图?

目前我能想到的唯一方法是遍历所有模型 objects,尝试计算出每个子视图的高度,并基本上跟踪每个子视图的最高高度.如果没有单元格包含特定子视图的数据,则该子视图的高度将为零。

接下来,我会将这些高度转换为每个子视图的计算偏移量,其中计算的偏移量将是其上方子视图的高度与每个子视图之间的间距之和。

然后,我会尝试手动布置这些,我想,将每个子视图的框架设置为某个宽度(不确定如何计算每个子视图的最佳宽度)和垂直位置等于该子视图的计算偏移量。或者我想我也可以在字段上的顶部约束等于每个子视图的计算偏移量的情况下执行 AutoLayout,但是这样效率低吗?

然后我猜每个单元格的高度将只是最后一个项目的计算偏移量加上它的高度加上到单元格底部的间距。那么我会取所有单元格的最大高度并将所有单元格设置为相同的高度。

但我很好奇是否有更好的方法来执行此操作,或者是否有任何我忽略的可以简化事情的方法。我还希望它尽可能高效,因为集合视图中最多可以包含 100 个项目。

您需要遍历数据,计算每个项目的“最大高度”。

我建议将您的 5 个“视图”放在垂直堆栈视图中。

当您遍历数据时,获取 5 个视图中每个视图的最大高度。然后,当您在每个单元格中设置数据时,为 5 个视图中的每一个设置高度约束(或者,如果所有数据项中的视图均为 nil,则设置一个隐藏视图)。

然后将您的集合视图的高度设置为适合所有视图加上间距所需的高度。