Home iOS & Swift Books Real-World iOS by Tutorials

8
Navigation Written by Aaqib Hussain

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

Previously, you learned to develop a framework and publish it as a Swift package. PetSave is taking shape, in the following chapters you’ll improve the user experience by introducing things like navigation and animations.

Navigation allows you to create experiences for your users. It covers how the user will navigate through the app and the different ways of getting the user from one place to another. One example is a feature you’ll work on in this chapter that allows users to get to a specific place in your app from a web browser.

Please note that this chapter is optional. If you would like to keep working on the final version of PetSave, feel free to move to the next chapter. Nonetheless, there’s a lot of useful information in this chapter that can help understand navigation not only on PetSave but in any app.

In this chapter, you’ll learn in detail about:

  • Navigation view

  • Types of navigation

  • Passing data between views

  • Navigating using a router

  • Navigate between SwiftUI and UIKit views

  • Presenting views

  • Tab view

You’ll learn how each of these components works and how to create navigation with them in different views.

It all starts with the navigation view.

Navigation view

NavigationView lets you arrange views in a navigation stack. Users can navigate to a destination view via a NavigationLink. The destination view is pushed into the stack. Whenever a user taps back or performs a swipe gesture, you can free up the stack by popping out the destination view.

You style the NavigationView with navigationViewStyle(_:). It currently supports DefaultNavigationViewStyle and StackNavigationViewStyle.

  • DefaultNavigationViewStyle: Use the navigation style of the current context where the view is presented.
  • StackNavigationViewStyle: A style where the view shows only a single top view at a given time.

Note: DoubleColumnNavigationViewStyle is now deprecated. iOS 15 comes with ColumnNavigationViewStyle to represent views in a column. This navigation style is more common in larger screen sizes like those on the bigger iPhones, iPads or a Mac.

You can create a custom style by implementing your own version of NavigationViewStyle or applying navigationTitle(_:) to customize the presented view’s appearance.

Navigation link

A NavigationLink is a view that controls a navigation presentation. It provides the view that will fire the navigation and present the destination.

var body: some View {
  // 1
  List {
  // 2
    ForEach(animals) { animal in
      // 3
      NavigationLink(destination: AnimalDetailsView()) {
        AnimalRow(animal: animal)
      }
    }

    footer
  } // 4
  .listStyle(.plain)
}

ForEach(animals) { animal in
  NavigationLink(
    animal.name ?? "",
    destination: AnimalDetailsView()
  )
}
Animals near you view with just animal names.
Enopuql piow zee jaul kivc posx agepeg hedum.

  @State var shouldShowDetails: Int? = -1
  var body: some View {
    List {
      ForEach(Array(animals.enumerated()), id: \.offset) { index, animal in
            NavigationLink(
              animal.name ?? "",
              destination: AnimalDetailsView(),
              tag: index,
              selection: $shouldShowDetails
            )
        }

      footer
    }
    .listStyle(.plain)
  }

Types of navigation

Navigation plays a vital role in giving the user a seamless experience. You must implement navigation so that the app works smoothly. Apple provides three styles of navigation:

Hierarchical navigation

In hierarchical navigation, the root view is the navigation view. You go from one screen to another. The navigation view pushes these screens into a navigation stack. You’ll find this navigation style in the Settings and Mail apps.

Hiamegdtowes hanoxasuuh xoermey.

Flat navigation

Flat navigation is usually a combination of TabView and NavigationView, which lets you switch between content categories. The Music and App Store apps are examples of such navigation.

Vras vedapamaad caujcaz.

Content-driven or experience-driven navigation

Content-driven or experience-driven navigation depends on the app’s content. Navigation may also depend on a user navigating to a particular screen. The Games and Books apps are examples of Content-Driven navigation.

Ruplisk-knuyoc iv Etwemiijpa guzilefaiz luidbof.

Passing data between views

There are four ways to pass data:

Using a property

Take it step by step. First, how do you use a property to pass data between views? You did that in earlier chapters, but you’ll revisit it now to understand better.

struct AnimalDetailsView: View {
  var name: String
  var body: some View {
    Text(name)
  }
}

NavigationLink(
  destination: AnimalDetailsView(
  name: animal.name ?? "")
){
   AnimalRow(animal: animal)
}

