How to add a stretchy flair to your UICollectionView
We’re all trying to find ways to delight our users. One of my recent favorites is a stretchy header for images at the top of the screen. I’ve done this with AutoLayout and a UIScrollView in The Clemson Echo. In Atoll I needed to do it at the top of a UICollectionView on the Species Detail screen. This time I’ll only cover the UICollectionView method since its a bit more common to build your scrolling views with UICollectionViews.
To start you’ll need an app with a UICollectionView filling one of your screens. If you want to skip that part you can download a basic project here.
The first step is to setup our layout to have a basic header. UICollectionViews support a variety of views include Cells, Supplementary views, and Decoration views. Supplementary views are supplied by the datasource while Decoration views are supplied by the layout. Since we’ll probably want to change our header based on content, Supplementary view makes sense here.
Start by setting up a constant string for your header’s kind. UICollectionViewLayouts use a basic string to separate different types of supplementary views.
Once we have a kind, we can implement a method the UICollectionViewLayout uses to generate attributes for supplementary views. The goal here will be to calculate our header’s frame and create a UICollectionViewLayoutAttributes object.
Now that we have a header we should push or other content down. Let’s make a quick change to our existing layoutAttributesForItem method.
Next we need to make sure our layout generates a header. Looking at our prepareForLayout method we can add some code so a single header is created for each layout pass.
Now our layout has a special kind of supplementary view, it can generate a set of attributes describing where to place the view, and it has created those header attributes then stored them with our other attributes. Now that attributes are created each layout our UICollectionViewDatsource will be asked for a supplementary view matching our designated kind.
To get our header showing up we need to make a simple UICollectionReuseableView with a UIImageView to use as our supplementary view.
Then we need to let our UICollectionView know to expect our HeaderViewSubclass for the specific Kind we created in our layout.
Finally, we need to implement the supplementary view datasource method to create and return an instance of HeaderViewSubclass when asked.
If we run our app now, our simple UICollectionView from before now has a nice simple header at the top. It scrolls with the content as you’d expect.
Time to add a dash of sexy
Alright, so we’ve got a basic header. Now for the reason we’re all here. Let’s add a little bit of spice so our header stretches instead of scrolling past the top of your UICollectionView.
We’re gonna start by telling our UICollectionViewLayout that it should be updating the layout while scrolling. That way we can adjust our header each step of the way.
Now we need to adjust our header. We’ll do it in our layoutAttributesForRect method. As we scroll this method is called with the current visible rect plus a little padding. We’ll use this constantly updating method to find our header and add to its height. The stretching magic part 1.
If we build now you’ll see our header is in fact stretching as we scroll! However the image isn’t zooming like you’d expect when it reaches maximum image height.
Alright, we can fix that no problem. Go to our HeaderViewSubclass and let’s adjust our ImageView. It’s pretty easy, we just want to set its content mode. UIViews have a contentMode property that you can use to declare how’d you like your view to stretch. In our case we’ll use ScaleAspectFill. This will cause our image to fill the space available at all times. As that space changes so will our image.
That’s it! We’ve got a beautiful image header stretching just like we wanted.
The Final Frontier
From here you could do some really cool things with your newfound knowledge. If you convert the extra height into a value, you could pass that into Custom Header Views using Custom Layout Attributes to do all sorts of cool things like move subviews, tweak colors, or make the stars fall. Keep an eye out for cool things using UIScrollView offsets. Path, Snapchat, Atoll, and others have put this cool effect to good use.
Wrap Up
UICollectionView is one of the most powerful pieces ever added to UIKit. It is the backbone of hundreds of thousands of apps, sometimes so customized you may never know it was a UICollectionView. Using this powerful layout engine you get a powerful datasource engine for free allowing you to fully separate your data from your layout. I hope this post not only showed you how to build a very popular UICollectionView layout, but also how accessible custom UICollectionViewLayouts are. Go forth my padawans and build amazing layouts.
You can follow me on Twitter here. Feel free to ping with questions about UICollectionViews and general iOS stuff. If there are other topics you’d like to see leave a comment or shoot me a tweet. If you’d like to see more UICollectionView examples, recommend this post. :]
