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:
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:
shouldInvalidateLayout(forBoundsChange:)
to true
, to get layout during scrolling
layoutAttributesForElements(in:)
to modify the transform3D
property of the UICollectionViewLayoutAttributes for the onscreen cells
targetContentOffset(forProposedContentOffset:withScrollingVelocity:)
to get the paging effect
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.