【iOS】ナビゲーションバーの背景色を設定する方法｜Storyboardとコード両方のやり方を解説

iOSアプリでナビゲーションバーの背景色を設定したい場合、Storyboard上で設定する方法とコードで設定する方法の2通りがあります。それぞれの手順を詳しく解説します。

方法1：Storyboardで背景色を変更する

Storyboardエディターを使って、ナビゲーションバーの背景色を変更する手順を見ていきましょう。

1. 新規プロジェクトを作成し、ViewControllerを選択してNavigation Controllerを埋め込みます（Editor > Embed In > Navigation Controller）。
2. ナビゲーションバーを選択し、Attributes Inspector（属性インスペクタ）を開きます。

Xcode 10では、以下のように表示されます。ここでBar Tintのカラーを選択すると、ナビゲーションコントローラーのバー全体に色が反映されます。

方法2：コードで背景色を変更する

プログラムからナビゲーションバーの背景を変更する場合は、対象のViewController内のviewDidLoadまたはviewWillAppearに、次のコードを記述します。

self.navigationController?.navigationBar.barTintColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)

このコードは、現在表示中のナビゲーションバーのみに黒い背景色を適用します。

応用：テキスト色や透明度など他のプロパティもまとめて変更する

文字色・ティントカラー・半透明の有無なども一緒にカスタマイズしたい場合は、UINavigationBar.appearance()を使うと便利です。この方法なら、アプリ全体のナビゲーションバーの外観を一括で統一できます。

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

上記のコードでは、それぞれ以下のような設定を行っています。

• barTintColor：ナビゲーションバー自体の背景色を黒に設定
• tintColor：バーボタンなどの要素の色を白に設定
• titleTextAttributes：タイトルの文字色を白に設定
• isTranslucent：半透明効果を無効化

なお、NSAttributedStringKeyはSwift 4.2以降ではNSAttributedString.Keyに改名されているため、新しいバージョンのSwiftを使用している場合は注意してください。