Styling the Navigation Bar in your iOS Apps

The more decoration the better!

So you’ve started working on a wee app, maybe even a big app, and you want to achieve something like this:

This gon’ be fun

It looks so simple: white status bar text, a dark red for underneath the status bar and then the navigation bar having a similar, but classily different colour. Just kidding, these colours were slung together at ‘breakapp’ speed just for you.

The thing is this can be quite tricky to figure out how to do in iOS unless you know where to look. Sometimes it feels like you’re mastering google searches rather than how to code finding this stuff out. But Fear Not dear friends, read on and I shall show you the ways of navigation bar wizardry…


The first thing we need to do is navigate to your apps’ AppDelegate. When you set the styles here, they will be app-wide.

First let’s make the status bar style (the white text and battery info etc on the top) to light content.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { 
application.statusBarStyle = .lightContent
}

Inside of the didFinishLaunchingWithOptions function simply enter the code above. Build and run. Wait it’s not worked.

Turns out you also need to confirm this option by heading over to your info.plist and add a new key: ‘View controller-based status bar appearance’ and set it to ‘NO’. If you just type ‘V’ it actually appears first in the list which saves you memorising it — if you really want to memorise it use a mnemonic like : ‘Very curvy Bottles shouldn’t be allowed’ (V.C.B.S.B.A)… Anyway

Boom! Your app now has nice light content. But how do we juice up the NavigationBar to get some colourful injection into it?

UINavigationBar.appearance().barTintColor = UIColor(red: 230/255, green: 20/255, blue: 20/255, alpha: 1)

Turns out you just use barTintColor and it’s straightforward enough. As an aside, you may want to remove the slight shadow on the bottom of the NavigationBar. If so do this:

UINavigationBar.appearance().shadowImage = UIImage()

This effectively turns off the shadow, although seems a bit hacky.

Banana alert

But show me how you did that little dark bar at the top underneath the status bar!!!! I’ll shoot

Yes. Lets do that. Let’s start by defining a nice little view within a closure. This contains all the properties we need and returns it all boxed up. Yay!

let navigationBackgroundBar: UIView = {
let view = UIView()
view.backgroundColor = UIColor(red: 220/255, green: 10/255, blue: 10/255, alpha: 1)
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()

Above you’re simply creating a view, setting it’s background colour, stopping the autotranslation of constraints that happens with manual views (its just trying to help, but we don’t need it) and returning the view.

Almost there.

window?.addSubview(navigationBackgroundBar)

If you build and run after adding the view into the view hierarchy you won’t see it. There is just one more step…

// Horizontal constraint
window?.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|",
options: NSLayoutFormatOptions(),
metrics: nil,
views: ["v0":navigationBackgroundBar]))
// Vertical constraint with a height of 20
window?.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0(20)]",
options: NSLayoutFormatOptions(),
metrics: nil,
views: ["v0":navigationBackgroundBar]))

I’m not going to dig into Visual Format Language in this talk, but to summarise you need to apply constraints for the app to know how to handle your view or it simply won’t appear.

In the first constraint you set it to be the full width of the window and in the second constraint you pin it to the top of the window and make it a height of 20. These are ideal constraints and will produce the effect we’ve been looking for!

BOOM! You did it. Not so bad eh? If you can think of a better memory technique for memorising that key name then do let me know, won’t you… Back to bananas.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.