Two column UICollectionView with header

Question

I have a layout that has two columns side by side. Is there a simple way to do this using a single UICollectionView? The only requirements are that the solution must work for iOS 8 and the cells must stack vertically in each column like this:

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

The stacked Cs demonstrate that the cells in the left and right columns can be different heights, so it's not enough to just paint them left, right, left, right.

Couldn't you just make a CollectionView with 2 columns and then make the first cell take up all the space using the Delegate method: `collectionView:layout:sizeForItemAtIndexPath:` and make the second cell (next to the first one) with a width of 0? — Black Magic, Jul 24 '15 at 16:58
I could do that, but wouldn't it potentially make big vertical gaps between cells in the same column if, say for example, C and E where different heights? (I just updated the layout above to reflect that). — Brandon, Jul 24 '15 at 17:45
I use this library for my layout, if I understand your question correctly: https://github.com/chiahsien/CHTCollectionViewWaterfallLayout — Black Magic, Jul 24 '15 at 19:58

score 2 · Answer 1 · answered Jul 28 '15 at 20:56

This is actually pretty straightforward using a UICollectionView with flow layout. Since each cell can have a dynamic height, the only thing you need to require is that each cell has a width of 160 (or half the collection view width). Then implement collectionView:layout:sizeForItemAtIndexPath: so that each item can return it's appropriate height.

Since each cell has a dynamic height though, you could end up with one column a lot longer than another. If you also want equal column heights, then you'll want to shuffle the order of your list in such a way so that the height for the first half of items is approx the height of the other half.

Two column UICollectionView with header

1 Answers1