带有标题的两列 UICollectionView

Posted 2023-03-10

【中文标题】带有标题的两列 UICollectionView

【英文标题】：Two column UICollectionView with header

【发布时间】：2015-07-16 20:31:46

【问题描述】：

我有一个并排有两列的布局。有没有一种简单的方法可以使用单个 UICollectionView 来做到这一点？唯一的要求是该解决方案必须适用于 ios 8，并且单元格必须在每一列中垂直堆叠，如下所示：

   -----------------
   |       A       |
   |       B       |
   -----------------
   |   C   |   E   |
   |   C   |   F   |
   |   D   |       |
   |   E   |       |
   -----------------

堆叠的Cs表明左右列中的单元格可以是不同的高度，因此仅将它们绘制为左、右、左、右是不够的。

【问题讨论】：

你不能只制作一个包含 2 列的 CollectionView，然后使用 Delegate 方法使第一个单元格占用所有空间：collectionView:layout:sizeForItemAtIndexPath: 并制作第二个单元格（在第一个单元格旁边）宽度为 0？

我可以这样做，但是如果 C 和 E 的高度不同，它不会在同一列中的单元格之间产生很大的垂直间隙吗？ （我刚刚更新了上面的布局以反映这一点）。

如果我正确理解您的问题，我会使用这个库进行布局：github.com/chiahsien/CHTCollectionViewWaterfallLayout

你最终解决了吗？

【参考方案1】：

使用带有流布局的UICollectionView 实际上非常简单。由于每个单元格都可以具有动态高度，因此您唯一需要的是每个单元格的宽度为 160（或集合视图宽度的一半）。然后实现collectionView:layout:sizeForItemAtIndexPath:，以便每个项目都可以返回适当的高度。

由于每个单元格都有一个动态高度，您最终可能会得到一列比另一列长很多。如果您还想要相等的列高，那么您需要以这样的方式打乱列表的顺序，以便前半部分的高度大约是另一半的高度。