Using @State and @Binding

To keep both views, AnimalsNearYouView and AnimalDetailsView, up-to-date and reflecting proper data, you’ll need to manage the state. The sender view holds the data in a property marked with @State. The receiver receives the latest data with @Binding. This type of data passing assures both views stay updated. No matter where the data changes, both views get notified.

struct AnimalDetailsView: View {
  var name: String
  // 1
  @Binding var isNavigatingDisabled: Bool
  var body: some View {
    Text(name)
    // 2
    Button(isNavigatingDisabled ? "Enable Navigation" : "Disable Navigation") {
      isNavigatingDisabled.toggle()
    }
  }
}

AnimalDetailsView(name: "Snow", isNavigatingDisabled: .constant(false))

@State var isNavigatingDisabled = false

Button(isNavigatingDisabled ? "Enable Navigation" : "Disable Navigation") {
  isNavigatingDisabled.toggle()
}

ForEach(animals) { animal in
  // 1
  NavigationLink(
    destination: AnimalDetailsView(
      name: animal.name ?? "",
      isNavigatingDisabled: $isNavigatingDisabled
    )
  ) {
    AnimalRow(animal: animal)
  }
  .disabled(isNavigatingDisabled) // 2
}
Animals near you view enabled using @State and @Binding.
Edilews beot coe yoev ududquz iruwf @Bcope axd @Takmesk.

Animals near you view disabled using @State and @Binding.
Unugihx saan hia paol koluyroc abecc @Wnuho ahb @Rucvoxk.

Animal details view using @State and @Binding.
Inaxem pigeoky zeej ecuqk @Ywote ubm @Xejyofp.

Animals near you view disabled again using @State and @Binding.
Uyiwowt coes poo waur levisjat oxoat ukizk @Vwigu ebm @Lihcoyq.

Using @StateObject and @ObservedObject

@StateObject holds the object responsible for updating the UI. You use it to refer to a class-type property in a view. You use the @ObservedObject property wrapper inside a view to store an observable object reference. Properties marked with @Published inside the observed object help the views change.

class NavigationState: ObservableObject {
  @Published var isNavigatingDisabled = false
}

@ObservedObject var navigationState: NavigationState

@Binding var isNavigatingDisabled: Bool

var body: some View {
  Text(name)
  Button(
    navigationState.isNavigatingDisabled ?
    "Enable Navigation" :
    "Disable Navigation"
  ) {
    navigationState.isNavigatingDisabled.toggle()
  }
}

AnimalDetailsView(
  name: "Snow",
  navigationState: NavigationState()
)

@StateObject var navigationState = NavigationState()

@State var isNavigatingDisabled = false

Button(
  navigationState.isNavigatingDisabled ?
  "Enable Navigation" : "Disable Navigation"
) {
  navigationState.isNavigatingDisabled.toggle()
}

ForEach(animals) { animal in
  NavigationLink(
    destination: AnimalDetailsView(
      name: animal.name ?? "",
      navigationState: navigationState
    )
  ) {
    AnimalRow(animal: animal)
  }
  .disabled(navigationState.isNavigatingDisabled)
}
Animals near you view enabled using @StateObject and @ObservedObject.
Ewojatt taos yoo diem adowwoz aqazn @DbapuAfjecj egh @AmquhlepEfyomq.

Animal details view using @StateObject and @ObservedObject.
Efesab wucoedx ruof igucc @LsezeAlqawm obm @IkcinzogEtnaml.

Using view’s environment

Environment objects can help you synchronize views. It catches the objects that are injected into the SwiftUI environment.

@EnvironmentObject var navigationState: NavigationState

AnimalDetailsView(name: "Snow").environmentObject(NavigationState())

@StateObject var navigationState = NavigationState()

ForEach(animals) { animal in
  NavigationLink(
    destination: AnimalDetailsView(name: animal.name ?? "")
    .environmentObject(navigationState)
  ) {
    AnimalRow(animal: animal)
  }
  .disabled(navigationState.isNavigatingDisabled)
}
Animals near you view enabled using @StateObject and @EnvironmentObject.
Atohufp peuw coo muec eyexjod olond @XriluUfjoyd asg @EkwiziknohnApqilh.

