【Swift】ナビゲーションバーのタイトルや文字色・背景色をカスタマイズする方法について詳しく解説！

ふくしま

こんにちは！株式会社メモリアインクのふくしまです！

この記事では、iOS 13.0以降で利用可能となったUINavigationBarAppearanceクラスを活用してタイトルのフォントや色など、さまざまなスタイルのカスタマイズ方法を解説します。

この記事を読んで分かること…
・UINavigationBarAppearanceクラスとは？
・ナビゲーションバーのタイトルのカスタマイズ方法
・ナビゲーションバーの色やスタイルのカスタマイズ方法
・ナビゲーションバーの表示・非表示の切り替え方法

環境

・Swift5.9
・Xcode15

UINavigationBarAppearanceとは？

UINavigationBarAppearanceはiOS 13.0以降で導入されたクラスで、ナビゲーションバーの外観をカスタマイズするための詳細な設定を行うことができます。
このクラスを使用することで、ナビゲーションバーの背景色、テキスト属性、ボタンスタイルなど、さまざまな要素を細かく制御できるようになります。

ナビゲーションバーのタイトルの変更

このセクションでは、ViewControllerのナビゲーションバーにタイトルを設定する方法を解説します。
タイトルの変更にはUINavigationBarAppearanceクラスを使用する必要はなく、ViewControllerのナビゲーションアイテムのタイトルを変更します。
ここで設定したタイトルは、次の画面に継承されますので、別途次画面でも設定が必要です。

前提(UIの設定)

①MainStoryboardでViewControllerを選択
②Editor→Embed In→Navigation Controllerを選択して、Navigation Controllerを追加

③次の画面に遷移するためのボタンをViewControllerに配置
④遷移先のSecondViewControllerに直接segueで遷移する(Show)

画面遷移の方法については、以下の記事で詳しく解説しているので、画面遷移の方法についてまだよくわからない！という方はご参考ください。

あわせて読みたい

【Swift】画面遷移をする様々な方法(segueあり・なし/プッシュ遷移/モーダル遷移)について徹底的に解説！ こんにちは！株式会社メモリアインクのふくしまです！今回はiOSアプリの画面遷移の方法について、方法が分からず絶望に打ちひしがれてしまったという方にご覧いただきた…

サンプルコード

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "ホーム"
    }
}

サンプルコードの説明

◾️行4-8: ViewControllerクラスのviewDidLoadメソッド内で、ナビゲーションバーのタイトルを”ホーム”に設定しています。

表示確認

ふくしま

それでは表示確認してみましょう〜

ナビゲーションバーのスタイル設定

ナビゲーションバーの背景色、テキスト属性などのスタイルをカスタマイズする方法をUINavigationBarAppearanceを使って紹介します。

サンプルコード

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.configureNavigationBar()
    }
    
    func configureNavigationBar() {
        if #available(iOS 15.0, *) {
            let appearance = UINavigationBarAppearance()
            // 不透明な背景を設定
            appearance.configureWithOpaqueBackground()
            // 背景色を設定
            appearance.backgroundColor = .systemOrange
            // テキストの色を設定
            appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
            // ナビゲーションバーの標準時の外観のカスタマイズを適用
            navigationController?.navigationBar.standardAppearance = appearance
　　　　　　　// ナビゲーションバーのスクロール時の外観のカスタマイズを適用
            navigationController?.navigationBar.scrollEdgeAppearance = appearance
        } else {
            // iOS 15未満の場合のナビゲーションバーの背景色を設定
            navigationController?.navigationBar.barTintColor = .systemBlue
            // iOS 15未満の場合のナビゲーションバーのテキストの色を設定
            navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
        }
    }
}

サンプルコードの説明

◾️行 1-5: ViewControllerクラスの定義を開始し、UIViewControllerを継承します。viewDidLoad()メソッド内でconfigureNavigationBar()関数を呼び出して、ナビゲーションバーの設定を行います。
◾️行 7-23: configureNavigationBar()関数を定義します。この関数は、ナビゲーションバーの外観をカスタマイズするために使用されます。
・行 8: iOS 15.0以降であるかをチェックします。これにより、iOS 15.0以降のデバイスでのみ新しい外観APIが使用されます。
・行 9: UINavigationBarAppearanceオブジェクトを初期化します。これを使用してナビゲーションバーの外観をカスタマイズします。
・行 11: appearanceに不透明な背景を設定します。
このコードにより、ナビゲーションバーは不透明なオレンジ色の背景を持ち、下にあるコンテンツはナビゲーションバーを通して見えなくなります。
・行 13: ナビゲーションバーの背景色をシステムオレンジ色に設定します。
・行 15: ナビゲーションバーのタイトルテキストの色を白色に設定します。
・行 17: standardAppearanceプロパティにカスタマイズしたappearanceオブジェクトを適用して、ナビゲーションバーの標準時の外観を設定しています。
・行 19: scrollEdgeAppearanceプロパティにも同じappearanceオブジェクトを適用し、ナビゲーションバーがスクロール時の外観も設定しています。
◾️行 20-25: iOS 15.0未満の場合のナビゲーションバーの背景色とテキスト色の設定を行っています。

動作確認

ふくしま

それでは動作確認してみましょう〜

まとめ

いかがでしたか？
この記事では、ナビゲーションバーのタイトル設定や様々なスタイルのカスタマイズ方法について解説しました。
この記事が皆様のお役に立てれば光栄です。

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします！