Xcode13 (iOS15 SDK) 対応で UITabBar を修正した際にバッジ表示が崩れた場合の対処法
環境
- Xcode 13.0 (13A233)
- iOS 15.0
何が起こったのか
Xcode13 (iOS15 SDK) では UITabBar に対して、
- 背景色が透過してしまう、適用されない
- タブバー上部のボーダーが表示されない
といった問題が発生するため、 UITabBar.standardAppearance や UITabBar.scrollEdgeAppearance を設定するといった対応が必要となってきます。
具体的には、以下のようなコードです。
// 元々の実装
UITabBar.appearance().isTranslucent = false
UITabBar.appearance().backgroundColor = .white
// 以下が Xcode13 の追加対応
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
// `standardAppearance` は iOS 13.0+
UITabBar.appearance().standardAppearance = appearance
if #available(iOS 15.0, *) {
UITabBar.appearance().scrollEdgeAppearance = appearance
}
これで十分かと思いきや、 UITabBarItem に見た目を変更したバッジを表示してみると
| iOS 14.5 | iOS 15.0 |
|---|---|
 |
 |
のように、バッジの見た目がデフォルト設定に戻ってしまう現象が発生してしまいました。
対処法
この現象の影響を受けるのは、 UITabBarItem.badgeColor や UITabBarItem.setBadgeTextAttributes(_:for:) を利用して、バッジの見た目を変更している場合となります。
thirdVC.tabBarItem.badgeColor = .clear
thirdVC.tabBarItem.badgeValue = "●"
thirdVC.tabBarItem.setBadgeTextAttributes([.foregroundColor: UIColor.red], for: .normal)
結論から言うと、 タブバーの見た目を変えるために UITabBarAppearance が必要なように、タブバーの各タブの見た目を変えるためには UITabBarItemAppearance の設定が必要なようでした。
最終的な対応としては、以下のようになります。
// `UITabBarItemAppearance` を用意
let barItemAppearance = UITabBarItemAppearance()
// タブの見た目を `UITabBarItemStateAppearance` を利用して変更
// `.normal`, `.selected`, `.disabled`, `.focused` の4状態があるので、必要に応じて設定
barItemAppearance.normal.badgeBackgroundColor = .clear
barItemAppearance.normal.badgeTextAttributes = [.foregroundColor: UIColor.red]
// `UITabBarAppearance` を用意
let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithDefaultBackground()
tabBarAppearance.backgroundColor = .white
// 通常のタブバー表示
tabBarAppearance.stackedLayoutAppearance = barItemAppearance
// iPad 端末でのアイコンとラベルが横並びする場合のタブバー表示
tabBarAppearance.inlineLayoutAppearance = barItemAppearance
// iPhone 端末での landscape 表示の場合のタブバー表示 (タブバー縦幅が狭い)
tabBarAppearance.compactInlineLayoutAppearance = barItemAppearance
// 用意した `UITabBarAppearance` を設定
UITabBar.appearance().standardAppearance = tabBarAppearance
if #available(iOS 15.0, *) {
UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}
確認した限りでは UITabBar.scrollEdgeAppearance が設定されていると、今回の現象が発生します。
ただ、UITabBarItemAppearance の変更を効かせた UITabBarAppearance を scrollEdgeAppearance のみに設定した場合には修正が効かず、 standardAppearance 側への設定によって修正が効いてくるような動きでした。
参考
UITabBar に対する Xcode13 対応
UITabBarItemAppearance の設定
Author And Source
この問題について(Xcode13 (iOS15 SDK) 対応で UITabBar を修正した際にバッジ表示が崩れた場合の対処法), 我々は、より多くの情報をここで見つけました https://qiita.com/hugehoge/items/f3eaf7265b8cd7c50978著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .