Customizing the navigation bar in iOS with Swift

Slim Ben Nasrallah
Mar 20, 2017 · 3 min read

Change navigation bar color

  • In order to change color of navigation bar for all view controllers, you have to set it in AppDelegate.swift file
  • Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift
var navigationBarAppearace = UINavigationBar.appearance()navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)
  • In here tintColor attribute change the background color of the navigation bar
  • barTintColor attribute affect to the color of the
  1. back indicator image
  2. button titles
  3. button images
  • This code not affect to the color of navigation bar title. It still remains on black color

Change color of navigation bar title

  • Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift
var navigationBarAppearace = UINavigationBar.appearance()navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)
// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]
  • titleTextAttributes affect to the title text, in here I'm setting the title text color white

Programatically change navigation bar title

  • In order to change title of the navigation item(in ViewController) you have to set the title in viewDidLoad function of ViewController
override func viewDidLoad() {
super.viewDidLoad()
self.navigationItem.title = "New title"
}
  • Following is an example output after this change

Change status bar color

  • In above examples status bar color is Black
  • In order to change the color of status bar we have do two changes
  • First define the property of view controller-based status bar property in your info.plist file(In setting it to NO)
  • If you open it via vim (vim <path to project>/info.plist) you can see it contains a property call UIViewControllerBasedStatusBarAppearance with false value
  • Then define the color of status bar in didFinishLaunchingWithOptions function in AppDelegate.swift (This will affect to all view controllers in your app, since it define in AppDelegate.swift)
UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent

Define colors in hex values

  • In above codes I have define a custom function to define the colors as hex values
func uicolorFromHex(rgbValue:UInt32)->UIColor{
let red = CGFloat((rgbValue & 0xFF0000) >> 16)/256.0
let green = CGFloat((rgbValue & 0xFF00) >> 8)/256.0
let blue = CGFloat(rgbValue & 0xFF)/256.0
return UIColor(red:red, green:green, blue:blue, alpha:1.0)
}
  • This function converts hex values to UIColor(with red, green and blue)

Devagnos

Devagnos is specialized in web based solutions and mobile applications, we provide top of the edge solutions with the latest worldwide renowned technologies.

Slim Ben Nasrallah

Written by

CEO & Founder @devagnos

Devagnos

Devagnos

Devagnos is specialized in web based solutions and mobile applications, we provide top of the edge solutions with the latest worldwide renowned technologies.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade