Zenn
Open3

[iOS][SwiftUI] グローバルな外観設定

iOS
Swift
Xcode
SwiftUI
ピン留めされたアイテム
spycspyc

アプリのナビゲーションバーやタブバーについて、グローバルな外観設定についてメモ
実装の頻度が少なく、忘れがちであるため備忘録として残す

spycspyc

アプリ起動時の処理で以下を追加する

let navigationBarAppearance = UINavigationBarAppearance()
 navigationBarAppearance.configureWithTransparentBackground()
 navigationBarAppearance.backgroundColor = .white //  背景色
 navigationBarAppearance.shadowColor = .clear // 影の色
 navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.gray] // タイトルの文字色
 navigationBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.gray] // LargeTitleの文字色
 navigationBarAppearance.setBackIndicatorImage(UIImage(named: "back_indicator_icon"), transitionMaskImage: UIImage(named: "back_indicator_icon")) // 戻るボタンの画像
 UINavigationBar.appearance().standardAppearance = navigationBarAppearance // 通常のナビゲーションバー
 UINavigationBar.appearance().compactAppearance = navigationBarAppearance // LargeTitleのナビゲーションバー
 UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance // Landscapeのナビゲーションバー
if #available(iOS 15.0, *) {
    UINavigationBar.appearance().compactScrollEdgeAppearance = navigationBarAppearance
}
spycspyc

TabBarの外観設定

アプリ起動時の処理で以下を追加する

let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithOpaqueBackground()
tabBarAppearance.backgroundColor = .white

// stackedLayoutAppearance: 通常のタブバー
// タブ選択時のテキスト設定
tabBarAppearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.brack, .font: UIFont.systemFont(ofSize: 10, weight: .bold)]
// タブ選択時のアイコン設定
tabBarAppearance.stackedLayoutAppearance.selected.iconColor = UIColor.black
// タブ非選択時のテキスト設定
tabBarAppearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.gray, .font: UIFont.systemFont(ofSize: 10, weight: .medium)]
// タブ非選択時のアイコン設定
tabBarAppearance.stackedLayoutAppearance.normal.iconColor = UIColor.gray

// inlineLayoutAppearance: iPad及びアイコンとラベルが横並びの場合のタブバー
// タブ選択時のテキスト設定
tabBarAppearance.inlineLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.brack, .font: UIFont.systemFont(ofSize: 10, weight: .bold)]
// タブ選択時のアイコン設定
tabBarAppearance.inlineLayoutAppearance.selected.iconColor = UIColor.black
// タブ非選択時のテキスト設定
tabBarAppearance.inlineLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.gray, .font: UIFont.systemFont(ofSize: 10, weight: .medium)]
// タブ非選択時のアイコン設定
tabBarAppearance.inlineLayoutAppearance.normal.iconColor = UIColor.gray

// compactInlineLayoutAppearance: landscape表示の場合のタブバー
// タブ選択時のテキスト設定
tabBarAppearance.compactInlineLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.brack, .font: UIFont.systemFont(ofSize: 10, weight: .bold)]
// タブ選択時のアイコン設定
tabBarAppearance.compactInlineLayoutAppearance.selected.iconColor = UIColor.black
// タブ非選択時のテキスト設定
tabBarAppearance.compactInlineLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.gray, .font: UIFont.systemFont(ofSize: 10, weight: .medium)]
// タブ非選択時のアイコン設定
tabBarAppearance.compactInlineLayoutAppearance.normal.iconColor = UIColor.gray

UITabBar.appearance().standardAppearance = tabBarAppearance
if #available(iOS 15.0, *) {
  UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}
UITabBar.appearance().barTintColor = .white