Swiftでのナビゲーションバーの色の変更


240

ユーザーがアプリ全体のカラーテーマを選択できるように、ピッカービューを使用しています。

ナビゲーションバー、背景、場合によってはタブバー(可能な場合)の色を変更することを計画しています。

私はこれを行う方法を調査してきましたが、Swiftの例を見つけることができません。誰かがナビゲーションバーの色とナビゲーションバーのテキストの色を変更するために使用する必要があるコードの例を教えてもらえますか?

ピッカービューが設定されました。UIの色を変更するコードを探しています。

回答:


524

ナビゲーションバー:

navigationController?.navigationBar.barTintColor = UIColor.green

greenColorを任意のUIColorに置き換えます。必要に応じてRGBも使用できます。

ナビゲーションバーのテキスト:

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

orangeColorを好きな色に置き換えます。

タブバー:

tabBarController?.tabBar.barTintColor = UIColor.brown

タブバーテキスト:

tabBarController?.tabBar.tintColor = UIColor.yellow

最後の2つでは、brownColorとyellowColorを好みの色に置き換えます。


どうもありがとう!私は自分がしようとしていることからそれほど遠くはありませんでしたが、正しい順序で物事を完全に持っていませんでした。
user3746428 2014

よく分かりません。モーダルではなくプッシュセグエを使用している場合、それは同じナビゲーションバーである必要がありますが、完全にはわかりません。ごめんなさい。
trumpeter201

2
新しいXcodeベータ版に更新した後、タイトルテキストの色を設定しても機能しなくなりました。titleTextAttributesはSwiftでは使用できません。何か案は?
user3746428 2014

1
新しい質問を開いて、おそらくそれにリンクできますか?チャットはこのようなものに最適な場所ではありません。
trumpeter201 2014

3
NSForegroundColorAttributeNameを属性名として使用していることがわかりましたが、それ以外の点では優れています。
ジェイクホール

90

以下は、アプリ全体に適用できる非常に基本的な外観のカスタマイズです。

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

UIAppearanceSwiftのAPI について詳しくは、https//developer.apple.com/documentation/uikit/uiappearanceをご覧ください。


では、これを使用して、アプリ全体のナビゲーションバーの色をどのように変更しますか?現在、私はただ持っています:self.navigationController.navigationBar.barTintColor = UIColor.newBlueColor()そしてもちろんこれはコードが含まれているビューコントローラーのナビゲーションバーの色を変更するだけです。どうすればすべてのナビゲーションバーを変更できますか?私が使用してみました:UINavigationBar.appearance()。backgroundColor = UIColor.newBlueColor()が何もしないようです。
user3746428 2014

4
entier appで変更を反映するには、AppDelegate.swift func application(application:UIApplication、didFinishLaunchingWithOptions launchOptions:[NSObject:AnyObject]?)の以下のメソッドに貼り付けます-> Bool {// Place above code}
Badrinath

7
backgroundColorの代わりにbarTintColorを使用してください。UINavigationBar.appearance()。barTintColor = UIColor.greenColor()
マイケルピーターソン

@Keenle少し混乱しています...外観APIを介してUINavigationBarの背景色を変更しないのはなぜですか?背景色を青に設定しようとしたところ、紫がかった青みがかった奇妙な色合いになりました...
fja '29

58

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

スウィフト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

こちらもチェックできます:https//github.com/hasnine/iOSUtilitiesSource


NSAttributedString.Key.foregroundColor:スウィフト4.2
Kasra Babaei

濃淡色をbartintcolorではなく白に設定すると、元の色が表示されます。すごい!
NickCoder

@NickCoderはそれを感謝しています。:)また、私の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()]

この行をdidFinishLaunchingWithOptionsコードに貼り付けるだけです。


これをRGBで試したところ、どこに置いても機能しません。
Nathan McKaskle 2016年

@NathanMcKaskle RGBを確認してください、それは "xx / 250.0f"ギ酸塩でなければなりません。
Mohit Tomar

didFinishLaunchingWithOptionsで使用され、完全に機能しました。内部のviewDidLoadは完全には機能しません。
Touhid

26

AppDelegate内で、これによりNavBarの形式がグローバルに変更され、最終的な行/境界線(ほとんどの人にとって問題領域)が削除され、あなたや他の人が探していると思われるものが得られます。

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

次に、Constants.swiftファイルを設定し、色やフォントなどを含むStyle構造体を含めます。次に、tableView / pickerViewを任意のViewControllerに追加し、「availableThemes」配列を使用して、ユーザーがthemeColorを変更できるようにします。

これの美しい点は、アプリ全体で各色に1つの参照を使用でき、ユーザーが選択した「テーマ」に基づいて更新され、それがない場合はデフォルトで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
おかげで、あなたの答えは本当に私を助けてくれました。私はそれの最初の部分を使用しました。それは素晴らしくてとても役に立ちました
Ameer Fares

1
どうもありがとう、私はここですべての答えを試しましたが、あなたの答え以外はどれもうまくいきませんでした:D
Ronak Shah

19

ストーリーボードでこれを行うには(Interface Builder Inspector)

の助けを借りて、IBDesignableInterface Builder Inspectorにオプションを追加UINavigationControllerして、ストーリーボードで微調整できます。まず、次のコードをプロジェクトに追加します。

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

次に、ストーリーボードのナビゲーションコントローラーの属性を設定します。

ここに画像の説明を入力してください

このアプローチは、ストーリーボードからナビゲーションバーのテキストの色を管理するためにも使用できます。

