Customizing the navigation bar in iOS with Swift
Published in
3 min readMar 20, 2017
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 inAppDelegate.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
- back indicator image
- button titles
- 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 inAppDelegate.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 yourinfo.plist
file(In setting it toNO
)
- If you open it via
vim
(vim <path to project>/info.plist
) you can see it contains a property callUIViewControllerBasedStatusBarAppearance
withfalse
value
- Then define the color of status bar in
didFinishLaunchingWithOptions
function inAppDelegate.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)