Navigation (SwiftUI)

Prepared and tested with Xcode 13.3.1 and Swift 5.3 (last update: 2022-05-20)

In this part you will learn how to navigate between multiple views organized hierarchicaly.

Table of contents

Introduction
Project
Summary

Introduction

In old times, when developing applications using UIKit, developers typically utilized segues to navigate between views. In Swift UI, you use a different method of navigation based on navigation links. In SwiftUI a container view which allows you to manage other views in a navigation interface is NavigationView .

Project

Step 1: create project
Create a new iOS project, as you did in Start Xcode and set up a project section of First application (SwiftUI) part and name it SwiftUI iOS Navigation:

Step 2: create navigation "frame"
Open in editor the ContentView.swift and in ContentView structure replace default Text with NavigationView:

Swift

struct ContentView: View { var body: some View { NavigationView { } } }

1
2
3
4
5
6
7

struct ContentView: View {
  var body: some View {
    NavigationView {

    }
  }
}

This is how you create a base for navigation, but at this moment you will see an empty screen even without an empty navigation bar at the top.

Step 3: add first view
Open in editor the ContentView.swift and in ContentView structure replace default Text with NavigationView:

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Main")
      }
      .navigationTitle("Main view")
    }
  }
}

struct ContentView: View {

var body: some View {

NavigationView {

VStack {

Text("Main")

}

.navigationTitle("Main view")

}

This is how you create a base for navigation, but at this moment you will see an empty screen even without an empty navigation bar at the top.

Step 4: Customize the navigation bar title
You can customize the way the title is shown by applying a navigationBarTitleDisplayMode() modifier and use one of three options:

The .large option shows large title, which is useful for top-level views in your navigation stack.
The .inline option shows small title, which is useful for subsequent views in your navigation stack. You should use this option for all views that get pushed on to the navigation stack.
The .automatic option is the default, and uses whatever the previous view used. For most applications, you should select this option for your initial view, which you can get just by ignoring the modifier entirely.

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Main")
      }
      .navigationTitle("Main view")
      .navigationBarTitleDisplayMode(.inline)
    }
  }
}

struct ContentView: View {

var body: some View {

NavigationView {

VStack {

Text("Main")

}

.navigationTitle("Main view")

.navigationBarTitleDisplayMode(.inline)

}

Step 5: add buttons to the navigation view
You can place button both on left and right side of the navigation bar. If you want to place more buttons on the same side of the navigation bar, remember to place them inside an HStack.

struct ContentView: View {
  @State private var edit = false
  @State private var value = 0
  
  private var title: String {
    if !edit {
      return "Main"
    } else {
      return "Main edit"
    }
  }
  
  var body: some View {
    NavigationView {
      VStack {
        Text(title)
        Text("\(value)")
      }
      .navigationTitle("Main view")
      .navigationBarItems(
        leading:
          HStack {
            Button(action: {
              if edit {
                value += 1
              }
            }){
              Image(systemName: "plus.circle")
            }
            Button(action: {
              if edit {
                value -= 1
              }
            }){
              Image(systemName: "minus.circle")
            }
          },
        trailing:
          HStack {
            Button("Edit"){
              edit.toggle()
            }
          }
      )
    }
  }
}

struct ContentView: View {

@State private var edit = false

@State private var value = 0

private var title: String {

if !edit {

return "Main"

} else {

return "Main edit"

}

var body: some View {

NavigationView {

VStack {

Text(title)

Text("\(value)")

}

.navigationTitle("Main view")

.navigationBarItems(

leading:

HStack {

Button(action: {

if edit {

value += 1

}

}){

Image(systemName: "plus.circle")

}

Button(action: {

if edit {

value -= 1

}

}){

Image(systemName: "minus.circle")

}

trailing:

HStack {

Button("Edit"){

edit.toggle()

}

)

}

Step 6: push new view onto NavigationView
Add two new view to the ContentView.swift file:

struct MoreDetails: View {
  var body: some View {
    VStack {
      Text("More details")
    }
    .navigationTitle("More details view")
  }
}

struct DetailView: View {
  var body: some View {
    VStack {
      Text("Details")
      NavigationLink(destination: MoreDetails()) {
        Text("Show more details")
      }
    }
    .navigationTitle("Details view")
  }
}

struct MoreDetails: View {

var body: some View {

VStack {

Text("More details")

}

.navigationTitle("More details view")

}

struct DetailView: View {

var body: some View {

VStack {

Text("Details")

NavigationLink(destination: MoreDetails()) {

Text("Show more details")

}

.navigationTitle("Details view")

}

Next replace ContentView structure content with the following code:

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Main")
        NavigationLink(destination: DetailView()) {
          Text("Show detail view")
        }
      }
      .navigationTitle("Main view")
    }
  }
}

struct ContentView: View {

var body: some View {

NavigationView {

VStack {

Text("Main")

NavigationLink(destination: DetailView()) {

Text("Show detail view")

}

.navigationTitle("Main view")

}

Now you can test if your links work as it is showned below:

Notice that to go back from Detail view you have to press Main view button located on the left side of the navigation bar. To go back from the last view, More details view, you have to press not Details view as you may expected, but Back button. The rules for naming the Back button are:

By default, the button title is the navigationTitle of the previous screen.
Above is true unless the title is too long to fit, in which case the word Back is use instead.

If you replace:

.navigationTitle("Details view")

1	.navigationTitle("Details view")

with:

.navigationTitle("Details")

1	.navigationTitle("Details")

back button on the last (third) view is Details instead of Back:

Summary

In this part you will learn how to navigate between multiple views organized hierarchicaly.

The key points of this part are:

How to create basic navigation view.
Customize the navigation bar title.
Add buttons to the navigation view.
Push new view onto navigation stack with NavigationLink.