@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

スウィフト4:

アプリケーションレベルでナビゲーションバーの外観を変更するための完全に機能するコード。

ここに画像の説明を入力してください

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

ハッピーコーディング!



15

SWIFT 4-スムーズな移行(最適なソリューション):

ナビゲーションコントローラーから戻って、使用するプッシュ元のナビゲーションコントローラーに別の色を設定する必要がある場合

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

これをviewWillAppearに配置する代わりに、遷移がきれいになります。

SWIFT 4.2

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

11

ではスウィフト4

ナビゲーションバーの色を変更できます。以下のコードスニペットを使用するだけですviewDidLoad()

ナビゲーションバーの色

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

ナビゲーションバーのテキストの色

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

以下のためにiOSの11大タイトルナビゲーションバー、あなたが使用する必要があるlargeTitleTextAttributesプロパティを

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

9

このappearance()機能は私にとっては必ずしも機能するとは限りません。そのため、NCオブジェクトを作成し、その属性を変更することを好みます。

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

また、テキストだけでなく画像を追加する場合も同様に機能します

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

そのようにして、私はself.navigationController?.navigationBar.topItem?.titleの色を変更することができました。ありがとう。
oguzhan


4

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)

4

ナビゲーションコントローラをカスタマイズしている場合は、上記のコードスニペットを使用できます。したがって、私の場合、次のコード部分として使用しました。

Swift 3.0、XCode 8.1バージョン

navigationController.navigationBar.barTintColor = UIColor.green

ナビゲーションバーのテキスト:

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

とても参考になる話です。


4

Swift 4、iOS 12およびXcode 10アップデート

内側に1行入れるだけ viewDidLoad()

navigationController?.navigationBar.barTintColor = UIColor.red

3

Swift 2で

ナビゲーションバーの色を変更するには、

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

アイテムナビゲーションバーの色を変更するには、

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

または

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

3

スウィフト3

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

これにより、ナビゲーションバーの色がFacebookバーの色のように設定されます。


3

Swift 3およびSwift 4互換Xcode 9

一般的なナビゲーションバーのクラスを作成するためのより良いソリューション

5つのコントローラーがあり、各コントローラーのタイトルがオレンジ色に変わります。各コントローラーには5つのナビゲーションコントローラーがあるため、インスペクターまたはコードのいずれかからすべての色を変更する必要がありました。

だから、私はすべてのナビゲーションバーをコードから変更する代わりにクラスを作成しました。このクラスを割り当てるだけで、5つのコントローラーのコード再利用機能すべてで機能しました。 このクラスを各コントローラーに割り当てるだけで、それで終わりです。

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

あなたが使用する迅速なフレームワークそして、私たちに気にしない場合はUINeraidaとして、変更ナビゲーション背景にUIColorHexColorまたはUIImage、変更ナビゲーションバックボタンのテキスト、プログラム、完全なforgroundのテキストの色を変更します。

ために 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

スウィフト3

使えるシンプルなワンライナー ViewDidLoad()

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

2

このバージョンでは、ナビゲーションバーの下の1pxのシャドウラインも削除されます。

Swift 5:これをAppDelegateに配置しました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

私がしなければなりませんでした

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

それ以外の場合、背景色は変更されません


1

最初に、navigationBarのisTranslucentプロパティをfalseに設定して、目的の色を取得します。次に、navigationBarの色を次のように変更します。

@IBOutlet var NavigationBar: UINavigationBar!

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

1

.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
ありがとうございました。私はこのtopItem解決策を何時間も探していました。Appleがスタイルをナビゲーションに適用する方法に加え続けている多くの変更はイライラさせられます。
App Dev Guy

1

この拡張機能を呼び出して色を渡すだけで、ナビゲーションバーの色が自動的に変更されます

extension UINavigationController {

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

ビューでdidloadまたはビューでコールが表示されます

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


1

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

拡張

extension UIApplication {

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

1

ここでの解決策でまだ問題がある人のためにこれを書いています。

Xcodeバージョン11.4(11E146)を使用しています。私のために働いているのは:

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

ただし、ストーリーボードのbarTintColorを「デフォルト」以外の値に設定した場合、この2行のコードは効果がありません。

したがって、注意して、ストーリーボードのデフォルトのbarTintColorに戻します。ああアップル...


ティントカラーをデフォルトに変更しても同じ問題が発生します:(
marika.daboja

@ marika.dabojaストーリーボードのすべてのナビゲーションコントローラーがデフォルトの色に設定されていますか?
トーマスコルドバ

こんにちは、私は1つのナビゲーションコントローラー(および2つのテーブルビューコントローラー)しかありません。ナビゲーションコントローラーバーの色合いの色が「デフォルト」に設定されています。この色を更新しなければならないコードは、影響を与えていないようです。
marika.daboja

@ marika.dabojaは、navigationControllerがnilでないことを確認してください。そして、このコード行をviewDidLoad()に配置します
Tomas Cordoba

0

次の行をdidFinishLaunchingWithOptions関数内のAppDelegateに追加します。

この行は、ナビゲーションバーの背景です。

UINavigationBar.appearance().barTintColor = .orange

この行は、don's isTranslucentがfalseの場合、ナビゲーションで白色を表示します。

UINavigationBar.appearance().tintColor = .white

この行は、ナビゲーションバーのテキストとアイコン用です

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

これにより、すべてがナビゲーションバーに到達します。

UINavigationBar.appearance().isTranslucent = false
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.