Customize UINavigationBar appearance in Swift

In this video tutorial I am showing how to customize UINavigationBar by:

  • changing its background color (barTintColor)
  • set UINavigationBar Title text tint color (NSForegroundColorAttributeName)
  • set UINavigationBar background image
  • change Back button tint color
  • change Bar Button item tint color

Source code:

// Set navigation bar tint / background colour
UINavigationBar.appearance().barTintColor = UIColor.redColor()

// Set Navigation bar Title colour
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName:UIColor.whiteColor()]

// Set navigation bar ItemButton tint colour
UIBarButtonItem.appearance().tintColor = UIColor.yellowColor()

// Set Navigation bar background image
let navBgImage:UIImage = UIImage(named: “bg_blog_navbar_reduced.jpg”)!
UINavigationBar.appearance().setBackgroundImage(navBgImage, forBarMetrics: .Default)

//Set navigation bar Back button tint colour
UINavigationBar.appearance().tintColor = UIColor.whiteColor()

or you can also access UINavigationBar through the UINavigationController and change UINavigationBar tint color For example:

// Set navigation bar background colour
self.navigationController!.navigationBar.barTintColor = UIColor.yellowColor()

// Set navigation bar title text colour
self.navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blackColor()]

// Set Navigation bar background Image
let navBgImage:UIImage = UIImage(named: “bg_blog_navbar_reduced.jpg”)!
forBarMetrics: .Default)

Learn iOS Development with these Video Courses

The Complete iOS 11 & Swift Developer Course - Build 20 Apps

Use Xcode 9 & Swift 4 to make real apps like Uber and Instagram, with CoreML & ARKit. Includes AWS Credit and much more. Preview this video course. icon

How to Make a Freaking iPhone App - iOS 11 and Swift 4

iPhone App Development from scratch. Learn how to make iOS apps using Xcode 9. The Basics Include Pokemon Go & Snapchat. Learn to build iOS Apps with Xcode 9 and Swift 4. How to Make a Freaking iPhone App - iOS 11 and Swift 4 icon

iOS 11 and Xcode 9 - Complete Swift 4 & Objective-C Course

A Complete iOS 11 and Xcode 9 Course with Swift 4 & Objective-C. Preview this video course. iOS 11 and Xcode 9 - Complete Swift 4 & Objective-C Course icon
  • This worked for me! Thanks a lot.

  • Jason Brady

    Hello Sergey. I wanted to start out by saying that your swift tutorials have been fantastic! But I have a question about doing something similar to how you have the “Next” button that switches view controllers. I have a view controller that looks very similar to what you did in this video “Creating custom user interface with XIB and loading it as Subview. Swift + Xcode 6” where I have subviews added as views. These views all have buttons as well. Is it possible to have those buttons, when clicked, go to the new view controller but keep the back navigator bar button. If I try to ctl + drag it to make a segue it seems like technically it would be the view that would get the segue not the button.

  • Gonzalo Calasich

    Thank you very much!! This really help me and it was well explained.