Devagnos
Published in

Devagnos

Customizing the navigation bar in iOS with Swift

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 is specialized in web based solutions and mobile applications, we provide top of the edge solutions with the latest worldwide renowned technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store