Alterando a cor da barra de navegação no Swift


240

Estou usando uma exibição de selecionador para permitir que o usuário escolha o tema de cores para todo o aplicativo.

Estou planejando alterar a cor da barra de navegação, do plano de fundo e possivelmente da barra de guias (se isso for possível).

Estive pesquisando como fazer isso, mas não consigo encontrar nenhum exemplo do Swift. Alguém poderia me dar um exemplo do código que eu precisaria usar para alterar a cor da barra de navegação e a cor do texto da barra de navegação?

A exibição do seletor está configurada. Estou apenas procurando o código para alterar as cores da interface do usuário.

Respostas:


526

Barra de navegação:

navigationController?.navigationBar.barTintColor = UIColor.green

Substitua greenColor pelo UIColor que você quiser, você também pode usar um RGB, se preferir.

Texto da barra de navegação:

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

Substitua orangeColor pela cor que desejar.

Barra de abas:

tabBarController?.tabBar.barTintColor = UIColor.brown

Texto da barra de guias:

tabBarController?.tabBar.tintColor = UIColor.yellow

Nos dois últimos, substitua brownColor e yellowColor pela cor de sua escolha.


Muito obrigado! Eu não estava muito longe do que estava tentando, mas não tinha as coisas na ordem certa.
user3746428

Não tenho certeza. Se você estiver usando um push segue em oposição a um modal, deve ser a mesma barra de navegação, mas não tenho certeza. Desculpe.
trumpeter201

2
Após a atualização para os betas mais recentes do Xcode, a configuração da cor do texto do título não funciona mais. titleTextAttributes não está disponível no Swift. Alguma ideia?
user3746428

1
Você poderia abrir uma nova pergunta e talvez criar um link para ela? O bate-papo não é o melhor lugar para algo assim.
trumpeter201

3
Descobri que isso está me fazendo usar NSForegroundColorAttributeName como o nome do atributo, mas de outra forma funcionando muito bem.
Jake Hall

90

Aqui estão algumas personalizações de aparência muito básicas que você pode aplicar em todo o aplicativo:

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();

Mais sobre a UIAppearanceAPI no Swift, você pode ler aqui: https://developer.apple.com/documentation/uikit/uiappearance


Então, como eu usaria isso para alterar a cor da barra de navegação de todo o aplicativo? No momento, tenho apenas: self.navigationController.navigationBar.barTintColor = UIColor.newBlueColor () e, é claro, isso apenas altera a cor da barra de navegação do controlador de exibição em que o código está. Como posso usá-lo para alterar todas as barras de navegação? Tentei usar: UINavigationBar.appearance (). BackgroundColor = UIColor.newBlueColor (), mas parece não fazer nada.
user3746428

4
Para refletir chnages no aplicativo de entrada, cole o método acima no aplicativo App da função AppDelegate.swift (aplicativo: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {// Colocar código acima}
Badrinath em

7
Use barTintColor em vez de backgroundColor. UINavigationBar.appearance (). BarTintColor = UIColor.greenColor ()
Michael Peterson

@ Keenle Estou um pouco confuso ... Por que a alteração da cor de plano de fundo da UINavigationBar através da API de aparência muda totalmente sua cor? Eu tentei definir a cor de fundo para azul e isso me deu um tom esquisito de azul arroxeado ...
fja 29/11/16

58

Atualizado para 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

Também pode verificar aqui: https://github.com/hasnine/iOSUtilitiesSource


Swift 4.2: NSAttributedString.Key.foregroundColor
Kasra Babaei

definir a cor da tonalidade para branco em vez de cor bartint mostra a cor original. Ótimo!
NickCoder 17/01

@NickCoder aprecio isso. :) também verifique minha lib: github.com/hasnine/iOSUtilitiesSource
Jamil Hasnine Tamim

52
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()]

Basta colar esta linha didFinishLaunchingWithOptionsno seu código.


Eu tentei isso com RGB e ele não funciona, não importa onde eu o coloquei.
Nathan McKaskle

@NathanMcKaskle Verifique seu RGB, ele deve estar no formato "xx / 250.0f".
Mohit Tomar

Usado em didFinishLaunchingWithOptions e funcionou perfeitamente. O viewDidLoad interno não funciona perfeitamente.
Touhid

