Customizing the navigation bar in iOS with Swift

Slim Ben Nasrallah

Follow

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)