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”)!
self.navigationController!.navigationBar.setBackgroundImage(navBgImage,
forBarMetrics: .Default)


Learn iOS Development with these Video Courses


How to Make a Freaking iPhone App - iOS 10 and Swift 3
icon icon


iOS 10 & Swift 3: From Beginner to Paid Professional
icon


The Complete iOS 10 Developer Course - Build 21 Apps
icon


Swift 3 - Learn to Code with Apple's New Language
icon icon


Learn How to Build Mobile Apps for iOS with Swift, PHP and MySQL
icon icon

Follow me on one of your favourite social networks to learn about new video tutorials and code examples:

Twitter: @SwiftVideoBlog
Google Plus: https://plus.google.com/+SergeyKargopolov/posts
Facebook: Swift Developer Blog on Facebook



  • 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.