iOS15でNavigationBarが黒くなる（透明になる）事象対応

iOS15（Xcode13）から、TranslucentではないNavigationBarの表示仕様が変わり、そのままだと黒く表示されるようになりました。 AppDelegateに記述を追加すると問題が解消します。

今までは問題なくリリースできていたアプリが、Xcode13でビルドすると、NavigationBarが黒く表示されるようになってしまいました。

正確には、黒ではなく透明になっており、背景が表示されてしまっているようです。

ご覧のようにこの画面では、NavigationBarの後ろに隠しているToolBarが見えてしまっています。
ビルドした時に結構焦りました。。。

調査したところ、原因はAppleがiOS15から仕様を変更したからなのだそうです。

In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background, to all navigation bars.

　　◆Apple Developer Forums

下記のように、Translucentのチェックを外しているとこの現象になります。

私のアプリでは、NavigationBarの他に画面下部のTabBarもTranslucentを外していますので、同様に黒（透明）になってしまっています。

iOS15からの仕様なので、対応としてAppDelegate.swiftのapplication(_:didFinishLaunchingWithOptions:)に以下の記述を追加することで解消します。

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        // ----------------------------------------------------------------|
        // iOS15からの仕様変更対応。
        if #available(iOS 15, *) {
            // NavigationBarのTranslucentチェックを外している場合、設定が必要。
            let navAppearance = UINavigationBarAppearance()
            navAppearance.configureWithOpaqueBackground()
            UINavigationBar.appearance().standardAppearance = navAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
           
            // TabBarのTranslucentチェックを外している場合、設定が必要。
            let tabAppearance = UITabBarAppearance()
            tabAppearance.configureWithOpaqueBackground()

            // ★TabBarのテキスト色の設定（これがないと、非選択時に灰色になる）
            let tabBarItemAppearance = UITabBarItemAppearance()
            tabBarItemAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.tintColor]
            tabBarItemAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.tintColor]
            tabAppearance.stackedLayoutAppearance = tabBarItemAppearance

            UITabBar.appearance().standardAppearance = tabAppearance
            UITabBar.appearance().scrollEdgeAppearance = tabAppearance
        }

NavigationBar用に記述を４行追加、TabBar用にも同様に４行追加すれば、この問題は解消できます。

私のアプリの場合は、TabBarの非選択色をTintColorにしていますが、この４行の設定を加えると、非選択時の文字色が灰色になってしまったため、さらに「★」の４行を加えています。

そもそもNavigationBar等をデフォルトのままTranslucent適用にしておけばこの問題は生じないようです。
ご参考までに。

iPhoneで御朱印集めを楽しくするアプリ『御朱印マップ』を公開しています。ダウンロードはこちらからどうぞ。