CODEWITHSUNDEEP
uicollectionviewuicollectionviewcelluicollectionviewlayoutuicollectionreusableview
Brandon
Brandon

Reputation: 3136

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.

Upvotes: 8

Views: 879

Answers (1)

Oren
Oren

Reputation: 5103

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

Upvotes: 2

Related Questions