Rewriting My First SwiftUI App: TabView and SidebarView
Unique experience for iPhone, iPad and Mac
Today I sat down to create a sidebar on Gradient Game for iPadOS 14 and the upcoming macOS Big Sur.
My main concern was passing the same data model for both TabView on iOS devices and SidebarView on iPadOS & macOS.
Sharing some simplified code snippets for the same.
Data Model
The data for an individual tab should consist of its title, the name of the SF Symbol, and the destination View. Also, I want a function that would return an array of this data.
With this, if I’ve to add a new tab or update/remove the existing ones, I just have to edit the views variable, and it should update for both tab and sidebar.
TabView
In a TabView for Gradient game, each tab contains the view, an image, and the title for that view. This perfectly matches the requirement created in the data model. I need to loop over the array of child views and present them in TabView.
SidebarView
I need to loop over the array of views, showing the image and title in the latest Label in SwiftUI, with navigation destination using NavigationLink. This also perfectly matches the requirement created in the data model.
These views will be shown in a list, setting the style as SidebarListStyle(). This gives a beautiful translucent sidebar on macOS Big Sur.
MainView
Constructing the final view, I show the SidebarMainView if the operating system is macOS. Then, I access the horizontal size class of view to determine if the device is an iPhone or an iPhone. If the condition is matched, TabMainView is shown. If the size class is regular, SidebarMainView is created.
Also, for macOS, I need to provide the sidebar minimum, ideal and maximum width so that it won’t go haywire if the user tries to minimize it.
Final Words
With this, I’m finally done publishing my first article on this new publication. Any new feature added to Gradient Game will be documented from now onwards.