26

No AppDelegate , isso mudou globalmente o formato da NavBar e remove a linha inferior / borda (que é uma área problemática para a maioria das pessoas) para fornecer o que acho que você e outras pessoas estão procurando:

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

Em seguida, você pode configurar um Constants.swift arquivo , e contém uma estrutura de estilo com cores e fontes, etc. Você pode adicionar um tableView / pickerView a qualquer ViewController e usar a matriz "availableThemes" para permitir que o usuário altere themeColor.

O mais legal é que você pode usar uma referência em todo o aplicativo para cada cor e ela será atualizada com base no "Tema" selecionado pelo usuário e, sem uma, o padrão será 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) } ...

2
Graças homem, a sua resposta realmente me pelo menos para mim que eu usei a primeira parte do que ajudou e foi incrível e muito útil
Fares Ameer

1
Muito obrigado cara, eu tentei todas as respostas aqui e nenhuma delas funcionou, exceto a sua: D
Ronak Shah

19

Para fazer isso no storyboard (Interface Builder Inspector)

Com a ajuda de IBDesignable, podemos adicionar mais opções ao Interface Builder Inspector UINavigationControllere ajustá-las no storyboard. Primeiro, adicione o seguinte código ao seu projeto.

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

Em seguida, basta definir os atributos para o controlador de navegação no storyboard.

insira a descrição da imagem aqui

Essa abordagem também pode ser usada para gerenciar a cor do texto da barra de navegação do 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
  }
}

18

Swift 4:

Código que funciona perfeitamente para alterar a aparência da barra de navegação no nível do aplicativo.

insira a descrição da imagem aqui

// 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

Feliz codificação!


16
UINavigationBar.appearance().barTintColor

trabalhou para mim


15

SWIFT 4 - Transição suave (melhor solução):

Se você estiver voltando de um controlador de navegação e precisar definir uma cor diferente no controlador de navegação que você pressionou, deseja usar

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

em vez de colocá-lo no viewWillAppear, para que a transição seja mais limpa.

SWIFT 4.2

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

11

Em Swift 4

Você pode alterar a cor da barra de navegação. Basta usar este trecho de código abaixo emviewDidLoad()

Cor da barra de navegação

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

Cor do texto da barra de navegação

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

Para a barra de navegação de título grande do iOS 11 , você precisa usar a largeTitleTextAttributespropriedade

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

9

A appearance()função nem sempre funciona para mim. Por isso, prefiro criar um objeto NC e alterar seus atributos.

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()]

Além disso, se você deseja adicionar uma imagem em vez de apenas texto, isso também funciona

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

dessa maneira, eu pude mudar a cor do self.navigationController? .navigationBar.topItem? .title. Obrigado.
oguzhan

8

Use a API de aparência e a cor barTintColor.

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

4

iOS 8 (rápido)

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

4

Se você personalizou o controlador de navegação, pode usar o snippet de código acima. Então, no meu caso, usei como seguintes partes de código.

Swift 3.0, versão XCode 8.1

navigationController.navigationBar.barTintColor = UIColor.green

Texto da barra de navegação:

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

São palestras muito úteis.


4

Atualização Swift 4, iOS 12 e Xcode 10

Basta colocar uma linha dentro viewDidLoad()

navigationController?.navigationBar.barTintColor = UIColor.red

3

Em Swift 2

Para alterar a cor na barra de navegação,

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

Para alterar a cor na barra de navegação do item,

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

ou

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

3

Swift 3

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

Isso definirá a cor da barra de navegação como a cor da barra do Facebook :)


3

Swift 3 e Swift 4 Compatível com Xcode 9

Uma solução melhor para criar uma classe para barras de navegação comuns

Eu tenho 5 controladores e cada título do controlador é alterado para cor laranja. Como cada controlador possui 5 controladores de navegação, tive que alterar cada cor, do inspetor ou do código.

Então, eu criei uma classe em vez de alterar cada barra de navegação do código, apenas atribui essa classe e funcionou em todas as 5 habilidades de reutilização de código do controlador. Você só precisa atribuir essa classe a Cada controlador e é isso.

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]

 }


  }

2

iOS 10 Swift 3.0

