Navigation between views is one of the basic parts of knowledge that is needed to build an app with SwiftUI. Using SwiftUI, navigation between views is made much easier then UIKit.

This blog post will explain how navigation works between views in SwiftUI. When you never worked with SwiftUI before, please read the introduction to SwiftUI to get the basic knowledge.

Setting up the NavigationView

When navigating between views, a NavigationView is needed to allow the app to navigate. This can be compared to an UINavigationController in UIKit.

The NavigationView contains a body, which can be any view. To set the title of the current view, the function navigationBarTitle is needed. Inside this function, any view that is conformances to StringProtocol can be set, for example, a Text view.

Example:

struct ContentView: View {
   var body: some View {
      NavigationView {
         Text("body text")
            .navigationBarTitle(Text("Navigation title"))
      }
   }
}

Create a button using a NavigationLink

In SwiftUI, a NavigationLink is used to navigate between views. A NavigationLink is a button, where you can determine the body yourself. The body of the NavigationLink is the view your users have to press on.

The NavigationLink property has one parameter, which is the destination view. The body can contain any view, like a Text view or an Image view.

The body of the NavigationLink gets by default a blue overlay color. To disable this overlay, just set the button style to plain using the buttonStyle() function.

The example below shows how the NavigationLink is implemented in a simple view where the body contains a Text view. When the text “Press on me” is pressed, the app will navigate to the SecondContentView. The SecondContentView is just a copy of the ContentView.

Example:

import SwiftUI

struct ContentView: View {
   var body: some View {
      NavigationView {
         NavigationLink(destination: SecondContentView()) {
            Text("Press on me")
         }.buttonStyle(PlainButtonStyle())
      }
   }
}

struct SecondContentView: View {
   var body: some View {
      Text("Hello, World!")
   }
}

Navigate using a List view

When using a List view, you need to think a little different about navigating. When your user presses on an item inside the list, you may want to know which item was pressed, so you can react to this and serve the correct view to the user.

If creating a List view is new for you, please read my blog post about creating a dynamic list of items with SwiftUI. It explains the setup of a List containing dynamic items more in detail.

Most of the time the view after a List view is a detail view, which displays the full details of the item that was displayed on the list. To serve a detail page, you need to pass the object to the next view. In the example below, a view of type TodoItem is passed to the TodoDetailView.

Inside the List view, a NavigationLink is used, just like the example above creating a Button. The only difference is that now the destination view also contains an object which is needed to display a correct detail view.

import SwiftUI

struct TodoItem: Identifiable {
   var id = UUID()
   var action: String
}

struct ContentView: View {
    
   var todoItems: [TodoItem] = [
      TodoItem(action: "Writing Swift"), 
      TodoItem(action: "Writing SwiftUI")
   ]
    
   var body: some View {
      NavigationView {
         List(todoItems) { todoItem in
            NavigationLink(destination: TodoDetailView(todoItem: todoItem)) {
               Text(todoItem.action)
            }
         }.navigationBarTitle(Text("Todo Items"))
      }
   }
}

struct TodoDetailView: View {
   var todoItem: TodoItem

   var body: some View {
      Text(todoItem.action)
   }
}

Conclusion

Navigating between views with SwiftUI can easily be done using a NavigationLink. Before navigation is possible, the view must be inside a NavigationView, which will contain the stack with views. The example code can be found here.

🚀 Like this article? Follow me on Twitter for more SwiftUI related blogs!

Categories:SwiftUI