dyqrfa
Last Updated: September 08, 2017
·
147.6K
· itseranga
892414 10151468467596730 1847316210 o

Customize navigation bar appearance 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

Picture

Picture

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

Picture

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

Picture

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)

Picture

  • If you open it via vim (vim <path to project>/info.plist) you can see it contains a property call UIViewControllerBasedStatusBarAppearance with false value

Picture

  • 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

Picture

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)
}
Say Thanks
Respond

12 Responses
Add your response

16180
2e0a7fbc60ec8763666535e5077a5f0d normal

how can I set NavigationBar programmatically without StoryBoard?
I added in viewDidLoad()

self.navigationItem.title = "New Title"
but it doesn't work. :(

over 1 year ago ·
16374
Me

@xperad: If you just added a UINavigationBar (not a UINavigationController), you'll have to use the following to set the title.

self.navigationBar.topItem.title = "New Title"

over 1 year ago ·
16375
Me

In enums in Swift, you can just use the value without specifying the name of the enum Like so,

UIApplication.sharedApplication().statusBarStyle =.LightContent

over 1 year ago ·
17566
2vfek8zt normal

I'm trying to change navigation bar color but in my AppDelegate.swift, there is no function didFinishLaunchingWithOptions. It's passed in to the application function.
So where do I add the code to customize the navigation bar.

over 1 year ago ·
17800
Keith normal

Any idea how to align the title to the left?

over 1 year ago ·
18248
None

Could you provide an example with a blurred background on the navigation bar? :)

over 1 year ago ·
19504
Rffbl ns normal

you could just do self.title = "New Title" in the viewDidLoad

over 1 year ago ·
20822
None

Is there a way to remove "<" when i go to next screen.

over 1 year ago ·
22159
A486c31326dffba0cde8bade19108dc2

You're rgb division is off its not 256 but 255

over 1 year ago ·
28202
Img 0592

@venkatp, to hide the backButton:
navigationItem.setHidesBackButton(true, animated: false)

11 months ago ·
28686

You used a variable and named it navigationBarAppearace and you meant navigationBarAppearance

6 months ago ·
29148

download tutuapp from this site https://tutuapp-helper.com/ to install the paid apps for free on iPhone.

28 days ago ·