web-dev-qa-db-ja.com

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

ユーザーがアプリ全体の色のテーマを選択できるように、ピッカービューを使用しています。ナビゲーションバー、背景、そしておそらくタブバーの色を変更することを計画しています（それが可能な場合）。私はこれを行う方法を研究してきましたが、Swiftの例を見つけることができません。ナビゲーションバーの色とテキストの色を変更するために必要なコードの例を教えてください。 （ピッカービューが設定されています、私はUIの色を変更するコードを探しています）

ありがとう。

iosswiftuinavigationbar
194
user3746428

ナビゲーションバー：

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を好みの色に置き換えます。

418
trumpeter201

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

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

SwiftのUIAppearance APIの詳細については、こちらを参照してください。 https://developer.Apple.com/documentation/uikit/uiappearance

80
Keenle
    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に貼り付けるだけです。

48
Mohit tomar

Swift 3、4、および4.2用に更新 

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

スイフト4.2

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

42
Jamil Hasnine Tamim

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を変更できるようにします。

これについての素晴らしいところは、あなたがそれぞれの色のためにあなたの全体のアプリを通して一つの参照を使うことができて、それがユーザーが選択した「テーマ」に基づいて更新するでしょう。

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) } ...
25
David West

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

IBDesignableの助けを借りて、UINavigationControllerのためにInterface Builder Inspectorにさらにオプションを追加し、ストーリーボード上でそれらを微調整することができます。まず、プロジェクトに次のコードを追加します。

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

それからストーリーボードのナビゲーションコントローラの属性を設定します。

enter image description here

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

@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
  }
}
17
Fangming
UINavigationBar.appearance().barTintColor

私のために働いた

15
Asbar

スイフト4：

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

enter image description here 

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

ハッピーコーディング！

11
Gaurav Singla

Swift 4 - スムーズな移行（最善の解決策）：

ナビゲーションコントローラから戻ってきて、プッシュしたナビゲーションコントローラに異なる色を設定する必要がある場合は、使用します。

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

viewWillAppearに配置する代わりに、トランジションがきれいになります。

9
RickS

外観APIとbarTintColorカラーを使用します。

UINavigationBar.appearance().barTintColor = UIColor.greenColor()
8
Michael Peterson

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
8
GuiSoySauce

In - スイフト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]
7
Vinoth Vino

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

Swift 3.0、XCode 8.1バージョン 

navigationController.navigationBar.barTintColor = UIColor.green

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

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

大変参考になります。

4
Bogdan Dimitrov Filov

Swift 4、iOS 12、Xcode 10 Update

viewDidLoad()の中に一行入れる

navigationController?.navigationBar.barTintColor = UIColor.red
4
Xcodian Solangi

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
Long Pham

スイフト3

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

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

3
Sazzad Hissain Khan

Swift 3およびSwift 4互換のXcode 9

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

私は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]

 }


  }
3
Ourang-Zeb Khan

スウィフト2

ナビゲーションバーの色を変えるには

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

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

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

または

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

iOS 10 Swift 3.0

Swiftフレームワークを使用しても構わない場合は、 UINeraida を使用してナビゲーションの背景をUIColorまたはHexColorまたはUIImageに変更し、ナビゲーションの戻るボタンのテキストをプログラムで変更してください。

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
user7304558

スイフト3

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

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

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

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

そうでなければ背景色は変わらないでしょう

1
Guilherme Carvalho

最初に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
Nupur Sharma

ボタンの状態を必ず.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

0
Mazen Kasser

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
}
0
Tej Patel