Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two column UICollectionView with header

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.

like image 283
Brandon Avatar asked Jul 16 '15 20:07

Brandon


1 Answers

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.

enter image description here

like image 163
Oren Avatar answered Oct 13 '22 00:10

Oren