IOS - Sticky UICollectionView Header (like Apple App Store)

Question

I am trying to create a header like the one in the App Store. Where when the user drags down, the header stays in place and only the cells scroll down. But when the user drags up, both the header and cells scroll up.

What I have done so far is set my collectionView background view to the image I want to stick to the top and set contentInsets of the collectionView below the image. This way when the user drags down, the image will stay in place. But when the user drags up, my cells go over the image (I want the image to scroll up with the cells). I think I am going about this wrong. Thanks.

 UIView *back = [UIView new];
 UIImageView *backImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 320)];
 backImage.image = [UIImage imageWithData:coverData];
 [back addSubview:backImage];
 self.collectionView.backgroundView = back;

 [self.collectionView setContentInset:UIEdgeInsetsMake(300, 0, 0, 0)];

EDIT I used the tutorial from this question but this does the opposite of what I want, and I am unsure of how to change that code to fit my needs

possible duplicate of [UICollectionView with a sticky header](http://stackoverflow.com/questions/15233180/uicollectionview-with-a-sticky-header) — BSMP, Jun 08 '15 at 21:37
@BSMP I used the code from that question and it does the opposite of what I want. When I drag down the header scrolls with content, and when I drag up the header stays in place. But this is probably a good start. Do you know how to change the code from that tutorial to fit my problem? — Peter, Jun 09 '15 at 17:06
You should understand the code you are adding and not add "Voodoo" code to your project... With that being said you need to look in the `layoutAttributesForSupplementaryViewOfKind` `UIFlowLayout` delegate and change the frame.origin.y to `frame.origin.y = contentOffset.y;` — Lefteris, Jun 09 '15 at 17:31
haha Im trying to go through and understand it but I'm still a little confused. Can you explain your answer in more detail. Thanks @Lefteris — Peter, Jun 09 '15 at 17:46

score 0 · Accepted Answer · answered Jun 09 '15 at 18:11

Ok I got it. If you are using the tutorial posted from the linked question-

Change

 origin.y = MIN(
                MAX(
                    contentOffset.y,
                    (CGRectGetMinY(firstCellAttrs.frame) - headerHeight)
                ),
                (CGRectGetMaxY(lastCellAttrs.frame) - headerHeight)
            );

To This

origin.y = MIN(
                       contentOffset.y,
                       (CGRectGetMinY(firstCellAttrs.frame) - headerHeight)
                       );

IOS - Sticky UICollectionView Header (like Apple App Store)

1 Answers1