A Newbie’s Information to NavigationSplitView in SwiftUI for iOS 16

0
4


In iOS 16, apart from introducing the brand new NavigationStack, Apple additionally launched a brand new view container named NavigationSplitView for builders to create two or three column navigation interface. If you wish to construct UI just like the inventory Mail app, it’s best to take a look at this break up view element.

Whereas NavigationSplitView is extra appropriate for iPadOS and macOS apps, you may as well apply it to apps for iPhone. The view element robotically adapts itself for iPhone. As a substitute of displaying a multi-column interface, it creates a single-column expertise.

The brand new NavigationSplitView comes with numerous choices so that you can customise its look and operations. You’ll be able to change the column width and programmatically present/cover the columns.

On this tutorial, we are going to create a three-column navigation UI utilizing NavigationSplitView.

Let’s get began.

The Primary Utilization of NavigationSplitView

The NavigationSplitView helps each two-column and three-column navigation expertise. Their implementations are fairly comparable. To create a two-column navigation UI, you write the code like this:

For 3-column navigation interface, you add the content material parameter in between:

We are going to begin with the two-column navigation UI and finally construct the three-column design.

Constructing the 2-Column Navigation Interface

In the event you’ve learn my earlier tutorial on the expandable checklist view, chances are you’ll know that I’m a giant fan of La Marzocco. In that tutorial, I confirmed you easy methods to create an expandable checklist view with inset group model.

Now let’s flip this expandable checklist right into a two stage navigation interface just like the screenshot proven under:

swiftui-navigationsplitview-two-column

Earlier than we create the break up view, let’s start with the information mannequin. We create a struct to mannequin a menu merchandise:

To make a nested checklist, the important thing right here is to incorporate a property that accommodates an non-compulsory array of youngsters (i.e. subMenuItems). Be aware that the kids are of the identical kind of its guardian.

For the highest stage menu objects, we will create an array of MenuItem like this:

For every of the menu merchandise, we specify the array of the sub-menu objects. In case if there is no such thing as a sub-menu merchandise, you’ll be able to omit the subMenuItems parameter or move it a nil worth. For the sub-menu objects, we will outline them like this:

To raised arrange the information mannequin, we create a struct referred to as CoffeeEquipmentModel like this:

The mainMenuItems array holds the pattern menu objects. Each subMenuItems and menuItem are helper strategies for trying up a particular class or menu merchandise.

Now that we’ve ready the information mannequin, let’s transfer onto the implementation of the navigation break up view. Create a brand new file named TwoColumnSplitView.swift utilizing the SwiftUI view template. Replace the TwoColumnSplitView struct like this:

The primary closure of NavigationSplitView presents the principle menu merchandise. We use a Record view to loop via all mainMenuItems within the knowledge mannequin and show every of the menu objects utilizing a HStack view.

We even have a state variable named selectedCategoryId, which is used to carry the chosen fundamental menu merchandise.

For the element closure, that is the place the submenu merchandise is rendered. If a class is chosen, we name the subMenuItems methodology to get the submenu objects for that individual class. We then show the submenu objects utilizing Record view. Conversely, if no class is chosen, we show a textual content message instructing the person to decide on a class.

When you made the adjustments, it’s best to see a two-column navigation UI within the Xcode preview.

swiftui-split-view-three-columns

Making a Three-Column Navigation Interface

Now that we’ve created a two-column navigation interface, let’s additional improve it to offer customers with a three-column navigation expertise. The additional column is used for displaying the picture of the chosen gear.

swiftui-navigation-split-view-three-column-demo

To transform the two-column navigation interface to three-column, we have to implement an extra parameter (i.e. content material) for the NavigationSplitView. Let’s create a brand new view named ThreeColumnSplitView like this:

Mainly, the code within the content material closure must be similar to you. The content material parameter is designed for displaying the submenu objects. Thus, we use the Record view to point out the submenu objects for the chosen class.

When an merchandise is chosen within the submenu, the app reveals the gear picture. That is achieved by the code written within the element closure.

After the code adjustments, the preview pane ought to present you a two-column structure.

swiftui-navigation-empty

By default, the primary column is hidden. It’s good to faucet the menu button on the top-left nook to disclose it.

To regulate the visibility of the break up view, you’ll be able to declare a state variable of the sort NavigationSplitViewVisibility and set its worth to .all:

When instantiating the NavigationSplitView, it has an possibility parameter named columnVisibility. You’ll be able to merely move the binding of columnVisibility to manage the visibility of the columns.

swiftui-column-visiblity-split-view

The NavigationSplitViewVisibility.all worth tells iPadOS to show all of the three columns. There are different choices together with:

  • .computerized – Use the default main column visibility for the present gadget. That is the default setting.
  • .doubleColumn – Present the content material column and element space of a three-column navigation break up view.
  • .detailOnly – Disguise the main two columns of a three-column break up view. In different phrases, solely the element space reveals.

Customizing the Type of Navigation Break up Views

Have you ever examined the app in iPad Portrait? By default, the element space takes up the entire display screen when the iPad gadget is in portrait mode. So, if you carry up the principle menu and submenu areas, the element space is hidden behind these two main columns.

swiftui-portrait-multiple-column

In the event you don’t like this model, you’ll be able to change it by attaching the .navigationSplitViewStyle modifier to NavigationSplitView:

The default worth is ready to .computerized. In the event you set the worth to .balanced, it reduces the element space such that the 2 main columns can seem on the identical time.

swiftui-splitview-multi-column-balanced

What’s Subsequent

This tutorial offers you an introduction to NavigationSplitView in iOS 16. It’s very straightforward to create multi-column navigation expertise for iPad customers. Even in case you develop apps for iPhone customers, NavigationSplitView can adapt itself to suit the navigation expertise on narrower screens. For instance, when iPhone 13 Professional Max is in portrait mode, the break up view reveals a one-column navigation. In the event you rotate the gadget sideway, the break up view adjustments to a multi-column structure.

Subsequently, take a while to review this break up view element and apply it to your app at any time when this type of UI is smart.

For reference, if you wish to study extra about NavigationSplitView, you’ll be able to take a look at this WWDC video.

In the event you get pleasure from this text and wish to dive deeper into SwiftUI, chances are you’ll take a look at our Mastering SwiftUI e book.



LEAVE A REPLY

Please enter your comment!
Please enter your name here