Programmatically scroll to a supplementary view within UICollectionView

ios, ipad, iphone, uicollectionview

Solution

You can not use `scrollToItemAtIndexPath:atScrollPosition:animated` for this.

Hopefully, they will add a new method like `scrollToSupplementaryElementOfKind:atIndexPath:` in the future, but for now, the only way is to manipulate the contentOffset directly.

The code below shows how to scroll header to be on top vertically with FlowLayout. You can do the same for horizontal scrolling, or use this idea for other layout types.

NSIndexPath *indexPath = ... // indexPath of your header, item must be 0

CGFloat offsetY = [collectionView layoutAttributesForSupplementaryElementOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath].frame.origin.y;

CGFloat contentInsetY = self.contentInset.top;
CGFloat sectionInsetY = ((UICollectionViewFlowLayout *)collectionView.collectionViewLayout).sectionInset.top;

[collectionView setContentOffset:CGPointMake(collectionView.contentOffset.x, offsetY - contentInsetY - sectionInsetY) animated:YES];

Note that if you have non-zero `contentInset` (as in iOS 7, when scroll views expand below bars) you need to subtract it from the `offsetY`, as shown. Same for `sectionInset`.

Update:

The code assumes that the layout is in prepared, "valid" state because it uses it to calculate the offset. The layout is prepared when the collection view presents its content.

The call to `[_collectionView.collectionViewLayout prepareLayout]` before the code above may help when you need to scroll the collection view which is not yet presented (from `viewDidLoad` say). The call to `layoutIfNeeded` (as @Vrasidas suggested in comments) should work too because it also prepares the layout.

Problem

I am using `UICollectionView` to display photos in sections. Each section has a supplementary view as a header and is supplied via the method: `viewForSupplementaryElementOfKind`. I have a scrubber on the side that allows the user to jump from section to section. For now I am scrolling to the first item in the section using `scrollToItemAtIndexPath:atScrollPosition:animated:`, but what I really want is to scroll the collectionView so that that section's header is at the top of the screen, not the first cell. I do not see an obvious method to do this with. Do any of you have a work around? I suppose I could scroll to the first item of the section, and then offset that by the supplementary height plus the offset between the items and header if it comes down to that (there is a method for scrolling to point coordinates of the contentView). However if there is a simpler way, I'd like to know. Thanks.

Original source