Changing navigation bar color in Swift

问题:

I am using a Picker View to allow the user to choose the colour theme for the entire app.

I am planning on changing the colour of the navigation bar, background and possibly the tab bar (if that is possible).

I've been researching how to do this but can't find any Swift examples. Could anyone please give me an example of the code I would need to use to change the navigation bar colour and navigation bar text colour?

The Picker View is set up, I'm just looking for the code to change the UI colours.

回答1:

Navigation Bar:

navigationController?.navigationBar.barTintColor = UIColor.green

Replace greenColor with whatever UIColor you want, you can use an RGB too if you prefer.

Navigation Bar Text:

navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.orange]

Replace orangeColor with whatever color you like.

Tab Bar:

tabBarController?.tabBar.barTintColor = UIColor.brown

Tab Bar Text:

tabBarController?.tabBar.tintColor = UIColor.yellow

On the last two, replace brownColor and yellowColor with the color of your choice.

回答2:

Here are some very basic appearance customization that you can apply app wide:

UINavigationBar.appearance().backgroundColor = UIColor.greenColor()
UIBarButtonItem.appearance().tintColor = UIColor.magentaColor()
//Since iOS 7.0 UITextAttributeTextColor was replaced by NSForegroundColorAttributeName
UINavigationBar.appearance().titleTextAttributes = [UITextAttributeTextColor: UIColor.blueColor()]
UITabBar.appearance().backgroundColor = UIColor.yellowColor();

More about UIAppearance API in Swift you can read here: https://developer.apple.com/documentation/uikit/uiappearance

回答3:

Updated for Swift 3, 4, 4.2, 5+

// setup navBar.....
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
UINavigationBar.appearance().isTranslucent = false

Swift 4

UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false

Swift 4.2, 5+

UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false

Also can check here : https://github.com/hasnine/iOSUtilitiesSource

回答4:

UINavigationBar.appearance().barTintColor = UIColor(red: 46.0/255.0, green: 14.0/255.0, blue: 74.0/255.0, alpha: 1.0)
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]

Just paste this line in didFinishLaunchingWithOptions in your code.

回答5:

Within AppDelegate, this has globally changed the format of the NavBar and removes the bottom line/border (which is a problem area for most people) to give you what I think you and others are looking for:

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarPosition: UIBarPosition.Any, barMetrics: UIBarMetrics.Default)
    UINavigationBar.appearance().shadowImage = UIImage()
    UINavigationBar.appearance().tintColor = UIColor.whiteColor()
    UINavigationBar.appearance().barTintColor = Style.SELECTED_COLOR
    UINavigationBar.appearance().translucent = false
    UINavigationBar.appearance().clipsToBounds = false
    UINavigationBar.appearance().backgroundColor = Style.SELECTED_COLOR
    UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName : (UIFont(name: "FONT NAME", size: 18))!, NSForegroundColorAttributeName: UIColor.whiteColor()] }

Then you can setup a Constants.swift file, and contained is a Style struct with colors and fonts etc. You can then add a tableView/pickerView to any ViewController and use "availableThemes" array to allow user to change themeColor.

The beautiful thing about this is you can use one reference throughout your whole app for each colour and it'll update based on the user's selected "Theme" and without one it defaults to theme1():

import Foundation
import UIKit

struct Style {


static let availableThemes = ["Theme 1","Theme 2","Theme 3"]

static func loadTheme(){
    let defaults = NSUserDefaults.standardUserDefaults()
    if let name = defaults.stringForKey("Theme"){
        // Select the Theme
        if name == availableThemes[0]   { theme1()  }
        if name == availableThemes[1]   { theme2()  }
        if name == availableThemes[2]   { theme3()  }
    }else{
        defaults.setObject(availableThemes[0], forKey: "Theme")
        theme1()
    }
}

 // Colors specific to theme - can include multiple colours here for each one
static func theme1(){
   static var SELECTED_COLOR = UIColor(red:70/255, green: 38/255, blue: 92/255, alpha: 1) }

static func theme2(){
    static var SELECTED_COLOR = UIColor(red:255/255, green: 255/255, blue: 255/255, alpha: 1) }

static func theme3(){
    static var SELECTED_COLOR = UIColor(red:90/255, green: 50/255, blue: 120/255, alpha: 1) } ...

回答6:

To do this on storyboard (Interface Builder Inspector)

With help of IBDesignable, we can add more options to Interface Builder Inspector for UINavigationController and tweak them on storyboard. First, add the following code to your project.

@IBDesignable extension UINavigationController {
    @IBInspectable var barTintColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            navigationBar.barTintColor = uiColor
        }
        get {
            guard let color = navigationBar.barTintColor else { return nil }
            return color
        }
    }
}

