Parallax UITableView header with Auto Layout

I’ve been working on a thing at Shopify, where I implemented a header containing an image that has a parallax effect when scrolling up and expands when scrolling down.

This isn’t exactly a new thing, but I wanted to implement it using Auto Layout and couldn’t find any examples of this. It turns out it’s super simple, so I found some time tonight and created a demo project you can find the code on Github: https://github.com/runmad/ParallaxAutoLayoutDemo

Parallax Auto Layout Demo

To achieve the effect, you simply add the image view inside a container view that gets clipped bounds. Using two NSLayoutContraints, you then set the height of the container view and the height of the image view.

A bit more work is required if you’re working with portrait and landscape images, but the effect is very simple to achieve.