Tim Dietrich

Custom Software Developer

Home Services Portfolio Blog About Contact Newsletter

Swift: Customizing Colors of Navigation and Tab Bars

I'm in the final stages of a rather large iOS project, and I've been tweaking the UI so that it reflects the app's branding. One simple change that I've made is to modify the colors of the app's navigation bar.

Here's some Swift code that changes the navigation bar's background color to blue, and the color of the nav bar items to white. (Note that in this example, the view is being managed by a navigation controller.)


// Change the navigation bar background color to blue.
navigationController!.navigationBar.barTintColor = UIColor.blueColor()

// Change the color of the navigation bar button items to white.
navigationController!.navigationBar.tintColor = UIColor.whiteColor()

Here's what the navigation bar looks like.

The title is still being displayed in the default (black) color. To change its color, you would use something like this:

        
// Change the color of the navigation bar title text to yellow.
navigationController!.navigationBar.titleTextAttributes =
	[NSForegroundColorAttributeName: UIColor.yellowColor()]

And here's what that additional change looks like.

I was experimenting with all of this, and found that you can easily change the title's font as well. For example, here's code that changes the title's font to BradleyHandITCTT-Bold, its size to 36 points, and the color to yellow.


navigationController!.navigationBar.titleTextAttributes =
	([NSFontAttributeName: UIFont(name: "BradleyHandITCTT-Bold", size: 36)!,
		NSForegroundColorAttributeName: UIColor.yellowColor()])

It's not pretty, but here's what that looks like.

For a nice list of the iOS fonts that are available, click here.

The app that I'm working on has several views that are displayed using a tab bar controller, and I wanted to change the appearance of the tab bar as well. Here's code that does that.


// Change tab bar background color to black.
tabBar.barTintColor = UIColor.blackColor()

// Change tab bar item color to white.
tabBar.tintColor = UIColor.whiteColor()

The code is placed in the viewDidLoad method of the UITabBarController class.