gosyuincho-case.jpg
【PR】総桐仕上げの豪華御朱印帳ケース! 千糸繍院 御朱印帳ケース / 御朱印帳保管用 総桐箱 12冊用

御朱印マップ
『御朱印マップ』に関するお問い合わせは、こちらにお寄せ下さい。

『御朱印マップ』お問い合わせ用記事

Fillmap
『Fillmap』シリーズに関するお問い合わせは、こちらにお寄せ下さい。
(Please contact us for any inquiries about "Fillmap" series)
『Fillmap』お問い合わせ用記事(Article for inquiry of "Fillmap")

2021年10月11日

iOS15でNavigationBarが黒くなる(透明になる)事象対応

XcodeiOS15(Xcode13)から、TranslucentではないNavigationBarの表示仕様が変わり、そのままだと黒く表示されるようになりました。

AppDelegateに記述を追加すると問題が解消します。

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

20211011-01.png

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

20211011-02.png

ご覧のようにこの画面では、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のチェックを外しているとこの現象になります。

20211011-03.png

私のアプリでは、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用に記述を4行追加、TabBar用にも同様に4行追加すれば、この問題は解消できます。

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

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

ico_GOSYUIN-Map.png

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

appstore.png


posted by o(^0^)o ほくほく at 22:00| Comment(0) | Xcodeメモ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。