UICollectionView Floating Headers on Top and Side

Question

How do you implement headers in a UICollectionView? I know you can put in supplementary views, but I don\'t know how to make them \"float\" above a section like hea

Answer 1

Update for iOS9:

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

Pass it along.

Answer 2

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

---

You need to specify that behaviour 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;
}