完全に理解する Storyboard & UIKit (Day 26): UIAppearanceによるアプリ全体の色・スタイル管理

アプリを作っていると、「全ての画面のナビゲーションバーの色を自社ブランドのロゴ色に統一したい」といった要望が必ず出ます。 これを実現するために、Storyboardで10個のNavigationBarを一つ一つポチポチ設定したり、全てのViewControllerの viewDidLoad に self.navigationController?.navigationBar.barTintColor = ... と書いて回るのは、非常に非効率でバグの温床になります。

UIKitには、こういった アプリ全体のUIコンポーネントのデフォルトスタイルを一括指定する ための強力な仕組み、UIAppearance プロトコルが用意されています。

1. UIAppearance とは？

UIAppearance は、特定のUIコンポーネント（UINavigationBar, UITabBar, UIButton, UILabelなど）に対して、「これから生成される全てのインスタンスに適用されるデフォルトの見た目」 を設定（プロキシ（代理）オブジェクトを通じて代入）するプロトコルです。

設定は通常、アプリ起動直後の起点である AppDelegate.swift の application(_:didFinishLaunchingWithOptions:) 内に記述します。

2. UINavigationBar の全体設定（iOS 13+ / iOS 15以降対応）

iOS 15以降、ナビゲーションバーやタブバーの見た目の管理は UINavigationBarAppearance 等の専用クラスを使う厳密なものになりました。これを UIAppearance を通じて全体に適用します。

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

    // 1. Appearanceオブジェクトの作成
    let navBarAppearance = UINavigationBarAppearance()

    // 背景を不透明な自社ブランドカラー（例：濃い青）で塗りつぶす
    navBarAppearance.configureWithOpaqueBackground()
    navBarAppearance.backgroundColor = UIColor(red: 0.1, green: 0.2, blue: 0.4, alpha: 1.0)

    // タイトルの文字色とフォントを設定（白文字、太字）
    navBarAppearance.titleTextAttributes = [
        .foregroundColor: UIColor.white,
        .font: UIFont.boldSystemFont(ofSize: 18)
    ]

    // 戻るボタン等のアイテムの色
    UINavigationBar.appearance().tintColor = UIColor.white

    // 2. 作成した設定を、アプリ全体(appearance)の通常時とスクロール時に適用する
    UINavigationBar.appearance().standardAppearance = navBarAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance

    return true
}

このコードを書いておくだけで、Storyboardやコードで一切色を指定しなくても、アプリ内の全てのナビゲーションバーが自動的にこの青色と白文字になります。

3. その他のUI部品の全体設定

ナビゲーションバー以外にも、あらゆる UIView のサブクラスに一括設定が可能です。

UITabBar (画面下部のタブ)

swift
let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithOpaqueBackground()
tabBarAppearance.backgroundColor = .systemGray6

UITabBar.appearance().standardAppearance = tabBarAppearance
// iOS 15以降は必須
UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance

// 未選択時と選択時のアイコン色の設定
UITabBar.appearance().tintColor = .systemBlue // 選択時
UITabBar.appearance().unselectedItemTintColor = .systemGray // 未選択時

UISwitch や UIActivityIndicatorView (くるくる)

swift
// スイッチがONの時の色を全てピンクにする
UISwitch.appearance().onTintColor = .systemPink

// くるくる回るインジケーターの色を一律でオレンジにする
UIActivityIndicatorView.appearance().color = .systemOrange

4. 特定の下層にあるUIだけに適用する

「原則ベースの色を変えたいが、設定画面（SettingsViewController）の中にあるスイッチだけは別の色にしたい」というケースもあります。

appearance(whenContainedInInstancesOf:) を使うと、「特定の（親）クラスの中に配置されている場合のみ適用する」という柔軟な条件付けが可能です。

swift
// SettingsViewController の中にあるUISwitchだけは、緑色にする
UISwitch.appearance(whenContainedInInstancesOf: [SettingsViewController.self]).onTintColor = .systemGreen

📝 今日のまとめ

• アプリ全体で共有する色やフォントは、AppDelegate 上で UIAppearance を使って一括設定 するのがベストプラクティス。
• NavigationBar や TabBar には専用の Appearance クラス（UINavigationBarAppearance 等）が存在する。
• ClassName.appearance() に対してプロパティを設定することで、アプリ内全ての該当部品のデフォルト値が上書きされる。
• whenContainedInInstancesOf: を使うことで、特定の親画面の中にいる時だけ適用するルールも作れる。

これで無駄なデザイン指定のコードやStoryboardのポチポチ作業から解放され、ブランドカラーの変更にも1分で対応できるようになりました。 明日の Day 27 では、近年のiOSアプリにおいて必須対応とも言える「ダークモード」への対応手法と、それを支える「Asset Catalog」の便利な使い方を学びます。