[Swift]オシャレなNavigationBar(色・フォント・アイテムのアレンジ)の作成

本記事では、オシャレなNavigationBarの作成の仕方(色・フォント・アイテムのアレンジの仕方)を紹介します！
とても簡単に実装可能なのでぜひ試してみてください！

Before

After

上記のように、NavigationBarをアレンジするだけでオシャレになりましたね！

では、下記のように実装していきましょう！

1. Main.storyboardの準備

まず、Main.storyboardに下記の写真のようにNavigationControllerを作成します。
これで、Beforeの部分は完成です！

2. SceneDelegate.swiftにデザインをアレンジするためのコーディング

それでは、Afterのようにオシャレにデザインしていきましょう！
とても簡単で、SceneDelegate.swiftに下記のコードを追加するだけです！
これで、全てのNavigationBarのデザイン（背景・フォント・アイテム・色）をアレンジすることができます！

SceneDelegate.swift

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let _ = (scene as? UIWindowScene) else { return }

        
        // 全てのNavigationControllerのそれぞれの色を変更する場合ここに書く

        // ナビゲージョンアイテムの文字色
        UINavigationBar.appearance().tintColor = UIColor.yellow

        UINavigationBar.appearance().titleTextAttributes =
            // ナビゲーションバーのタイトルの文字色
            [.foregroundColor: UIColor.white,
             // フォントの種類
             .font: UIFont(name: "Times New Roman",
                           // フォントサイズ
                           size: 27)!]

        // ナビゲーションバーの背景色
        UINavigationBar.appearance().barTintColor = UIColor.red
    }

    // 以下省略
    
}

参考

画面ごとに、NavigationBarをデザインしたい場合は下記の記事を参考にしてみてください。
[Swift]オシャレなNavigationBar(色・フォント・アイテムのアレンジ)の作成(画面ごとに設定)