UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Customizing the navigation bar appearance

Paul Hudson    @twostraws   

iOS likes its navigation bars to look a very particular way, but we do have some limited control over its styling.

First, you've seen how we can use large or inline navigation title styles, giving us large or small text at the top. So, this will use a small title at the top:

NavigationStack {
    List(0..<100) { i in
        Text("Row \(i)")
    }
    .navigationTitle("Title goes here")
    .navigationBarTitleDisplayMode(.inline)
}

You'll see the navigation bar at the top is invisible by default, but as soon as you scroll up a little it gets a solid gray background so that its title stands out clearly from the contents of the list.

SwiftUI lets us customize that just a little: we can specify an alternative color to be used for that background. Remember, this is only visible when the list scrolls under the navigation bar, so you won't see it at first.

To try it out, add this below navigationBarTitleDisplayMode():

.toolbarBackground(.blue)

When you run the app and scroll a little, you'll see the navigation bar becomes a solid blue color. You'll also see the title might be hard to read, because it will be black text in light mode.

You can fix that by adding another modifier below the previous one, forcing the navigation bar to use dark mode at all times, which in turn means the title text will be white:

.toolbarColorScheme(.dark)

Tip: Later on you'll meet other kinds of toolbars. Those two modifiers affect all bars, but if you want to just modify the navigation bar you should add for: .navigationBar as a second parameter to both of them.

There's one last way to customize the navigation bar: you can hide it, either always or based on the current state in your app.

To do that, add the toolbar() modifier set to .hidden, either for all bars or just the navigation bar:

.toolbar(.hidden, for: .navigationBar)

Hiding the toolbar won't stop you from navigating to new views, but it might cause scrolling views to go under system information such as the clock – be careful!

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

Sponsor Hacking with Swift and reach the world's largest Swift community!

BUY OUR BOOKS
Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS 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.5/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.