Adding a top header to UICollectionview that already has sections with headers

Question

Assuming I have a UICollectionview with sections and items. For each section I generate a header as the code below.

Question: How do I add a top header view to the collectionView itself which is different than the section header demonstrate below (using objective-c, IB, Auto Layouts)

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




    if (kind == UICollectionElementKindSectionHeader) {
        HeaderCollectionReusableView *headerView = [self.collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];


        headerView.label1.text = "This is a section title";

        reusableview = headerView;
    }



    return reusableview;
}

Answer 1

Generate another header for first section with your current header view and a top header view in one view. Don't forget to return a bigger size in collectionView:layout:referenceSizeForHeaderInSection: for first section.

Answer 2

I would do those steps in order to accomplish it:

1. In your story board, create a UIView and design it's subviews as you wish. Please make sure you're checking the clipToBounds checkbox for the UIView you've just created.

2. Create your constraints. My guess that it should with top 0, left 0, right 0 and of course height 0 (cause this is the initial state as you mentioned).

3. Create IBOutlet for the height constraint and connect it to the height constraint you've just created. Let's call it viewHeaderHeightConstraint.

4. When you want to show this view:

   self.viewHeaderHeightConstraint.constant = 50; // Or any other value
   [self.view layoutIfNeeded];
   

5. If you want to animate the height change:

   self.viewHeaderHeightConstraint.constant = 50; // Or any other value
   [UIView animateWithDuration:0.3 animations:^{
   
       [self.view layoutIfNeeded];
   
   } completion:^(BOOL finished) {
   
       // Do something after completion
   
   }];