【Swift UIKit】ナビゲーションバーの背景色やボタン色を変更する方法!

【Swift UIKit】ナビゲーションバーの背景色やボタン色を変更する方法!

この記事からわかること

  • SwiftUIKitNavigationBar背景色変更する方法
  • ボタン変えるには?
  • UINavigationBarAppearanceクラス使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

SwiftのUIKitでコードからNavigationBar(ナビゲーションバー)の色を変更をする方法をまとめていきます。この記事ではUINavigationControllerの使い方は解説していないので以下記事を参考にしてください。

ナビゲーションバーに背景色を変更する方法

【Swift UIKit】コードでNavigationBarItemを実装する方法と使い方

UINavigationControllerのナビゲーションバーの色を変更するにはUINavigationBarAppearanceクラスのbackgroundColorプロパティを変更してnavigationBarに以下のように設定します。

let appearance = UINavigationBarAppearance()

// 背景色
appearance.backgroundColor = UIColor.gray
// ナビゲーションバーに反映させる
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance

barTintColorは期待通りに動作しない

昔の実装ではbarTintColorに直接色を渡すことで変更できていましたが、現在では期待通りに動作しないので注意してください。

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

タイトル(文字)の色を変更する

【Swift UIKit】ナビゲーションバーの背景色やボタン色を変更する方法!

ナビゲーションバーに表示されるタイトルの文字色を変更したい場合はUINavigationBarAppearanceクラスのtitleTextAttributesプロパティを変更して反映させます。

self.navigationItem.title = "タイトル"
let appearance = UINavigationBarAppearance()

// タイトル文字色を変更する
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
// largeTitleも変更する
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]

appearance.backgroundColor = UIColor.gray

self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance

ボタンの文字色を変更する

【Swift UIKit】コードでNavigationBarItemを実装する方法と使い方

ナビゲーションバーに表示されるボタンの文字色を変更したい場合はUINavigationBarAppearanceクラスのbuttonAppearancenormaltitleTextAttributesプロパティを変更して反映させます。

let textButton = UIBarButtonItem(title: "ボタン", style: .done, target: self, action: #selector(textButtonTapped))
self.navigationItem.rightBarButtonItem = textButton

let appearance = UINavigationBarAppearance()

appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
// ボタンの文字色を変更する
appearance.buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]

appearance.backgroundColor = UIColor.gray
    
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance

しかしこの実装方法ではデフォルトの「戻る」ボタンなどアイコンと文字が表示されているボタンは文字のみ色が変わってしまいます

【Swift UIKit】ナビゲーションバーの背景色やボタン色を変更する方法!

デフォルトの「戻る」ボタンの色を変更する

デフォルトの「戻る」ボタンの色をアイコンも含めて変更するにはnavigationBartintColorプロパティの値を変更すればOKです。

self.navigationController?.navigationBar.tintColor = .white

これでアイコンとテキスト両方の色が変化します。またカスタムでUIBarButtonItem追加している場合も全てに色の変化が適応されます。

カスタムボタン1つ1つの色を変更する

カスタムボタンの色を一括ではなく1つ1つ変更したい場合UIBarButtonItemtintColorで変更することで実装できます。

let textButton = UIBarButtonItem(title: "ボタン", style: .done, target: self, action: #selector(textButtonTapped))
textButton.tintColor = .white
self.navigationItem.rightBarButtonItem = textButton

UIKitで変更したい場合

おすすめ記事:【Swift UI】ナビゲーションバーの背景色を変更する方法!toolbarBackground

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index