UICollectionView Header and Footer View

Question

I'm using a UICollectionView and need a global header and footer together with section headers. Both global header and footer are supposed to scroll with the rest of the content. Basically they should work exactly like UITableView's tableHeaderView and tableFooterView properties.

From what I understand supplementary views are either above or below a specific section and decoration views are functionless. My global header and footer are supposed to have interactive elements.

I'm really pulling my hair out after trying for a couple of hours. I found a couple of nasty ways such as hacking around with contentInsets and adding subview to the collectionview. What I'm really looking for is a clean way to do this.

I'm looking forward to any advice!

This poor guy here is asking the exact same question but without any response: http://stackoverflow.com/questions/14515975/how-can-i-set-the-entire-header-view-to-uicollectionview?rq=1 — paul, Jul 17 '13 at 08:28
possible duplicate of [How to make Supplementary View float in UICollectionView as Section Headers do in UITableView plain style](http://stackoverflow.com/questions/13511733/how-to-make-supplementary-view-float-in-uicollectionview-as-section-headers-do-i) — staticVoidMan, Dec 07 '13 at 20:38
if header & footer is fixed ,then you can add it manually in top & bottom of collectionview hope its help. — Prabhat, Aug 18 '15 at 12:12
@staticVoidMan This is definitely not the duplicate of the other stackoverflow question you posted. Please read cerefully the question once more. — dzensik, Nov 12 '15 at 14:22

score 6 · Answer 1 · answered Sep 05 '15 at 19:46

You'll have to create your own custom collection view layout and datasource. The datasource will return global headers and global footers, and section headers and footers, and your custom collection view layout will have to position them accordingly.

THIS IS NOT A VERY SIMPLE PROCESS.

In the WWDC talk Advanced User Interfaces with Collection Views they describe their approach with sample code on how they created a global header. You can use their sample code and then add a global footer section to that.

From Apple:

Advanced User Interfaces with Collection Views

Demonstrates code factoring, swipe to edit, drag reordering, and a sophisticated custom collection view layout.

score 4 · Answer 2 · answered Aug 24 '15 at 07:31

4

Both Global header and footer are the cells (UICollectionViewCell) of the first and last section

answered Aug 24 '15 at 07:31

nikolsky

193
3
7

This is an acceptable answer. Keep it simple, there is no need to make it more compicated – Ducky Sep 17 '15 at 14:35

Mathijs · Answer 3 · 2013-12-12T09:19:36.137

Fix this in the cellForItemAtIndexPath delegate method

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 0)
    {
        // first section
    }
else if (indexPath.section == [dataSourceSectionsArray.count]-1)
    {
        // last section
    }
else
    {
        // normal section
    }
}

And you should of course return [dataSourceSectionsArray.count]+2 (one header, one footer) in the numberOfRowsInSection method and keep in mind to always refer to [dataSourceSectionsArray objectAtIndex:indexPath.row-1] when you access your data in a normal cell, since there's no object corresponding to the header in the array.

UICollectionView Header and Footer View

3 Answers3