Animal details view using @StateObject and @EnvironmentObject.
Enujak leqaabj sais onodv @ThehoUtpavn ash @InwugekhemlOmxupm.

Navigating using a router

Having multiple navigation links can make your view complex. You can decouple navigation links and make them more flexible by using a router. You’ll avoid nesting it inside the UI and therefore have more control over it. Having a router makes it easy to navigate and makes the UI agnostic of the navigation.

import SwiftUI
protocol NavigationRouter {
  // 1
  associatedtype Data
  // 2
  func navigate<T: View>(
    data: Data,
    navigationState: NavigationState,
    view: (() -> T)?
  ) -> AnyView
}

struct AnimalDetailsRouter: NavigationRouter {
  // 1
  typealias Data = AnimalEntity

  func navigate<T: View>(
    data: AnimalEntity,
    navigationState: NavigationState,
    view: (() -> T)?
  ) -> AnyView {
    AnyView( // 2
      NavigationLink(
        destination: AnimalDetailsView(name: data.name ?? "")
        .environmentObject(navigationState) // 3
      ) {
        view?()
      }
    )
  }
}

let router = AnimalDetailsRouter()

router.navigate(
  data: animal,
  navigationState: navigationState
) {
  AnimalRow(animal: animal)
}
.disabled(navigationState.isNavigatingDisabled)
Animals near you view enabled using navigation router.
Ifehamh roak vae siug ocubcuw iwots liruvakuab bietin.

Animal details view using navigation router.
Iwuxug moraizv fiov okizc jorapazeen huodug.

Animals near you view disabled using navigation router.
Ecenalp poiy ruo beel lojakkek ukexw zadihemauk waohiy.

Navigating using a router to a UIViewController

You learned how to use a router. Next, you’ll use it to navigate to an existing AnimalDetailsViewController.swift in UIKit.

xib file with a UILabel and a UIButton.
zih zato xolb e OUNeqox odg e AUMejyej.

import UIKit
import SwiftUI

struct AnimalDetailsViewRepresentable: UIViewControllerRepresentable {
  // 1
  var name: String
  // 2
  @EnvironmentObject var navigationState: NavigationState
  // 3
  typealias UIViewControllerType = AnimalDetailsViewController
  // 4
  func updateUIViewController(
    _ uiViewController: AnimalDetailsViewController,
    context: Context) {
      // 5
      uiViewController.set(
        name,
        status: navigationState.isNavigatingDisabled
      )
      // 6
      uiViewController.didSelectNavigation = {
        navigationState.isNavigatingDisabled.toggle()
      }
  }
  // 7
  func makeUIViewController(context: Context)
    -> AnimalDetailsViewController {
      let detailViewController =
        AnimalDetailsViewController(
          nibName: "AnimalDetailsViewController",
          bundle: .main
        )
      return detailViewController
  }
}

func navigate<T: View>(
  data: AnimalEntity,
  navigationState: NavigationState,
  view: (() -> T)?
) -> AnyView {
  AnyView(
    NavigationLink(
      destination: AnimalDetailsViewRepresentable(
        name: data.name ?? ""
      ).environmentObject(navigationState)
    ) {
      view?()
    }
  )
}
Animal details view using UIViewControllerRepresentable.
Ayemak zoxeogw deun uzaqv UIPuanPuyslixbalFefpanicgutma.

Presenting views

SwiftUI provides you with two ways of presenting a view: Full screen cover and Sheet.

Full screen cover

You use full screen when you want to cover the entire screen and don’t want the user to swipe down to close the screen.

Sheet

Use a sheet when you want to let the user swipe the current view down to close it. This swiping to close feature is something you can disable as well.

ContentView().fullScreenCover(
  isPresented: $shouldPresentOnboarding,
  onDismiss: nil
)

ContentView().sheet(
  isPresented: $shouldPresentOnboarding,
  onDismiss: nil
)
Onboarding screens using a sheet view modifier.
Uymoernetf pzriagf ogalg e xkeiq vaij somomeuw.

Using tab view

A tab view is a SwiftUI component that helps switch between multiple child views. It’s an example of flat navigation. If you have experience with UIKit, TabView is the SwiftUI version of UITabBarController.

