Navigation in SwiftUI. The complete guide to NavigationView and NavigationBar in SwiftUI 2.0
Navigation in the app is the most crucial point in user experience. Now a day almost all apps have components that respond to navigation. This article goes through the complete creation, use, and customization of NavigationView in SwiftUI.
Navigation style
Navigation is the essential aspect of the success of your application as a product. You need to enable the user to navigate the application quickly and expectably. The task of the developer is to make this process as intuitive and understandable for him as possible. Usually, users do not know about navigation, yet it is simple and straightforward. But as soon as it does not meet the expectation, the client loses the pleasure of using it.
There are several types of navigation that we will talk about later. Your navigation should respond to three main questions: “Where am I now?”, “Where can I back?” and “Where can I go?”
Keep in mind that 25% of users will open your application only once and never come back. So it would be best if you did everything to engage him. This article goes through navigation, but you also should make a lot of things suitable for the user experience.
Hierarchical Navigation
We will start with the simplest type of navigation. The following UML diagram shows how hierarchical navigation works.
As you can see, a user makes one choice to get to the destination. If you need to go to another destination, the only approach is to retrace or start from the beginning. On your iPhone Settings, you can see this style of navigation. Next video show how it works.
For developing a mail application or settings feature, probably this type is for you. In a small conclusion, I would say that this is a relatively simple and straightforward approach. Users could easily keep in mind his navigation stack.
Flat Navigation
Flat navigation allows you to switch between various content categories. Usually, this style represents TabBar objects at the bottom. You can see usage in the Music app or Photos on your iPhone.
UML diagram shows you how all content is related to each one. This approach allows you to separate content and isolate navigation flow inside one type.
Content-Driven Navigation
Generally, this navigation style allows you to move freely via content, or the content itself defines the navigation in your app. The following diagram shows relations. Circles have more than one connection, so it represents a random path through a set of locations.
You can find out that many apps combine multiple navigation styles. There is nothing terrible in that. It would be best to remember that our task is to do everything and possible for the best user experience. Feel free to experiment with the best approaches for your application.
Tips to improve your navigation for better user experience
There are a few tips that will help to improve navigation through the app. It would help if you always remembered about them to achieve a better user experience.
Organize information structure
Organize your information structure, so it maximizes the ease and speed of access to content. Your application should require a minimum number of taps, swipes, and screens to get to the right content.
Make straightforward navigation through the application.
While using an application user should always know where he is, how he can get there and where he can go. Try to keep one path to the one screen. Display to the user where he is now, where he can back, and next steps. This logic should be maximum simple and straightforward. Keep user choices to a minimum if possible, avoid multiple branching of context in one place.
Add the ability to go back.
Users may need to go back one step while they are operating with the application. Add this feature to the user to change the information already entered or change the direction. The return function makes work more convenient and saves users from unnecessary actions, which, in turn, has a positive effect.
Reveal benefits right away.
Users should be able to solve their problems quickly. Help them do that by posting prominent calls to action. To keep users interested, draw their attention to the application’s main features and new parts where necessary. You can use a flat navigation style or use combined types. Otherwise, you will confuse and annoy them.
Create a logical menu.
A menu will not be intuitive to users if its categories are named illogically. Therefore, use names that do not overlap in meaning. If users cannot find the information they are looking for using search, they should readily do so using the menu.
Use standard navigation components.
The navigation views in iOS have many components that could improve your app usability. For example, from the box, you can swipe content from the left edge to get back to the previous screen. This feature is already clear for usual iOS users, so it is straightforward to use it intuitively. If you can use it — use it.
UI frameworks also have a standard component that can help you organize information structure and design navigation style depend on your needs. All this component is familiar for regular users. It easier for new users of your app to understand navigation flow. Further, we will take a look at different parts of navigation views.
NavigationView
NavigationView component presents a stack of views and represents a visible path in a navigation hierarchy. This view is similar to UIViewController. A navigation view pushes to stack one child view by navigation link, and only one child view could be visible at one time. Selecting NavigationLink goes to a new view onscreen using default animation and previous content hiding. The following code snippet defines ContentView with NavigationLink items in the List that navigate to different colored views.
We defined ContentView and set up NavigationView with List. The List view contains three NavigationLink instances with destination to RedView, GreenView, and BlueView. For the List, we set navigation title using navigationBarTitle(_:) modifier, you can add displayMode parameter to define appearance style of navigation bar title. If you want to change navigation views’ appearance and behavior, use the navigationViewStyle(_:) view modifier on NavigationView, not on the content. Remember, if the horizontal size is compact, the navigation view uses column presentation on the whole screen that navigates through a stack. Tapping on the link will move to a specific view, using standard transition animation, changing the navigation bar title, and putting back bar button. Also, it already has a back swipe gesture.
If set up in child view NavigationView, you will get doubled navigation stack as presented for RedView.
As you can see, you need to be careful using the NavigationView, especially for the Content-Driven navigation style.
Present view modally
Except pushing a new view in the navigation stack, you can present the view over existing. You have several method varieties to do that using sheet, fullscreenCover, popover modifiers. We will implement and take a look on all of them in our ContentView object.
Sheet method
With the sheet instance method, you can display views modally over existing ones. Use it when you need to bind a Boolean value to present a modal view. The example below shows how to push the YellowView modally.
We have two sections, “Push style” section push views in navigation stack and “Present style”, as you can see present modally. When the user toggles the showingYellowView variable by clicking or tapping on the button, we will display YellowView. The sheet method also has onDismiss closure to execute when dismissing the view. Unlike NavigationLinks, the sheet doesn’t require a NavigationView to work.
FullscreenCover method
The fullscreenCover method allows displaying a view that covers as much of the screen as possible. Compare to the sheet method, the presented view will not be dismissible by dragging downwards on iOS. It gives us a presentation style for times when you want to cover as much of the screen as possible, and in code, it works almost identically to the sheets. Important to remember that this method available for iOS from the 14 version and not available for macOS.
OrangeView displayed of full screen, so we must provide a close button or something like this. In this example, we bind our view with showingOrangeView property to toggle it when we want to close.
Customizing navigation bar back button
Unfortunately, you cannot customize the system back button directly. But what you can do is hide it and add a custom view to navigation bar items. Remember that you will lose the left swipe to go back approach.
Inside the GreenView body, add navigationBarBackButtonHidden(_:) modifier to hide the back button. And using navigationBarItems(leading:) add navigation bar items to the leading edge of the navigation bar for the current view.
You can see that when we push GreenView to the navigation stack, the back button is hidden and presented at the leading edge of our custom view. If you tap the button, it will dismiss the current view and go back to the previous screen. It works but without a left swipe.
For now, in SwiftUI, you can programmatically go back using environment property. It would be best if you got the value of the presentation mode from the view’s environment using an EnvironmentValues critical path. And inside buttons perform closure call dismiss method on wrapped value.
For more information of environment values provided, visit the EnvironmentValues structure.
Customizing the navigation bar
Unlike the back button, there are many ways to customize the navigation bar. But right now, in most cases, you need to use UIKit to do that. SwiftUI does not support all of them. Some of them navigationBarBackButtonHidden(_:) — hides the back button and navigationBarHidden(_:) — hides the whole navigation bar.
To set title available two modifiers navigationBarTitle(_:, displayMode:) and navigationTitle(_:), the second one from SwiftUI 2.0. Use statusBar(hidden:) to show or hide the status bar. The following code of our updated BlueView file demonstrating the navigation bar and status bar hidden depends on a fullScreen toggle.
To change the navigation bar color, background, font, and more. We need to go to UIKit. For those who are familiar with using UIKit before, it will not be difficult. You can add this code to the didFinishLaunchingWithOptions method in AppDelegate.swift. Or use the onAppear(_ :) modifier on the NavigationView itself. To make changes, we need to create a new instance of UINavigationBarAppearance, make any desired changes, assign it to the proxy server of the navigation bar appearance. The following code shows the use of this approach for our navigation bar in the ContentView file.
The first image below displays the final result of the navigation bar’s appearance. You can also change other properties of UINavigationBarAppearance to achieve the expected result, as the second image show.
Conclusion
In conclusion, SwiftUI provides a massive tool for creating navigation in your application. And with the new approach, you can easily support different platforms with little or no changes. Of course, there are still bugs, but hopefully, this year’s WWDC 2021 presentation will bring some edits and clarity on some points. But thanks to the ability to make changes through UIKit, we are not as limited as it might seem. Subscribe to me. There will be many more exciting articles to stay in trend.
Thank you for taking the time to read my story and for your support. If you enjoyed this article, please clap it to let me know. I will be sharing more stories in the future, so be sure to follow me to stay updated. Your feedback and support are greatly appreciated!
Follow Me: Twitter | LinkedIn
