Phillip Caudell
@phillipcaudell

A new interaction in Big Mail is swiping between messages. The message background extends into the UI chrome, and when combined with the device-matched corner radius, creates the illusion of pushing the whole display – satisfying!

🧵 Here's how it's built, along with some code

If you're familiar with SwiftUI, you might think it’s a TabView with a page style, but it's not.

TabView needs to know all your views upfront, which if you have lots of messages, is very expensive.

In this example, TabView reevaluates all 1,000 items on each and every swipe 🥴

Instead, our new PageView container requests views one by one, only as they're needed.

Sometimes an imperative API is what you want 😅

PageView then has platform specific implementations using UIPageViewController and NSPageController, respectively.

You can take a look at the full code here: https://gist.github.com/phillipcaudell/01beca262f940781a53f64454516d15b

The final part of the effect is to get the toolbar and page to move together as one. SwiftUI toolbars are anchored to their parent NavigationStack, so are unaffected by any page movements.

The trick here was to implement my own replica toolbar, and embed it in the safe area.

Feb 28, 2023, 2:42:19 PM