UICollectionView: Customize UICollectionViewFlowLayout headers (multiple headers and header position)

Question

I would like to convert my current table view based data grids to the new UICollectionView classes.

This is how my current grids look like:

My grid has two headers:

• year (2006a, 2007a, etc) and
• type ("Revenue", "EBITDA", etc).

From Apple's documentation I understand that I would need to subclass FlowLayout to get two headers (Apple Documentation) and, in particular, override layoutAttributesForSupplementaryViewOfKind:atIndexPath: to support new supplementary views (headers).

However, I did not find any sample or tutorial on how to do this. As I am stuck here, I would appreciate if you could point me to the right direction in coding this correctly.

Thank you.

Answer 1

I posted an example here an how to support decoration views. It would be similar for supplementary views, with the following differences:

• Instead of registering the NIB or class on the layout you would call – registerClass:forSupplementaryViewOfKind:withReuseIdentifier: on the UICollectionView instance
• In your view controller for the UICollectionView you would implement – collectionView:viewForSupplementaryElementOfKind:atIndexPath: similar to the method for normal cells
• In the layout subclass you need to implement the following method – layoutAttributesForSupplementaryViewOfKind:atIndexPath: to position the supplementary views at their positions
• In the – layoutAttributesForElementsInRect: make sure to add all the supplementary views you want (similar to the decoration view in the example I posted)

I don't have access to my example code right now, but I will post it later.