Building 1v1Me’s Video Feed On iOS
Every major social media app is doing it.
- TikTok’s Feed
- Instagram’s Reels
- Facebook’s Videos
- YouTube’s Shorts
This full-screen page style is everywhere, but Apple has not made implementing it very easy.
This guide will walk you through how to build this full-screen TikTok-style UI pattern into your app for both landscape and portrait mode. You can view the full example here.
1. Set cell spacing to 0.
2. Set the
3. Set the target content offset point during rotation. This prevents other cells from showing while the phone is rotating.
4. After the rotation, double-check that the cell we landed on is the cell that was shown before the rotation started.
5. After letting go of a scroll gesture we need to calculate what offset point (collection view cell) to snap to using the
proposedContentOffset and the
Putting it all together gives us a flow layout that powers a full-screen swipeable collection view. A complex but robust solution.
The View Controller
The base view controller is very simple.
It is responsible for setting up the collection view:
& for setting the layout’s
There we have it. A layout that handles which cell to show after a swipe gesture & after a phone rotation, and a simple view controller to house it.
Extending the view controller we described here is easy as shown in the full example to allow you to use this UI pattern across your different views.
Props To Innovation, But Could You Share It?
Apple has done an impressive job laying out foundational UI patterns for iOS Developers to easily implement. Even with nearly two million apps on the App Store, there are a leading few who pave new, non-native roads through the landscape. And although ingenuity & creativity should be praised, it makes app-building more difficult for small teams due to the user’s custom-UI expectations from the top few apps.
My Grandma wrote me a note with three pieces of advice. One of them was “Get involved in your community”. No matter who you are, what you do, or what level you are, you’re experience is vital to your communities heartbeat and continued growth.
If you solve an interesting problem, try to share it. Any bit helps.