NEW: Nominations are now open for the 2019 Swift Community Awards! >>

Adding a navigation bar

Paul Hudson    @twostraws   

By default iOS allows us to place content anywhere on the screen, including under the system clock and the home indicator. This doesn’t look great, which is why by default SwiftUI ensures components are placed in an area where they can’t be covered up by system UI or device rounded corners – an area known as the safe area.

On an iPhone 11, the safe area spans the space from just below the notch down to just above the home indicator. You can see it in action with a user interface like this one:

struct ContentView: View {
    var body: some View {
        Form {
            Section {
                Text("Hello World")
            }
        }
    }
}

Try running that in the iOS simulator – press the Play button in the top-left corner of Xcode’s window, or press Cmd+R.

You’ll see that the form starts below the notch, so by default the row in our form is fully visible. However, forms can also scroll, so if you swipe around in the simulator you’ll find you can move the row up so it goes under the clock, making them both hard to read.

A common way of fixing this is by placing a navigation bar at the top of the screen. Navigation bars can have titles and buttons, and in SwiftUI they also give us the ability to display new views when the user performs an action.

We’ll get to buttons and new views in a later project, but I do at least want to show you how to add a navigation bar and give it a title, because it makes our form look better when it scrolls.

You’ve seen that we can place a text view inside a section by adding Section around the text view, and that we can place the section inside a Form in a similar way. Well, we add a navigation bar in just the same way, except here it’s called NavigationView.

var body: some View {
    NavigationView {
        Form {
            Section {
                Text("Hello World")
            }
        }
    }
}

When you see that code in Xcode’s canvas, you’ll notice there’s a large gray space at the top of your UI. Well, that’s our navigation bar in action, and if you run your code in the simulator you’ll see the form slides under the bar as it moves to the top of the screen.

You’ll usually want to put some sort of title in the navigation bar, and you can do that by attaching a modifier to whatever you’ve placed inside. Modifiers are regular methods with one small difference: they always return a new instance of whatever you use them on.

Let’s try adding a modifier to set the navigation bar title for our form:

NavigationView {
    Form {
        Section {
            Text("Hello World")
        }
    }
    .navigationBarTitle(Text("SwiftUI"))
}

When we attach the .navigationBarTitle() modifier to our form, Swift actually creates a new form that has a navigation bar title plus all the existing contents you provided.

When you add a title to a navigation bar, you’ll notice it uses a large font for that title. You can get a small font with a slightly different call to navigationBarTitle():

.navigationBarTitle("SwiftUI", displayMode: .inline)

You can see how Apple uses these large and small titles in the Settings app: the first screen says “Settings” in large text, and subsequent screens show their titles in small text.

Because it’s so common to use large titles, there’s a shortcut version you can use that lets you use a plain string rather than a text view:

.navigationBarTitle("SwiftUI")

LEARN SWIFTUI FOR FREE I have a massive, free SwiftUI video collection on YouTube teaching you how to build complete apps with SwiftUI – check it out!

MASTER SWIFT NOW
Buy Testing Swift Buy Practical iOS 12 Buy Pro Swift Buy Swift Design Patterns Buy Swift Coding Challenges Buy Server-Side Swift (Vapor Edition) Buy Server-Side Swift (Kitura Edition) Buy Hacking with macOS Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with Swift Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.8/5