Create Sidebar layout in iPad with SwiftUI 2.0
New iPadOS 14 has this beautiful layout. In this structure, we can split the iPad screen into three Views.
- SidebarView
- PrimaryView
- DetailView
Previously, we are having the Master and Detail View concept. But in this article, we are going to learn how to develop a three-sectioned iPad layout design in SwiftUI 2.0.
Pre-requisite:
This complete project was developed in Xcode-12.0.1. Make sure you are using Xcode 12 or above.
Overview:
I have listed down some Movies and some TV shows to demonstrate the layout. The first view will contain the main menus of the Application.
In my case, I have Movies and TV Shows
The second view contains the list of Movies or TV Shows based on the first option.
The third view will contain the detail of selected Movie or TV Show.
Sidebar model
I have created a model for the sidebar menu which contain name, id and view. This model is confirmed to Identifiable protocol.
Here, the “view” is the one which has to be displayed on selecting the sidebar menu (Movie list view or TV show list view). As it is a SwiftUI view, the type is mentioned as “AnyView”
A quick tip: AnyView is the data type to use for SwiftUI Views. We can pass, initialize View with AnyView.
Sidebar ViewModel
Next step is to create a ViewModel for Sidebar and create the menus of it.
Now, I have ObservedObject class and @Published property which is an array of SidebarMenuModel object.
In the init method, I have added Two menus “Movies” and “TV Shows”.
Usage of AnyView: AnyView(MyViewName())
Sidebar View
Next step is to create the view for Sidebar.
This pretty straight forward method. First thing, creating the @StateObject variable of SidebarViewModel. Then there is List, inside of that ForEach is iterating through the sidebar viewmodel’s sidebarMenuItems array.
The important part is inside the ForEach, I have used NavigationLink element which navigates us to the selected view.
MovieModel
Now, its time for Movie model. This model is having id, title, desc(description). Movie model is confirmed to Identifiable protocol coz, we are going to list the movies.
Any struct which is listed in UI should confirms to Identifiable protocol.
Movie ViewModel
Just like the SidebarViewModel, here I’ve created a movieList variable which is @Published and this class is also confirmed to ObservableObject protocol.
In the init method some MovieModel has been added.
Movie List View
Now, Let’s list those Movies.
Same as SidebarView created the @StateObject variable MovieVM. then Listed the movies in List and ForEach Iterator. But, here the destination of the NavigationLink is MovieDetailView(movie:).
Movie Detail View
Let’s see the MovieDetailView code.
This view is very simple, Just getting the MovieModel variable and displaying the movie description and set the title as the movie title.
Content View
Main Part of this whole article is here only,
we need to put the first, second and third view in a NavigationView under ContentView.
I have displayed the movie list view as the second view, In this point, we cannot show the MovieDetailView as the third view. coz, the third view is rendered based on the movie selected in the second view. So, I have displayed an empty state image initially. If the user tap on a movie then, MovieDetailView will get displayed.
Conclusion
In this article, I have explained Movie listing only but the TV show listing is just exactly same as the movie list. Here is the repository link for the complete project.
This iPad layout design is very much helpful if you are developing an app with Mainmenu, SubMenu and DetailView.
I hope you like this article.
Happy learning. 👨💻🎊
In the init method some MovieModel has been added.
