Add Header When Using a Custom Flow Layout in a Collection View

Question

When adding a custom flow layout to a collection view the accessories option go away, Why?, I used this flow layout to center elements of my collection view, but since there's no way to add a section header to my collection view using the storyboard, what are the steps to add a header for the collection view?

What I tried was:

Since my custom layout is a subclass of UICollectionViewFlowLayout, at the storyboard editor I selected the layout (yellow cube) in the left object lister. Then at the Identity Inspector I selected the class of my custom layout.

The collection view seems to create the space for the header, but nothing is displayed inside of it, even if I only ser another background color to the reusable view, it doesn't display anything.

score 2 · Answer 1 · answered Jun 29 '17 at 23:47

After some research I found what I was looking for:

I had to create my header in a separate xib, so here's what I did:

Created a UICollectionReusableView subclass with xib file
Created a UICollectionViewCell subclass with xib file
Added my ui elements (I needed a horizontal collection at the header, so in this case cells need to be created and designed separately too).
At the view controller of my main collection view it's needed to register the nib of the reusable view, and the nib of the reusable cell like this:

Swift 3.2

override func viewDidLoad() {
    ...

    let headerNib = UINib(nibName: "HeaderCollectionReusableView", bundle: nil)
    collection.register(headerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "Header")
}

After registration of the nib you can use this code to add your header at viewForSupplementaryElementOfKind method

Swift 3.2

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

    switch kind {
    case UICollectionElementKindSectionHeader:

        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Header", for: indexPath)
        return headerView

    default://I only needed a header so if not header I return an empty view
        return UICollectionReusableView()
    }
}

score 0 · Answer 2 · answered Jul 03 '20 at 17:10

In Objective-C

Call the registerCell method inside the viewDidLoad

- (void)registerCell {

    UINib *cellNibTitle  = [UINib nibWithNibName:@"YOUR_HEADER_CELL" bundle:nil];
    [self.collection registerNib:cellNibTitle forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
    
}

and call the delegate method:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    
    if(kind == UICollectionElementKindSectionHeader){
        YOUR_HEADER_CELL *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"Header" forIndexPath:indexPath];
        return headerView;
    }
    
    return  [UICollectionReusableView new];

}

Add Header When Using a Custom Flow Layout in a Collection View

2 Answers2