Then simply set the attributes for navigation controller on storyboard.

This approach may also be used to manage the color of the navigation bar text from the storyboard:

@IBInspectable var barTextColor: UIColor? {
  set {
    guard let uiColor = newValue else {return}
    navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: uiColor]
  }
  get {
    guard let textAttributes = navigationBar.titleTextAttributes else { return nil }
    return textAttributes[NSAttributedStringKey.foregroundColor] as? UIColor
  }
}

回答7:

UINavigationBar.appearance().barTintColor

worked for me

回答8:

Swift 4:

Perfectly working code to change the navigation bar appearance at application level.

// MARK: Navigation Bar Customisation

// To change background colour.
UINavigationBar.appearance().barTintColor = .init(red: 23.0/255, green: 197.0/255, blue: 157.0/255, alpha: 1.0)

// To change colour of tappable items.
UINavigationBar.appearance().tintColor = .white

// To apply textAttributes to title i.e. colour, font etc.
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor : UIColor.white,
                                                    .font : UIFont.init(name: "AvenirNext-DemiBold", size: 22.0)!]
// To control navigation bar's translucency.
UINavigationBar.appearance().isTranslucent = false

Happy Coding!

回答9:

SWIFT 4 - Smooth transition (best solution):

If you're moving back from a navigation controller and you have to set a diffrent color on the navigation controller you pushed from you want to use

override func willMove(toParentViewController parent: UIViewController?) {
    navigationController?.navigationBar.barTintColor = .white
    navigationController?.navigationBar.tintColor = Constants.AppColor
}

instead of putting it in the viewWillAppear so the transition is cleaner.

SWIFT 4.2

override func willMove(toParent parent: UIViewController?) {
    navigationController?.navigationBar.barTintColor = UIColor.black
    navigationController?.navigationBar.tintColor = UIColor.black
}

回答10:

In Swift 4

You can change the color of navigation bar. Just use this below code snippet in viewDidLoad()

Navigation Bar color

self.navigationController?.navigationBar.barTintColor = UIColor.white

Navigation Bar Text Color

self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.purple]

For iOS 11 Large Title Navigation Bar, you need to use largeTitleTextAttributes property

self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.purple]

回答11:

The appearance() function not always work for me. So I prefer to create a NC object and change its attributes.

var navBarColor = navigationController!.navigationBar
navBarColor.barTintColor =
    UIColor(red:  255/255.0, green: 0/255.0, blue: 0/255.0, alpha: 100.0/100.0)
navBarColor.titleTextAttributes =
    [NSForegroundColorAttributeName: UIColor.whiteColor()]

Also if you want to add an image instead of just text, that works as well

var imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 70, height: 70))
imageView.contentMode = .ScaleAspectFit

var image = UIImage(named: "logo")
imageView.image = image
navigationItem.titleView = imageView

回答12:

Use the appearance API, and barTintColor color.

UINavigationBar.appearance().barTintColor = UIColor.greenColor()

回答13:

iOS 8 (swift)

let font: UIFont = UIFont(name: "fontName", size: 17)   
let color = UIColor.backColor()
self.navigationController?.navigationBar.topItem?.backBarButtonItem?.setTitleTextAttributes([NSFontAttributeName: font,NSForegroundColorAttributeName: color], forState: .Normal)

回答14:

If you have customized navigation controller, you can use above code snippet. So in my case, I've used as following code pieces.

Swift 3.0, XCode 8.1 version

navigationController.navigationBar.barTintColor = UIColor.green

Navigation Bar Text:

navigationController.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.orange]

It is very helpful talks.

回答15:

Swift 4, iOS 12 and Xcode 10 Update

Just put one line inside viewDidLoad()

navigationController?.navigationBar.barTintColor = UIColor.red

回答16:

In Swift 2

For changing color in navigation bar,

navigationController?.navigationBar.barTintColor = UIColor.whiteColor()

For changing color in item navigation bar,

navigationController?.navigationBar.tintColor = UIColor.blueColor()

or

navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blueColor()]

回答17:

Swift 3

UINavigationBar.appearance().barTintColor = UIColor(colorLiteralRed: 51/255, green: 90/255, blue: 149/255, alpha: 1)

