Last Updated: May 08, 2024
·
335.8K
· itseranga

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)
}

Related protips:

Some simple Swift Extensions (Strip HTML, RGB Color, Color invert, Dismiss modal segue)

15 Responses
Add your response

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 ·

@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 ·

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 ·

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 ·

Any idea how to align the title to the left?

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

barTintColor - is a color of background. Not tint color.
For example, to modify the bar background tint color for all instances of UINavigationBar:
[[UINavigationBar appearance] setBarTintColor:myNavBarBackgroundColor];

https://developer.apple.com/documentation/uikit/uiappearance

over 1 year ago ·

Thanks for sharing such amazing shortcuts.

over 1 year ago ·

If you're updating the navigation bar appearance from a background thread, you may encounter issues with UI updates not being performed on the main thread. Always ensure that any updates to the UI are done on the main thread using techniques like DispatchQueue.main.async.

12 months ago ·

Thanks for sharing, I'm just learning this and will find it very useful

6 months ago ·