var body: some View {
  TabView {
  // 1
    AnimalsNearYouView(
      viewModel: AnimalsNearYouViewModel(
        animalFetcher: FetchAnimalsService(
          requestManager:
            RequestManager()
        ),
        animalStore: AnimalStoreService(
          context: PersistenceController.shared.container.newBackgroundContext()
        )
      )
    )
    .tabItem {
      Label("Near you", systemImage: "location")
    }
    .environment(\.managedObjectContext, managedObjectContext)
  // 2
    SearchView()
      .tabItem {
        Label("Search", systemImage: "magnifyingglass")
      }
      .environment(\.managedObjectContext, managedObjectContext)
  }
}

.badge(2)
Near you tab with a badge of 2.
Weig weu muw runl i vodyi iv 5.

enum PetSaveTabType {
  case nearYou
  case search
}

class PetSaveTabNavigator: ObservableObject {
  // 1
  @Published var currentTab: PetSaveTabType =  .nearYou
  // 2
  func switchTab(to tab: PetSaveTabType) {
    currentTab = tab
  }
}
// 3
extension PetSaveTabNavigator: Hashable {
  static func == (
    lhs: PetSaveTabNavigator,
    rhs: PetSaveTabNavigator
  ) -> Bool {
    lhs.currentTab == rhs.currentTab
  }

  func hash(into hasher: inout Hasher) {
    hasher.combine(currentTab)
  }
}

@StateObject var tabNavigator = PetSaveTabNavigator()

var body: some View {
// 1
  TabView(selection: $tabNavigator.currentTab) {
    AnimalsNearYouView(
      viewModel: AnimalsNearYouViewModel(
        animalFetcher: FetchAnimalsService(
          requestManager:
            RequestManager()
        ),
        animalStore: AnimalStoreService(
          context: PersistenceController.shared.container.newBackgroundContext()
        )
      )
    )
    .badge(2)
    // 2
    .tag(PetSaveTabType.nearYou)
    .tabItem {
      Label("Near you", systemImage: "location")
    }
    .environment(\.managedObjectContext, managedObjectContext)

    SearchView()
      .tag(PetSaveTabType.search) // 3
      .tabItem {
        Label("Search", systemImage: "magnifyingglass")
      }
      .environment(\.managedObjectContext, managedObjectContext)
  }
}

Deep link navigation with tab view

Now that you understand how to switch TabView programmatically. You’ll use this to navigate your way with a deep link.

Add URL Types.
Anl ODH Bnsey.

Add URL Schemes.
Ocj ENP Vhvudek.

static func deepLinkType(url: URL) -> PetSaveTabType {
  if url.scheme == "petsave" {
    switch url.host {
    case "nearYou":
      return .nearYou
    case "search":
      return .search
    default:
      return .nearYou
    }
  }
  return .nearYou
}

// 1
.onOpenURL { url in    
  // 2
  let type = PetSaveTabType.deepLinkType(url: url)
  // 3
  self.tabNavigator.switchTab(to: type)
}
Deep link alert.
Qoay likz irarl.

PetSave's search opened using deep link.
ZawBezi'f yiaxxb uganav adust tiak wimn.

PetSave's near you opened using deep link.
LopHaga'k maim yoi anitus imarl peuv denj.

Key points

  • You can use a router to decouple the code and do navigation.
  • To make communication between SwiftUI and UIKit, you must implement UIViewControllerRepresentable.
  • To provide the user with a seamless experience, follow hierarchical, flat or content-driven navigation.
  • You can pass the view specific data using @State and @Binding.
  • You can pass custom data types using @StateObject and @ObservedObject.
  • You can create custom observable objects by conforming to ObservableObject. Make one of its properties a @Published so that it updates itself when that property changes.
  • You can use @Environment to read the system objects injected using .environment().
  • @EnvironmentObject can receive any object injected into the environment through .environmentObject(_).

Where to go from here?

That brings the end of this chapter. In this chapter, you went through various ways of performing navigation. Having a smooth navigational experience is something every user wants in an app. So when implementing navigation, you should always be mindful of that.

9. Adding Animations & Custom Controls 7. Multi-Module App

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

© 2022 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99