UICollectionView header view create programmatical

Question

I have created UICollectionView in storyboard and added header footer view its working fine.But My question is how to create UICollectionViewReusable view to add as SupplementaryView programatically.I tried but delegates not called.Please note that i have set delegate also.below code i have tried

- (void)setUpCustomCollectionView
{

    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 40, 320, 500) collectionViewLayout:layout];

    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"brandingHeaderView"];

    self.collectionView.bounces = NO;
    self.collectionView.tag = 10;
    self.collectionView.backgroundColor = [UIColor darkGrayColor];
    [self.collectionView setDataSource:self];
    [self.collectionView setDelegate:self];

    self.collectionView.dataSource=self;
    self.collectionView.delegate=self;

    [self.baseScrollView addSubview:self.collectionView];
}

And in delegate

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
          viewForSupplementaryElementOfKind:(NSString *)kind
                                atIndexPath:(NSIndexPath *)indexPath
{
 if (kind == UICollectionElementKindSectionHeader) {
            UICollectionReusableView *headerView = [self.collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"brandingHeaderView" forIndexPath:indexPath];

            UIView * view =[[UIView alloc]initWithFrame:CGRectMake(0, 0, 0, 80)];
            view.backgroundColor = [UIColor redColor];

                 [headerView addSubview:view];

            return headerView;
        }
}

guide me.

Answer 1

In order to add header view programmatically to UICollectionView, you need to do following things.

UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout alloc] init];
layout.headerReferenceSize = CGSizeMake(100.0f, 40.0f);

UICollectionView* _collectionView=[[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:UICollectionElementKindSectionHeader];

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

if ([kind isEqualToString:UICollectionElementKindSectionHeader]){

UICollectionReusableView *reusableView = [collectionView      dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:UICollectionElementKindSectionHeader forIndexPath:indexPath];

        if (reusableView==nil) {
        reusableView=  [[UICollectionReusableView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
        UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
        label.text= @"Top stories";
        label.textColor = [UIColor blueColor];
        [reusableView addSubview:label];
        }
        return reusableView;
    }
    return nil;
}

Answer 2

I have just been having a similar issue where the following delegate wasn't being called...

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

Then I remembered that when I was defining an instance of the UICollectionViewFlowLayout, I had assigned the itemSize value as per following code...

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(106.f, 106.f);

Try also adding the following line to it as well for the header...

layout.headerReferenceSize = CGSizeMake(320.f, 30.f);

Answer 3

I guess mistake here:

[UICollectionViewFlowLayout class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader

UICollectionViewFlowLayout can`t be header view

Edit:

To make it work you need subclass of UICollectionReusableView, don't forget override reuseIdentifier property. Also check docs:

UICollectionReusableView Class Reference

Answer 4

override init(collectionViewLayout layout: UICollectionViewLayout) {
    super.init(collectionViewLayout: layout)
    let nib = UINib(nibName: "Empty", bundle: nil)
    collectionView!.registerNib(nib, forCellWithReuseIdentifier: "cell")

    /* register the header nib's */
    let headerNib = UINib(nibName: "Header", bundle: nil)
    collectionView?.registerNib(headerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header")


    /* register footers nib */
    let footerNib = UINib(nibName: "Footer", bundle: nil)
    collectionView?.registerNib(footerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "footer")

    collectionView!.backgroundColor = UIColor.whiteColor()
}

convenience required init(coder aDecoder: NSCoder){
    let flowLayout = UICollectionViewFlowLayout()
    flowLayout.minimumLineSpacing = 20
    flowLayout.minimumInteritemSpacing = 10
    flowLayout.itemSize = CGSize(width: 80, height: 120);

    flowLayout.scrollDirection = .Vertical
    flowLayout.sectionInset =
        UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)

    // set the header and footer views size properties
    flowLayout.headerReferenceSize = CGSize(width: 300, height: 50)
    flowLayout.footerReferenceSize = CGSize(width: 300, height: 50)
    self.init(collectionViewLayout: flowLayout)
}
override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> HeaderCollectionReusableView{

    let view = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "header", forIndexPath: indexPath) as! HeaderCollectionReusableView
    view.headerLabel.text = "header section title"

    return view
}

Answer 5

to add it, a custom nib file should be created called Header(Header.xib) and UILabel is dragged from the object library and added to the Header.xib. A custom file a subclass of UICollectionReusableView is created next. e.g. HeaderCollectionReusableView.swift and the header.xib is made to see it and an IBOutlet of the label is done inside this custom class.