This will set your navigation bar color like Facebook bar color :)

回答18:

Swift 3 and Swift 4 Compatible Xcode 9

A Better Solution for this to make a Class for common Navigation bars

I have 5 Controllers and each controller title is changed to orange color. As each controller has 5 navigation controllers so i had to change every one color either from inspector or from code.

So i made a class instead of changing every one Navigation bar from code i just assign this class and it worked on all 5 controller Code reuse Ability. You just have to assign this class to Each controller and thats it.

import UIKit

   class NabigationBar: UINavigationBar {
      required init?(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
    commonFeatures()
 }

   func commonFeatures() {

    self.backgroundColor = UIColor.white;
      UINavigationBar.appearance().titleTextAttributes =     [NSAttributedStringKey.foregroundColor:ColorConstants.orangeTextColor]

 }


  }

回答19:

iOS 10 Swift 3.0

If you don't mind to use swift frameworks then us UINeraida to change navigation background as UIColor or HexColor or UIImage and change navigation back button text programmatically, change complete forground text color.

For UINavigationBar

    neraida.navigation.background.color.hexColor("54ad00", isTranslucent: false, viewController: self)

    //Change navigation title, backbutton colour

    neraida.navigation.foreground.color.uiColor(UIColor.white, viewController: self)

    //Change navigation back button title programmatically

    neraida.navigation.foreground.backButtonTitle("Custom Title", ViewController: self)

    //Apply Background Image to the UINavigationBar

    neraida.navigation.background.image("background", edge: (0,0,0,0), barMetrics: .default, isTranslucent: false, viewController: self)

回答20:

Swift 3

Simple one liner that you can use in ViewDidLoad()

//Change Color
    self.navigationController?.navigationBar.barTintColor = UIColor.red
//Change Text Color
    self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

回答21:

I had to do

UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().barStyle = .Black
UINavigationBar.appearance().backgroundColor = UIColor.blueColor()

otherwise the background color wouldn't change

回答22:

First set the isTranslucent property of navigationBar to false to get the desired colour. Then change the navigationBar colour like this:

@IBOutlet var NavigationBar: UINavigationBar!

NavigationBar.isTranslucent = false
NavigationBar.barTintColor = UIColor (red: 117/255, green: 23/255, blue: 49/255, alpha: 1.0)

回答23:

simply call the this extension and pass the color it will automatically change the color of nav bar

extension UINavigationController {

     func setNavigationBarColor(color : UIColor){
            self.navigationBar.barTintColor = color
        }
    }

in the view didload or in viewwill appear call

self.navigationController?.setNavigationBarColor(color: <#T##UIColor#>)

回答24:

Make sure to set the Button State for .normal

extension UINavigationBar {

    func makeContent(color: UIColor) {
        let attributes: [NSAttributedString.Key: Any]? = [.foregroundColor: color]

        self.titleTextAttributes = attributes
        self.topItem?.leftBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
        self.topItem?.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
    }
}

P.S iOS 12, Xcode 10.1

回答25:

Try This in AppDelegate:

//MARK:- ~~~~~~~~~~setupApplicationUIAppearance Method
func setupApplicationUIAppearance() {

    UIApplication.shared.statusBarView?.backgroundColor = UIColor.clear

    var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }

    UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    UINavigationBar.appearance().barTintColor =  UIColor.white
    UINavigationBar.appearance().isTranslucent = false

    let attributes: [NSAttributedString.Key: AnyObject]

    if DeviceType.IS_IPAD{
        attributes = [
            NSAttributedString.Key.foregroundColor: UIColor.white,
            NSAttributedString.Key.font: UIFont(name: "HelveticaNeue", size: 30)
            ] as [NSAttributedString.Key : AnyObject]
    }else{
        attributes = [
            NSAttributedString.Key.foregroundColor: UIColor.white
        ]
    }
    UINavigationBar.appearance().titleTextAttributes = attributes
}

回答26:

Add these lines to your AppDelegate inside didFinishLaunchingWithOptions function:

this line is for your navigation bar background.

UINavigationBar.appearance().barTintColor = .orange

this line is if your don't isTranslucent to false it will show white color on navigation.

UINavigationBar.appearance().tintColor = .white

this line is for your texts and icons on navigation bar

UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: Styles.textFirstColor]

this line us to come everything down to your navigation bar.

UINavigationBar.appearance().isTranslucent = false