Se você não se importa em usar estruturas rápidas, use o UINeraida para alterar o plano de fundo da navegação como UIColorou HexColorou UIImagealterar o texto do botão voltar da navegação programaticamente, altere a cor completa do texto forground.

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

2

Swift 3

Um liner simples que você pode usar ViewDidLoad()

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

2

Esta versão também remove a linha de sombra 1px sob a barra de navegação:

Swift 5: coloque isso no seu aplicativoDelegate didFinishLaunchingWithOptions

UINavigationBar.appearance().barTintColor = UIColor.black
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
UINavigationBar.appearance().shadowImage = UIImage()

1

eu tive que fazer

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

caso contrário, a cor do fundo não mudaria


1

Primeiro, defina a propriedade isTranslucent de navigationBar como false para obter a cor desejada. Em seguida, altere a cor navigationBar da seguinte maneira:

@IBOutlet var NavigationBar: UINavigationBar!

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

1

Certifique-se de definir o estado do botão para. 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)
    }
}

PS iOS 12, Xcode 10.1


1
Obrigado. Eu tenho procurado por horas para esta topItemsolução. É frustrante o número de mudanças que a Apple continua fazendo na maneira como os estilos são aplicados à navegação.
App Dev Guy

1

basta ligar para esta extensão e passar a cor, ela mudará automaticamente a cor da barra de navegação

extension UINavigationController {

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

na exibição didload ou no viewwill aparecerá chamada

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


1

Tente isto no 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
}

iOS 13

func setupNavigationBar() {
    //        if #available(iOS 13, *) {
    //            let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
    //            let statusBar = UIView(frame: window?.windowScene?.statusBarManager?.statusBarFrame ?? CGRect.zero)
    //            statusBar.backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1) //UIColor.init(hexString: "#002856")
    //            //statusBar.tintColor = UIColor.init(hexString: "#002856")
    //            window?.addSubview(statusBar)
    //            UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    //            UINavigationBar.appearance().barTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    //            UINavigationBar.appearance().isTranslucent = false
    //            UINavigationBar.appearance().backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
    //            UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
    //        }
    //        else
    //        {
    UIApplication.shared.statusBarView?.backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
    UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    UINavigationBar.appearance().barTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    UINavigationBar.appearance().isTranslucent = false
    UINavigationBar.appearance().backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
    UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
    //        }
}

Extensões

extension UIApplication {

var statusBarView: UIView? {
    if responds(to: Selector(("statusBar"))) {
        return value(forKey: "statusBar") as? UIView
    }
    return nil
}}

1

Estou escrevendo isso para aqueles que ainda têm problemas com as soluções aqui.

Estou usando o Xcode versão 11.4 (11E146). O que trabalha para mim é:

navigationController?.navigationBar.barTintColor = UIColor.white
navigationController?.navigationBar.tintColor = UIColor.black

MAS !, se você definir o barTintColor no storyboard para qualquer outro valor que não seja "padrão", essas duas linhas de código não terão efeito.

Portanto, tenha cuidado e volte ao padrão barTintColor no Storyboard. Oh maçã ...


Ainda o mesmo problema, apesar de alterar a cor da tonalidade para o padrão :(
marika.daboja 17/04

@ marika.daboja Todos os seus controladores de navegação no storyboard estão definidos com cores padrão?
Tomas Cordoba

Olá, só tenho 1 controlador de navegação (mais 2 controladores de exibição de tabela). A cor do matiz da barra do controlador de navegação está definida como 'padrão'. O código que tenho para atualizar essa cor parece não ter efeito.
marika.daboja 20/04

@ marika.daboja verifique se o navigationController não é nulo. E que você coloque essas linhas de código em viewDidLoad ()
Tomas Cordoba

0

Adicione essas linhas ao seu AppDelegate dentro da função didFinishLaunchingWithOptions:

esta linha é para o fundo da barra de navegação.

UINavigationBar.appearance().barTintColor = .orange

esta linha é, se você não forTranslucent to false, ele mostrará a cor branca na navegação.

UINavigationBar.appearance().tintColor = .white

esta linha é para seus textos e ícones na barra de navegação

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

essa linha nos leva a tudo para a sua barra de navegação.

UINavigationBar.appearance().isTranslucent = false
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.