Join our book community on Discord

https://packt.link/iosdevelopment

When we refer to navigation, we are referring to the different design techniques that provide the user experience of our app. Apps with good navigation are intuitive and easy to use, and users can focus on the content and experience. Our goal when implementing navigation is to allow people to discover the content and interact with it, without even paying attention to how to do it. In the previous chapter, we learned about how to present views modally, to draw the attention of the user to an important task, and to offer focused interaction. In this chapter, we will learn about showing our content on different screens, and how to navigate among these. We show content on different screens to better organize our app and separate different user experiences.Apple provides several components to implement navigation. Some components are meant to be used at the top level of the navigation hierarchy, providing a logical grouping...

Technical requirements

The code in this chapter is based on Xcode 15.0 and iOS 17.0. You can download and install the latest version of Xcode from the App Store. You'll also need to be running macOS Ventura (13.5) or newer. Simply search for Xcode in the App Store and select and download the latest version. Launch Xcode and follow any additional installation instructions that your system may prompt you with. Once Xcode has fully launched, you're ready to go.All the code examples for this chapter can be found on GitHub at https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd-Edition/tree/main/Chapter07-App-Navigation.

Simple navigation with NavigationStack

Throughout the previous chapters, we have seen different apps using NavigationStack and NavigationLink to provide simple navigation. So, let’s learn about NavigationStack in detail. A navigation stack is ideal for displaying hierarchical content because it allows users to go from a more general view to a more detailed view of the content. The user goes down the content hierarchy by performing an action in the top-level view, usually a tap on a button. When the action occurs, a new view replaces the original view. We call this action pushing the view onto the navigation stack. At the top of this new view is a navigation bar with a title and a back button. The user can go back to the previous view by tapping on the back button, and we call this action popping the view from the navigation stack. This is the most common navigation in iOS apps, present since the beginning of iOS more than a decade ago, and everyone is familiar with it. In this...

Typed data-driven navigation with NavigationStack

1. When NavigationStack was introduced with iOS 16, NavigationView was deprecated, and NavigationLink was updated with new functionality. If you use old code with NavigationView, it can be directly replaced with NavigationStack in its simplest form, as we explained in the previous recipe. For more complex cases, Apple has a document with recommendations on how to migrate to NavigationStack and the new NavigationLink functions.
2. Two of the most exciting features of NavigationStack are: 1) navigation is driven by data, and 2) we separate the view code from the navigation code. Since the navigation is driven by data, it is possible to implement arbitrary navigation to any of the views in a navigation stack by manipulating the data. This opens the possibility for flexible navigation patterns like the one needed for deep links.

In this recipe, we will create an app to keep track of our favorite foods to illustrate how a typed data-driven navigation...

Untyped data-driven navigation with NavigationStack

When using a NavigationStack with data-driven navigation, we may need to navigate to views driven by different data types. One way to handle this situation would be to implement an enum type with associated values of different data types. Then, in the destination closure of the navigationDestination(for:destination:) modifier, we could have a switch statement over the different associated values, instantiating different types of views, one for each associated value. However, Apple already thought of this situation, and provides NavigationPath, a type that holds an array of type-erased data to represent the content of the navigation stack.

Getting ready

Our starting point will be the app from the previous recipe. Either duplicate the folder of the app you created in the previous recipe or download the complete code for the previous recipe from the GitHub repository.

How to do it…

1. To illustrate the untyped data-drive navigation...

Multi-column navigation with NavigationSplitView

NavigationSplitView is a container view that presents views in two or three columns; selections in leading columns control the presentations in subsequent columns. It was introduced with iOS 16 along with NavigationStack and the new NavigationLink functions. The mail app on the iPad is an example of a three-column layout you may be familiar with.

Getting ready

1. Our starting point will be the app from the “Typed data-driven navigation with NavigationStack” recipe. Either duplicate the folder of the app you created in that recipe, or download the complete code for that recipe from the GitHub repository.

How to do it…

1. To show the power of NavigationSplitView, we will modify the layout of the app to use a three-column layout for a regular horizontal size class environment, like in the iPad, and fall back to a traditional navigation stack layout for a compact horizontal size class environment, like in the iPhone. The...

Navigating between multiple views with TabView

TabView is another navigation container that switches between multiple child views, using a bar with buttons commonly placed at the bottom of the screen. When the user taps on one of the buttons in the tab bar, the view associated with that tab replaces the previously selected view. A typical example of using this navigation container is the Music app on iOS. Tab views are usually used as the root view of an app, and they are useful to show unrelated content in each tab. For related content, we would use a navigation stack or a navigation split view, as we saw in the previous recipes.

Getting ready

Create a new SwiftUI iOS app named UsingTabViews.

How to do it…

1. We will create an app with a TabView with two child views. One will display the made-up best games of 2021, while the other will display various currencies used around the world. The steps are given here:
2. Create a new SwiftUI view file named HomeView, and update HomeView...

Programmatically switching tabs on a TabView

In the preceding recipe, we learned how to switch between tabs by tapping on tab items at the bottom of the screen. However, we may also want to programmatically trigger tab switching. In this recipe, we will use a tap gesture to trigger the transition from one tab to another.

Getting ready

Create a new SwiftUI app named TabViewWithGestures.

How to do it…

We will create a TabView with two items, each containing some text that triggers a tab switch on click. The steps are given here:

1. Open the ContentView.swift file, and add a @State variable to hold the value of the currently selected tab:

struct ContentView: View {
    @State private var selectedTab = 0
...
}

1. Replace the Text view in the body variable with a TabView, with two tab items:

    var body: some View {
        TabView(selection: $selectedTab) {
            Text("Left Tab. Tap to switch to right")
                .onTapGesture {
                    selectedTab...

Rendering a gradient view in SwiftUI

SwiftUI has several ways of rendering gradients. A gradient can be used to fill a shape, or even fill a border.

In this recipe, we will understand what types of gradients we can use with SwiftUI and how to define them.

Getting ready

Create a SwiftUI app called GradientViews.

How to do it…

SwiftUI has four different types of gradients:

• Linear gradients
• Radial gradients
• Elliptical gradients
• Angular gradients

In each one, we can define the list of colors that will smoothly transform into each other. Depending on the type of gradient, we can define some additional properties such as the direction, radius, and angles of the transformation.

To explore all of them, we are going to add a Picker view to select the type of gradient we want to draw on the screen.

The ContentView struct will have a Text component that shows the selected gradient. We can do this by performing the following...