iosswiftpaginationscrollviewscaling

Scrollview with snapping and scaling


I've been wanting to make a scrolling snapping scaling UI for a Swift iOS app for a bit now, but never knew what to search for. Then last night I was in the Apple News app and saw this, which is EXACTLY what I want to do. Any pointers on where to start?

I've made a scrollview with paging before, but this requires every "page" to be the same size, and I only ever see the current page. I like how you can see like 10% of the page to the left and right while on the current one. Additionally, I want the centered "page" to be larger than the outside ones.

Is there a name for this type of scrolling animation? Not knowing what it's even called has made searching difficult.

Thanks!

GIF:

slider


Solution

  • That is a UICollectionView implementing what is popularly known as a "Carousel".

    It's actually very easy to implement as a UICollectionViewFlowLayout subclass with just a few simple tweaks. You just have to override three methods:

    Apple explains it all to you in a WWDC 2012 video. IIRC they call it "Cover Flow" because it's modeled after cover flow in the Mac Finder.