UICollectionView floating headers on top and side

Question

How do you implement headers in uicollectionview? I know that you can add additional looks, but I don’t know how to make them “float” over a section, for example, headings in a uitableview.

Here is my situation: I have a collection with cells laid out in a grid. You can scroll horizontally and vertically. I want to have a heading on top so that when scrolling horizontally, it scrolls horizontally, but it doesn't scroll vertically. I also want the same thing on the left side where it scrolls vertically with the collection, but not horizontally. Does this take the correct approach with additional views?

The last functionality I'm looking for is similar to the one that was in the Numbers table app on iOS.

Thanks in advance for your help!

Answer 1

Update for iOS9:

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout flow.sectionHeadersPinToVisibleBounds = true 

Skip it.

Answer 2

EDIT: As mentioned in the comments, this answer is valid, but not for several sections. See this blog for a better solution: http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using#notes

---

You need to specify this behavior in your layout:

 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSMutableArray* attributesArray = [[super layoutAttributesForElementsInRect:rect] mutableCopy]; BOOL headerVisible = NO; for (UICollectionViewLayoutAttributes *attributes in attributesArray) { if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader]) { headerVisible = YES; attributes.frame = CGRectMake(self.collectionView.contentOffset.x, 0, self.headerReferenceSize.width, self.headerReferenceSize.height); attributes.alpha = HEADER_ALPHA; attributes.zIndex = 2; } } if (!headerVisible) { UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]]; [attributesArray addObject:attributes]; } return attributesArray; }