UICollectionView header not showing

Question

I'm working on a project that uses an UICollectionView to show several albums. The items show fine, but now I want to show an header above the first section.

To do this, I added the registerNib:forSupplementaryViewOfKind:withReuseIdentifier: to my init method. Like this:

[self.collectionView registerNib:[UINib nibWithNibName:@"AlbumHeader" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kAlbumHeaderIdentifier];

(The AlbumHeader Nib contains a view of the class AlbumHeader, which is a subclass of UICollectionView.)

After that, I implemented collectionView:viewForSupplementaryElementOfKind:atIndexPath method:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    return [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:kAlbumHeaderIdentifier forIndexPath:indexPath];
}

Now it should try to load the header view, I suppose. But it doesn't, the method for the supplementary view doesn't get called.

What am I missing? Stuck for hours, have read the documentation on UICollectionViews many times, but nothing seems to help. Any thoughts?

Guido Hendriks · Accepted Answer · 2016-06-29T20:50:23.847

124

After looking for the method yuf asked about, I read that by default the size of headers/footers are 0,0. If the size is 0, the header/footer won't display.

You can set the size with a property:

flowLayout.headerReferenceSize = CGSizeMake(0, 100);

Then all the headers will have the same size. If it has to be different for each section, you can implement the following method, which is part of the UICollectionViewDelegateFlowLayout protocol.

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
    if (section == albumSection) {
        return CGSizeMake(0, 100);
    }

    return CGSizeZero;
}

Note that in vertical scrolling it uses the returned height and the full width of the collection view, in horizontal scrolling it uses the return width and the full height of the collection view.

edited Jun 29 '16 at 20:50

answered Oct 03 '12 at 09:49

Guido Hendriks

5,706
3
27
37

4

To anyone still running into this issue, in order for me to make this work, I had to also give a size to 'collectionview.footerReferenceSize'. Not sure if that req is iOS 7 specific... – Taylor Halliday Nov 19 '13 at 01:51
1

This is an incredible tip. Thanks a million, Guido! – Fattie Jun 29 '16 at 19:29
1

Enjoy that bounty! :) – Fattie Jul 01 '16 at 22:42
@JoeBlow Thanks, appreciated! – Guido Hendriks Jul 05 '16 at 08:22
Instead of giving a constant height of 100px, is it possible to find the actual height of collection header view and return it back ? – Anish Kodeboyina Jan 15 '18 at 17:41

score 3 · Answer 2 · edited Jan 18 '13 at 17:52

3

Did you implement:

- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

There's a ton of methods to implement just to make one thing work...I'm learning too. Tell me if it works.

Edit: Sorry wrong method. That is for subclassing I think. The one I'm talking about is in UICollectionViewLayout (the layout object you subclass, if your layout supports supplementary views):

- layoutAttributesForSupplementaryViewOfKind:atIndexPath:

See here: https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UICollectionViewLayout_class/Reference/Reference.html#//apple_ref/occ/cl/UICollectionViewLayout

edited Jan 18 '13 at 17:52

Ben Kreeger

6,355
2
38
53

answered Oct 03 '12 at 01:09

yuf

3,082
3
20
18

That method doesn't seem to be part of any delegates? – Guido Hendriks Oct 03 '12 at 09:35
@GuidoH did you use FlowLayout or your custom layout? This answer refers to custom layout. – Juguang Jan 04 '14 at 09:07
I did use the flow layout. The accepted answer solved it all, and makes sense as well. =) – Guido Hendriks Jan 16 '14 at 19:29

score 3 · Answer 3 · answered Jan 15 '19 at 19:38

for SWIFT 3 & SWIFT 4

    self.collectionView.register(UINib(nibName: "SectionCollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "SectionCollectionReusableView")



    self.collectionView.fs_width = self.collectionView.bounds.width

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 70, left: 40, bottom: 0, right: 0)
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 0
    layout.estimatedItemSize = CGSize(width: 350, height: 140)
    layout.scrollDirection = .horizontal
    layout.headerReferenceSize = CGSize(width: self.collectionView.bounds.size.width, height: 60)
    layout.sectionHeadersPinToVisibleBounds = true
    self.collectionView!.collectionViewLayout = layout

You have to add this to ViewDidLoad, and notice the

layout.headerReferenceSize = CGSize(width: self.collectionView.bounds.size.width, height: 60)

This will make the header Section Layouts

and Thanks @Guido Hendriks, and all I have got the insight from their answer as well

UICollectionView header not showing

3 Answers3

Linked