Custom Header in UICollectionView with Interface Builder without Storyboard

Piero picture Piero · Sep 25, 2013 · Viewed 9k times · Source

I'm trying to add a custom view to the header section of my UICollectionView. I have the xib file interface builder but I don't use storyboard. I have checked the Section Header in Interface Builder but doesn't appear any UICollectionReusableView, what can I do?

Answer

mdziadkowiec picture mdziadkowiec · Jan 21, 2014

The easiest solution is to do is programatically (and keep your HeaderReusableView in another XIB file):

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

Then:

- (CGSize) collectionView:(UICollectionView *)collectionView
                   layout:(UICollectionViewLayout *)collectionViewLayout
referenceSizeForHeaderInSection:(NSInteger)section {
    return CGSizeMake(60.0f, 30.0f);// width is ignored
}

And of course:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
           viewForSupplementaryElementOfKind:(NSString *)kind
                                 atIndexPath:(NSIndexPath *)indexPath {

    NSString *productId = nil; ///

    ItemHeaderView *view = nil;

    view = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                       withReuseIdentifier:kItemSectionHeaderViewID
                                              forIndexPath:indexPath];

    view.titleLabel.text = productId;

    view.backgroundColor = [UIColor yellowColor];

    return view;
}