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.

1v1Me Clips uses this UI pattern to show videos in landscape & portrait mode.

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.

The Layout

1. Set cell spacing to 0.

2. Set the preRotationFirstIndexPath.

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.

The lastVisibleIndexInFrame example can be found here.

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 velocity.

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 indexPathForCellInFrameBeforeBoundsChange:

The lastVisibleIndexInFrame example can be found here.

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.

This is the note she gave me many years ago. Embrace Optimism, Get involved in your community, Enjoy this moment.