SwiftUI | Navigation | Tic-Tac-Toe Game

Published in

Globant

4 min readJul 22, 2022

This is part 3 of the Tic-Tac-Toe Game series. Till now we have explored Text and Button views in SwiftUI, here we will learn Navigation in SwiftUI. SwiftUI provides NavigationView and NavigationLink for roaming around the views of the app.

NavigationView

NavigationView is one of the most important components which provides a container view for pushing, popping and presenting views in a navigation stack.

Please refer to this article for accessing DashboardView file. Move all the code from DashboardView to WelcomeTextView and update DashboardView as follow:

struct DashboardView: View {
   var body: some View {
      NavigationView {
         WelcomeTextView()
      }
   }
}

UI will look the same as nothing is updated at screen level, it’s just that we have added NavigationView as the parent container which allows us to roam around views.

Navigation Title

We can use navigationTitle modifier for giving a title to the navigation view.

Please note that modifiers related to navigation should be applied to children of NavigationView, instead of NavigationView.

We can see “Launch screen” as the navigation title in large mode. if you wish to make it inline to the navigation bar then use navigationBarTitleDisplayMode modifier which has three modes inline, large and automatic.

WelcomeTextView().navigationTitle(“Launch screen”)
   .navigationBarTitleDisplayMode(.inline)

There are modifiers available for hiding the navigation bar (navigationBarHidden) and back button (navigationBarBackButtonHidden).

Navigation bar items

Adding navigation bar items and their usage is one of the simplest things which you will achieve in iOS app development with SwiftUI. navigationBarItems modifier provides options for adding views at the leading and trailing of the navigation bar where either can be optional.

Here, Text view is added on the left side of navigation bar whereas HStack is used for adding two views on the right side.

Please go through apple documentation for learning and downloading SF Symbol.

Below is a small demonstration of how SF Symbols are used after their installation on mac. You can even customize these icons as per your need then download the SVG and import it into your Xcode project.

NavigationLink

Till now we have added a Navigation view to our app, now we will add a navigation link to go to a new view. The Navigation link provides three initializers:

Text-only NavigationLink

NavigationView {
   VStack{
      WelcomeTextView().navigationTitle(“Launch screen”)
      NavigationLink(“Let’s get started!!”) {
         PlayButtonView()
      }
   }
}

Here NavigationLink will create one Text view with provided string and on its tap PlayButtonView will be pushed. Back button of navigation will take the title as “Launch screen”.

Non-text-only NavigationLink

Adding an underline to the “Let’s get started!!” is not possible with a text-only initializer. To resolve this, there is one more initializer which takes view as a label and can be customized as per need.

PlayButtonView is having both navigation title and back button that’s why back button is having title as “Back” not “Launch screen”.
Navigation bar appearance automatically takes values from the previous view’s details unless and until they are changed with other views.

It’s a good practice to have NavigationView at the top of the view stack to avoid navigation issues like:

var body: some View {
   VStack{
      WelcomeTextView().navigationTitle(“Launch screen”)
      NavigationView {
         NavigationLink {
.....

Navigation title is missing at home screen.
Navigation stack will be followed below WelcomeTextView.

Always put NavigationView inside TabView.

Conditional Navigation

The above two types NavigationLink perform operation whenever a user taps on them but if we wish to perform navigation whenever a certain condition is fulfilled then just add isActive argument in the above initializers and we are good to go.