Create Sidebar layout in iPad with SwiftUI 2.0

Image for post
Image for post

New iPadOS 14 has this beautiful layout. In this structure, we can split the iPad screen into three Views.

  1. SidebarView
  2. PrimaryView
  3. 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.

This complete project was developed in Xcode-12.0.1. Make sure you are using Xcode 12 or above.

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.

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.

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())

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.

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.

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.

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:).

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.

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.

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.

Automation QA Engineer by profession. Learning iOS Development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store