UICollectionView with two headers

Question

Having two headers in UICollectionView?

I've got a UICollectionView which uses the flow layout, which also has a header and footer:

---------   
| head  |
---------
| A | B |
---------
| C | D |
---------
| foot  |
---------

Occasionally, I'd like to have two headers, like so:

---------   
| head1 |
---------   
| head2 |
---------
| A | B |
---------
| C | D |
---------
| foot  |
---------

I'm stuck on how to achieve this. The flow layout only appears to allow one head and one foot. How can I add a second header?

---

edit: I have also implemented sticky headers - http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using - but I only want the first header to be sticky. This is why I can't just include everything in one header.

Solution 1

You just need to use a simple trick.Show header and footer both for all sections.

In which section you do not want to show footer just pass its size zero as :--

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    if(section==0)
    {
        return CGSizeZero;
    }

    return CGSizeMake(320, 50);
}

Here I have used two sections like

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

And passed no of rows in only one sections that is the last one as

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (section==1) {
        return 20;
    }
    return 0;
}

And here is my output ---

Red View is header and Green One is footer.

Here u can get the entire Implementation File

Solution 2

This content may help you to achieve what you want

create the class CollectionHeaderView and make it to derive from UICollectionReusableView and make container, And then after make 2 uiview and put it to this container

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableview = nil;

    if (kind == UICollectionElementKindSectionHeader) {
        CollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

        headerView.firstContainer.titleLabel.text = @"MY Header View 1";//Here you can set title 

        headerView.secondContainer.titleLabel.text = @"MY Header View 2";//Here you can set title  
        UIImage *headerImage = [UIImage imageNamed:@"header_banner.png"];
        headerView.firstContainer.backgroundImage.image = headerImage;
       headerView.secondContainer.backgroundImage.image = headerImage;

        reusableview = headerView;
    }

    if (kind == UICollectionElementKindSectionFooter) {
        UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView" forIndexPath:indexPath];

        reusableview = footerview;
    }

    return reusableview;
}

Solution 3

You should put both the header (1 and 2) in an other view and place that view as head 1. Thus create just on header in the collection view.

Solution 4

How are you adding one header? I suppose by specifying section headers? The recipe to have two headers would be to have two header subviews inside one header main view.

Solution 5

What you can do is use a UITableView with two sections and put the UICollectionView in the cell of the second section.

View more solutions

Comments

[Nirav Bhatt]

You can try different autoresize masks with both header subviews.

[rckoenes]

Still this should work, just don't think about them as being two header.

[Krishnabhadra]

While this link may answer the question, it is advised to post the necessary information in the answer body itself. Link only answers are discouraged.

[cannyboy]

I can't think how this would work since the headers have different behaviours.

[SachinVsSachin]

@Krishnabhadra Ok I did this.. Thanks :)

[Krishnabhadra]

For further reading meta.stackexchange.com/questions/8231/…

[cannyboy]

This seems like a good direction to go. With this method could I use different layouts for the two headers? And allow me to let one header be 'sticky' and the other one to scroll normally.

[Prince Kumar Sharma]

yeah why not , just apply section condition on viewForSupplementaryElementOfKind and u can get header of different layouts for each section.

[ios developer]

How can i set CustomFlowLayout only section 2?