UIKitトレイトシステムの活用

UIKitトレイトシステムの活用

UIKitのトレイトシステムの強化について紹介します。カスタムトレイトを定義して自身のデータをUITraitCollectionに追加する方法、伝播されたデータを変更してコントローラーや、トレイトがオーバーライドされたAPIのビューを表示する方法、APIを導入して柔軟性とパフォーマンスを向上する方法をご紹介します。また、UIKitトレイトとSwiftUI環境キーをつなげて、アプリのUIKitとSwiftUIコンポーネントの両方からシームレスにデータにアクセスする方法も説明します。

関連する章
- 0:57 - Understanding traits
- 7:44 - Defining custom traits
- 14:31 - Applying overrides
- 19:48 - Handling changes
- 25:24 - SwiftUI bridging
リソース
関連ビデオ

WWDC23
- UIKitの新機能
ダウンロード

♪ ♪
「UIKitトレイトシステムの活用」へようこそ私はUIフレームワークのエンジニア Tyler Foxです本日はiOS 17でご利用いただける新しいUIKit機能をご紹介できることに胸を躍らせていますまず UIKitのトレイトシステムの基礎についておさらいし次に新しい機能や性能についてご紹介しますこれにはカスタムトレイトを定義して自身のデータをUITraitCollectionに追加する方法アプリの階層でトレイトオーバーライドを適用するためのより簡単な方法トレイトが変更された場合により柔軟に対処する方法が含まれます最後は UIKitトレイトを SwiftUI environment keyとつなげ UIKitとSwiftUIコンポーネント間でデータをパスする方法をご紹介しますでは基礎のおさらいから始めましょうトレイトはシステムがすべてのビューコントローラやアプリのビューに自動的に伝搬するデータの独立した部分です UIKitはさまざまな内蔵のシステムトレイトを提供しますユーザーインターフェーススタイル横方向のサイズクラス優先コンテンツサイズカテゴリなどがそうです iOS 17では自身のカスタムトレイトを定義することもできますこれにより新しい強力な方法でデータをアプリのビューコントローラーとビューに提供できるようになりますカスタムトレイトついては後でじっくり説明します UIKitでトレイトを使用する主な方法は Trait Collectionの使用です Trait Collectionにはトレイトとそれに関連する値が含まれています iOS 17の新しいAPIは Trait Collectionの作業を容易にしますまずクロージャを解釈する新しいinitializerがありますそのクロージャ内には値を設定できる変更可能なトレイトコンテナを受け取りますこのコンテナはUIMutableTraitsという名前の新しいプロトコルに従いますクロージャ内でユーザーインターフェースイディオムを「phone」に設定し横方向のサイズクラスを「regular」に設定しますクロージャの実行が完了したら initializerは私がクロージャ内に設定したトレイト値をすべて含む変更不可能なUITraitCollection インスタンスを返しますまた新しいmodifyingTraitsメソッドもありクロージャ内の元のTrait Collectionからの値を変更することで新しいインスタンスを作成できますここでは横方向のサイズクラスを「compact」に変更しユーザーインターフェーススタイルには dark値を生成しましたユーザーインターフェースイディオムは変更していないので元のTrait Collectionで使用した「= phone」が使用されますこのように独自の Trait Collectionを作成できますがほとんどの場合はトレイト環境から Trait Collectionを取得しますアプリのトレイト環境はウィンドウシーンウィンドウ表示コントローラビューコントローラビューですこれらすべてのトレイト環境には独自のTrait CollectionがありそれぞれのTrait Collectionには異なる値が含まれていますトレイト環境はアプリを通じてトレイトが流れるトレイト階層でつながっていますこちらはトレイト階層のツリー構造の例です各ウィンドウシーンから独立したビューコントローラとビューまでが示されています各トレイト環境は親環境からトレイト値を継承します常に最も具体的なトレイト環境の Trait Collectionを使用してくださいトレイトがビューコントローラとビューを通じて流れる方法について説明しましょう
この親ビューコントローラの例には子ビューコントローラが含まれています点線はビューコントローラの階層を表しています親コントローラはビューを所有しています直線はこれらの関係を表しています親ビューにはサブビューが1つありますビューを通る点線はビューの階層を表しています子コントローラのビューは間にあるビューのサブビューですまず iOS 17以前にトレイトがビューコントローラとビューを流れていた方法について説明しますビューコントローラはトレイトを親ビューコントローラから直接継承していましたビューコントローラが所有するビューはトレイトを自己のビューコントローラからトレイトを直接継承していました最後にビューコントローラのないビューはトレイトを自己のスーパービューから直接継承していましたこの動作はビュー階層のトレイトの流れがビューコントローラが所有する各ビューで止まることを意味しますたとえば親コントローラのビューからのトレイト値はその直接のサブビューのみにより継承されます子コントローラのビューはこれらのビューの下のビュー階層のサブビューであるのにその値を受信しませんこの動作は意外かもしれません iOS 17ではビューコントローラとビューのトレイト階層を統一することでこの問題を排除しましたビューコントローラは親ビューコントローラからではなくビューのスーパービューから Trait Collectionを継承するようになりましたこれによりトレイトはビューコントローラとビューを通じてシンプルで直線的に流れますビューコントローラは引き続き親ビューコントローラからトレイトを継承しますがそれぞれの間にあるビューを介して間接的に行われますビューコントローラはトレイトをビュー階層から継承することになったためビューコントローラのビューはビューコントローラが最新のトレイトを受信するために階層内に存在する必要があります結果としてビューが階層に追加される前にビューコントローラのTrait Collectionにアクセスした場合ビューコントローラのトレイト値は更新されません一般的にコードが最も影響を受ける場所は viewWillAppear内でこれはビューが階層に追加される前に常に呼び出されるためです代わりにviewIsAppearingという新しいコールバックを使用できます viewIsAppearingはビューが階層に追加されビューコントローラとビューの両方の Trait Collectionが更新されたら viewWillAppearの後に呼び出されます viewIsAppearingは現在viewWillAppearを使用するほぼすべてのケースに対する完全互換品ですこのメソッドのすばらしいところは iOS 13まで遡ってデプロイできる点ですこの新しいコールバックについての詳細とそれがビューコントローラのライフサイクルに適合する方法については「UIKitの最新情報」をご覧ください iOS 17はビュートレイトアップデートの一貫性とパフォーマンスも向上しますビューは階層内にいる場合自己のTrait Collectionのみを更新します階層内に存在すると各ビューはレイアウトを実行する直前に自己のビュートレイトを更新しますレイアウト中にトレイトを使用するのがベストプラクティスですビューにとってそれは layoutSubviewsメソッド内からの traitCollectionを使用するという意味ですビューでsetNeedsLayoutが呼び出されるたびに layoutSubviewsが再実行されるので実装が複数回呼び出される場合の重複した作業を避けるようにしてくださいカスタムトレイトはiOS 17の強力な新機能です皆さんがデータをビューコントローラとビューに提供するためのまったく新しい方法を提供してくれますアプリでデータの作業を行う場合次の内容を考慮して新しいカスタムトレイトをいつ定義するかを決定しましょうトレイトは親ビューコントローラから複数の子ビューコントローラまたはスーパービューからすべてのサブビューへとデータを多くの子に伝播する際のすばらしい選択肢ですトレイトを使用してデータを直接の接続のない多くの深いレイヤーのにネストし他のコンポーネントにパスすることができますトレイトは階層を通じて継承されるためビューコントローラを含むという情報の提供など環境に関するコンテキストをビューとビューコントローラに提供できますトレイトシステムは強力ですがこれを使用したデータの伝播は無料ではありません最良のパフォーマンスを実現するために値を追加する際にトレイトを使用しますがデータを直接パスできる場合はトレイトの使用を避けましょうでは最初のカスタムトレイトを定義する準備ができました私のアプリに「設定」画面がありビューが「設定」のビューコントローラ内に含まれているかどうかを示すトレイトを実装するとしましょうコードを数行書くだけでカスタムトレイトを定義できます
最初に新しい構造体を宣言し UITraitDefinitionプロトコルに従います必要な1つの静的プロパティ defaultValueを実装しますこれは値が設定されていない場合のトレイトのデフォルト値です各トレイトの定義には defaultValueから推測される関連の値タイプがありますこの場合はdefaultValueを falseとして割当てるのでこのトレイトの値のタイプは Boolと推測されます以前 SwiftUIでカスタム environment keyを定義したことがあるならこれに精通しているはずですトレイトを定義したらUITraitCollection およびUIMutableTraitsAPIsの新しいAPIですぐに使用することができますトレイトを値を取得して設定するための鍵だと考えればいいでしょう新しいUITraitCollectionの initializerで UIMutableTraitsの添字演算子を使いトレイトの値を設定します次にUITraitCollectionの添字演算子を使用してトレイトの値を復唱します 2つの簡単なExtensionを追加することですべてのシステムトレイトと同じように標準プロパティ構文を使用してこのトレイトにアクセスできますここでは変更できない UITraitCollectionクラスのExtensionで読み取り専用のプロパティを宣言します次に読み取り/書き込みのプロパティを UIMutableTraitsプロトコルの Extensionで宣言しますこれらの非常にシンプルな Extensionを追加したところで標準プロパティ構文を使用してあらゆる場所でトレイトにアクセスできます独自のカスタムトレイトを定義する際は必ずこれらのExtensionを書いてくださいカスタムトレイトに関する別のアイデアがありますアプリでカスタムのカラーテーマのサポートを構築するとしましょう MyAppThemeという名前の列挙型がありこれは私のアプリがサポートする 4つのカラーテーマを表しますまず UITraitDefinition プロトコルに従う新しい構造体を宣言します標準テーマをこのトレイトのデフォルト値として使用しますアプリのカスタム動的カラーでこの新しいテーマトレイトを使用するつもりなのでこのトレイトが色の見えに影響を与えることを示しますシステムはこのトレイトが変更するとビューを自動的に再描画します色の見えに影響を及ぼすトレイトはより高額なため不定期に変更するトレイトのみにまばらに使用しましょうトレイトには名称もありデバッガでトレイトをプリントする場合などに使用しますデフォルトではトレイトタイプ自体の名称を使用しますここでは「テーマ」のような短い名称を付けます最後に identifierの文字列を提供します identifierによりトレイトはエンコードなどの追加の機能の対象となれますリバースDNS形式を使用して各トレイトのidentifierがアプリでグローバルに固有であることを確実にします
通常のプロパティ構文を使用してこのトレイトを設定し取得したいので先ほどの例で行ったのと同じように UITraitCollectionとUIMutableTraitsを拡張してプロパティを宣言しますカスタムテーマトレイトの実装の手順は以上ですこれでこの新しいトレイトの使用を開始できますたとえばテーマに基づいて外観を変更するカスタム動的カラーの定義方法を説明しましょう動的プロバイダinitializerを使用して新しいUIColorを作成しますクロージャ内でパスされる Trait Collectionのテーマを使用してどのカラーが返されるかを決定します次にこのカスタム背景色をビューに設定します定義した際にこのトレイトが色の見えに影響を及ぼすことを示したのでこのカスタム背景色を使用するビューはテーマが変更された際に自動的に更新されますトレイトを定義する際に最も重要な考慮事項はトレイト値に関連するデータタイプです優れたトレイトはシンプルな構造体や列挙型を含む値タイプを中心に構築されています Swiftのクラスに基づいたトレイトは避けましょうトレイトの最も効率的なデータタイプは Bool Int Double または Intローバリューを使用する列挙型です列挙型はトレイトの最も便利なデータタイプです効率性を最大化するために Intを列挙型の生データタイプとして明示的に指定してくださいトレイト値しとして使用するカスタム構造体データタイプには Equatableプロトコルの効率的な実装があるべきですシステムは頻繁にトレイト値を比較してトレイトがいつ変更されたかを決定するので等価伝達関数は可能な限り速くなければいけません
Objective-Cを使用するアプリでも新しいトレイトシステム機能をご利用いただけますカスタムトレイトのAPIは SwiftとObjective-Cでは異なりますしかしカスタムトレイトをそれぞれに定義し同じ基礎データに方向づけることができます詳細と特別な考慮事項についてはドキュメンテーションを参照してくださいカスタムトレイルの定義が完了したら次はアプリのトレイト階層でその定義向けのデータを生成します
トレイトオーバーライドはトレイト階層内でデータを変更するために使用する機構です iOS 17ではトレイトオーバーライドがこれまで以上に簡単になりましたウィンドウシーンウィンドウビュービューコントローラ表示コントローラを含むそれぞれのトレイト環境クラスに新しいtraitOverridesプロパティがありますトレイト階層の図に戻ってみるとトレイトオーバーライドはこのツリーのあらゆる場所でトレイトの値を変更しますこの階層でトレイト環境の1つにトレイトオーバーライドを適用するとそのトレイトの値をそのオブジェクトの Trait Collectionとそのすべての子孫で変更しますトレイト階層からの親と子のトレイト環境ではトレイトオーバーライドは次のように両方に影響を与えます親に適用されたトレイトオーバーライドは親の独自のTrait Collectionに影響を及ぼします次に親のTrait Collectionからの値が子に継承されます子のトレイトオーバーライドは子が継承した値に適用され独自のTrait Collectionを生成しますトレイトオーバーライドはオプションの入力 Trait Collectionは出力だと考えてくださいオーバーライドのないトレイトはすべて親から継承されますトレイトオーバーライドを使用してアプリの特定な部分のカラーテーマを変更する例をお見せします右にはアプリのトレイト階層の図がありますまだテーマトレイトの値を生成するためにオーバーライドを適用していませんそのためすべてのTrait Collectionには標準テーマのデフォルト値がついていますこれからトレイトオーバーライドをウィンドウシーンの階層のルートに適用します traitOverridesプロパティは UIMutableTraitsプロトコルを活用しトレイト値の設定を容易にしますそのため先程説明したとおり ExtensionをUIMutableTraitsに使用することで標準のプロパティ構文でカスタムトレイトのオーバーライド値を設定できますウィンドウシーンすべてのウィンドウビューコントローラそのウィンドウシーン内のビューのトレイトオーバーライドでテーマをパステルに設定することで各自の Trait Collectionでパステル値が継承されますつまり階層のルートでテーマを1か所に設定することで伝播されるデフォルト値をその階層ですべてに変更したのですたとえばウィンドウシーン内のビューコントローラの Trait Collectionからテーマを読み取り pastelを返すことができます次に階層の深部にあるビューで traitOverridesプロパティを使用しそのビューとその下にあるすべてのテーマを変更できますここではこのビューにモノクロのテーマのトレイトオーバーライドを設定しますこのモノクロ値は自己のサブビューにより継承され階層上位からパステル値をオーバーライドしますトレイトオーバーライドへの変更は Trait Collectionで即座に反映されない場合がありますたとえばビューはTrait Collectionの更新をレイアウトの直前に行うためビューのトレイトオーバーライドの変更は layoutSubviewsが実行される直前まで Trait Collectionに反映されませんまた traitOverridesプロパティを使用するとオーバーライドが適用されオーバーライドが削除されたかどうかを確認できますこちらはオーバーライドのトグリングの例で containsメソッドを使用してオーバーライドが存在することを確認し removeメソッドを使用してオーバーライドを完全に削除しますこのメソッドが呼び出されるたびに既存のオーバーライドを削除するかまだ存在しない場合は新しいテーマオーバーライドを適用しますトレイトオーバーライドは値を設定するための入力方法ですトレイト値の読み取りには必ず traitCollectionプロパティを使用しますオーバーライドが設定されておらず traitOverridesから読み取る場合は例外が発生します
トレイトオーバライドを使用する際のパフォーマンスに関する考慮事項を説明しますまず各トレイトオーバーライドには少額のコストがかかるので必要な場所のみにトレイトオーバーライドを設定し使用されないトレイトオーバーライドの設定は回避しましょうまたトレイトオーバーライドを変更するたびにシステムは階層の子孫のTrait Collectionを更新する必要がありますそのためトレイトオーバーライドの変更回数は最小限に抑えましょう最後にトレイトオーバーライドは階層のルート付近で適用されウィンドウシーンやウィンドウその下のすべてのものに影響を及ぼしますこれは非常に便利でウィンドウシーンやウィンドウにトレイトオーバーライドを適用するユースケースはたくさんありますがトレイトが階層の深部にある一部のビューにしか影響しない場合は代わりにトレイトオーバーライドを共通スーパービューやビューコントローラなどこれらのビューに最も近い共通の親ビューに適用しますそうすることでそのデータを使用するのが階層の一部分である場合にトレイトを階層全体に伝播する際に発生するコストを回避することができますトレイトの定義方法と階層でデータを生成する方法を把握したところで値が変更した場合に処理する方法を理解する必要があります
traitCollectionDidChangeは iOS 17で廃止されました traitCollectionDidChangeを実装する場合システムは皆さんがどのトレイトに依存するかを知りませんそのためトレイトが値を変更するたびにそのメソッドを呼び出す必要がありますしかしほとんどのクラスは一握りのトレイトしか使用せず他への変更に注意を払いませんより多くのカスタムトレイトを追加しても traitCollectionDidChangeがスケーリングされないのはこのためですその代わりにより柔軟性が高くパフォーマンスを向上する新しいトレイト登録APIがあります特定のトレイトに変更を登録することでシステムは皆さんがどのトレイトに依存するかを把握します新しいAPIはtarget-actionパターンまたはクロージャを使用してコールバックを受信しますサブクラスでメソッドをオーバーライドする必要がなくなったためどこからでも簡単にトレイトの変更を観察できるようになりました traitCollectionDidChangeの既存の実装をアップデートする方法から説明しますこちらは私の既存の実装です私がupdateViewを呼び出す前に horizontalSizeClassトレイトが変更されたかどうかを確認する方法に注目してくださいこのメソッドはこの1つのトレイトのみに依存しますアプリを古いiOSバージョンにデプロイしているために traitCollectionDidChangeを継続して使用する必要がある場合皆さんが依存する特定のトレイトの変更が実装により確認することを確実にしてくださいではこの実装をiOS 17の新しいトレイト登録メソッドに置き換えますクロージャベースのメソッドから始めましょう registerForTraitChangesを呼び出し登録するトレイトの配列をパスします横方向のサイズクラス向けのこのシンボルのようにすべてのシステムトレイトに対して新しいUltraitシンボルがあります次に特定のトレイトが変更された際に呼び出されるクロージャをパスしますクロージャはその他のトレイトへの変更では呼び出されないため古いトレイト値と新しいトレイト値を比較する必要はありませんトレイトが変更されたオブジェクトは最初のパラメータとしてクロージャにパスされますそのオブジェクトに対し弱い参照をキャプチャしなくて済むようにこのパラメータを使用します selfでトレイトの変更を登録する場合必ず「self: Self」と書いてください異なるトレイト環境でトレイトの変更を観察することもできますここでは2つのトレイトに変更を登録します横向きのサイズクラスと先程定義したContainedInSettings カスタムトレイトですクロージャはこの別のビューで変更が行われた場合に実行されます登録するビューのタイプをクロージャの最初のパラメータとして書きます
こちらは新しいtarget-actionベースのメソッドの例です registerForTraitChangesを呼び出し登録するトレイトの配列をパスし変更を呼び出すターゲットとアクションのメソッドをパスしますターゲットパラメータはオプションです省く場合ターゲットは registerForTraitChangesが呼び出されるのと同じオブジェクトになりますこの場合「self」ですクロージャメソッドと同様にその他のトレイト環境で変更を登録することもできますここでは他のビューでトレイトの変更を登録していますが handleTraitChangeというselfでメソッドを呼び出す設定にします target-actionを使用してトレイトの変更を登録する場合アクションメソッドのパラメータを 0 1 2のいずれかにすることができます最初のパラメータは常にトレイトが変更するオブジェクトとなりますこのパラメータを使用して新しいtraitCollectionを取得します 2つ目のパラメータは常に変更前のオブジェクトの以前のTrait Collectionとなります個々のトレイトの登録に加えて新しいシステムトレイトのセマンティックセットを使用しても登録できますたとえば systemTraitsAffectingColorAppearanceはシステム動的カラーの解像方法に影響を及ぼすシステムトレイトを返しますまた systemTraitsAffectingImageLookupは「UIImage(named:)」を使用して画像を読み込む場合に考慮されるシステムトレイトのサブセットを返しますいずれかのセットを直接 registerForTraitChangesにパスしてカスタム無効化を実行します
新しいメソッドを使用してトレイトの変更を登録した場合登録は自動的に整理されます詳細なユースケースがある場合はそれぞれの登録メソッドで返されたトークンを使用して手動で登録を解除できますしかしそういうケースは非常に稀なので registerForTraitChangesを呼び出す際は一般的に戻り値を無視します新しいトレイト登録APIを導入するにあたり考慮すべきベストプラクティスが 2つありますまず関係のないトレイトの値が変化したときに作業を行わないよう実際に依存するトレイトのみを登録しますもう1つは即座にアップデートを行わないでトレイトの変更に対して無効化を行うようにしましょうたとえばビューサブクラスの layoutSubviewsメソッド内でトレイトを使用する場合 setNeedsLayoutを呼び出してトレイトの変更を無効化しますこれはビューがlayoutSubviewsを受信するようにスケジュールしますが即座にアップデートを行いません UIKitのトレイトシステムを使い自身のデータを伝播できるようになったところでアプリ内でUIKitとSwiftUI間でデータをシームレスにパスするための完全に新しい方法が利用可能になります UIKitのカスタムトレイトはSwiftUIのカスタム environment keyと非常によく似ています UIKitとSwiftUIをブリッジすることで同じデータにアクセスできるようになります UIKit内にSwiftUIコンポーネントを埋め込む場合でも SwiftUI内にUIKitコンポーネントを埋め込む場合でもブリッジされたデータはどちらもシームレスにパスします同じ基礎データを UIKitコードのトレイトAPIと SwiftUIコードの環境APIを使用して読み書きすることができますアプリのUIKitコードで定義した新しいカラーテーマのトレイトを対応するSwiftUIの environment keyにブリッジするのは非常に簡単です
UIKitにカスタムトレイト SwiftUIにカスタム environment keyがあり同じデータを表していることを推定しますこの2つをブリッジするには UITraitBridgedEnvironmentKey プロトコルに適合性を追加するだけですこれを行うために UIKitのトレイトを読み込み SwiftUIに値を返すためのメソッドを1つ実装し SwiftUIの環境値をUIKitトレイトに書き込むメソッドを1つ実装しますこれでUIKitトレイトとSwiftUI environment keyは統一されたストレージにアクセスできいずれかのフレームワークを使用して書き込まれたコンポーネントから同じデータを読み書きできるようになりますこちらはブリッジされたトレイトと environment keyを使用する方法の例ですアプリのルートでテーマトレイトのトレイトオーバーライドを UIKitウィンドウシーンに適用しますこれによりモノクロのテーマ値がウィンドウシーン内に含まれるすべてのものに伝播されます次にそのウィンドウシーンのウィンドウの深部に UIKitコレクションビューがありますこのコレクションビューには UIHostingConfigurationを使用しているセルがあり各セルにはSwiftUIビューが表示されます SwiftUI CellView内には「テーマ」という名前のプロパティがありこれは Environmentプロパティラッパーを使用して SwiftUI環境の値を読み込みますこの環境の値はブリッジされた UIKitのトレイトと一致します最後にテーマプロパティを使用してこのSwiftUIビュー内のテキストの色を制御します SwiftUIはデータ依存性を自動的に追跡するため UIKitウィンドウシーンのテーマのトレイトオーバライドが異なる値に変更した場合 SwiftUI セルビューは新しいテーマに反映するように自動的に更新されますブリッジは反対の場合でも機能しますこの例ではアプリの設定を表示する SwiftUIビューがあります environment modifierを使用して標準テーマを設定すると設定コントローラ内にあるすべてのものに適用されますこれはUIKitでトレイトオーバライドを適用するのと概念的に同じです次に UIViewControllerRepresentable内に含まれている UIKitベースの設定ビューコントローラでブリッジされたトレイトのテーマ値を読み込みそれを　このビューコントローラ向けに表示されたタイトルの更新に使用しますこのようにブリッジされたUIKitトレイトと SwiftUI environment keyを使用してシームレスにデータにアクセスできますこれらの強力な新機能について学んだところでトレイトシステムを活用できる場所をアプリ内で見つけてカスタムトレイトを定義することでデータを自動的に伝搬してみましょう次に新しいtraitOverrides プロパティを導入しトレイト階層にあるデータを簡単に変更してより柔軟なトレイト登録APIで使用するトレイトで正確な依存関係を作成しますカスタムUIKitトレイトとカスタム SwiftUI environment keyをブリッジしてデータが両方でシームレスに移動するのを実現しましょうトレイトのパワーを解き放つのは皆さん次第ですご視聴ありがとうございます ♪ ♪

// Build a new trait collection instance from scratch
let myTraits = UITraitCollection { mutableTraits in
    mutableTraits.userInterfaceIdiom = .phone
    mutableTraits.horizontalSizeClass = .regular
}

// Get a new instance by modifying traits of an existing one
let otherTraits = myTraits.modifyingTraits { mutableTraits in
    mutableTraits.horizontalSizeClass = .compact
    mutableTraits.userInterfaceStyle = .dark
}

9:06 - Implementing a simple custom trait

struct ContainedInSettingsTrait: UITraitDefinition {
    static let defaultValue = false
}

let traitCollection = UITraitCollection { mutableTraits in
    mutableTraits[ContainedInSettingsTrait.self] = true
}

let value = traitCollection[ContainedInSettingsTrait.self]
// true

10:23 - Implementing a simple custom trait with a property

struct ContainedInSettingsTrait: UITraitDefinition {
    static let defaultValue = false
}

extension UITraitCollection {
    var isContainedInSettings: Bool { self[ContainedInSettingsTrait.self] }
}

extension UIMutableTraits {
    var isContainedInSettings: Bool {
        get { self[ContainedInSettingsTrait.self] }
        set { self[ContainedInSettingsTrait.self] = newValue }
    }
}

let traitCollection = UITraitCollection { mutableTraits in
    mutableTraits.isContainedInSettings = true
}

let value = traitCollection.isContainedInSettings
// true

11:00 - Implementing a custom theme trait

enum MyAppTheme: Int {
    case standard, pastel, bold, monochrome
}

struct MyAppThemeTrait: UITraitDefinition {
    static let defaultValue = MyAppTheme.standard
    static let affectsColorAppearance = true
    static let name = "Theme"
    static let identifier = "com.myapp.theme"
}

extension UITraitCollection {
    var myAppTheme: MyAppTheme { self[MyAppThemeTrait.self] }
}

extension UIMutableTraits {
    var myAppTheme: MyAppTheme {
        get { self[MyAppThemeTrait.self] }
        set { self[MyAppThemeTrait.self] = newValue }
    }
}

12:33 - Using a custom theme trait

let customBackgroundColor = UIColor { traitCollection in
    switch traitCollection.myAppTheme {
    case .standard:    return UIColor(named: "StandardBackground")!
    case .pastel:      return UIColor(named: "PastelBackground")!
    case .bold:        return UIColor(named: "BoldBackground")!
    case .monochrome:  return UIColor(named: "MonochromeBackground")!
    }
}

let view = UIView()
view.backgroundColor = customBackgroundColor

18:05 - Managing trait overrides

func toggleThemeOverride(_ overrideTheme: MyAppTheme) {
    if view.traitOverrides.contains(MyAppThemeTrait.self) {
        // There's an existing theme override; remove it
        view.traitOverrides.remove(MyAppThemeTrait.self)
    } else {
        // There's no existing theme override; apply one
        view.traitOverrides.myAppTheme = overrideTheme
    }
}

21:00 - Trait change handling on older iOS versions

// Efficient implementation that only updates when necessary
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
        updateViews(sizeClass: traitCollection.horizontalSizeClass)
    }
}

func updateViews(sizeClass: UIUserInterfaceSizeClass) {
    // Update views for the new size class...
}

21:28 - Registering for trait changes using a closure

// Register for horizontal size class changes on self
registerForTraitChanges(
    [UITraitHorizontalSizeClass.self]
) { (self: Self, previousTraitCollection: UITraitCollection) in
    self.updateViews(sizeClass: self.traitCollection.horizontalSizeClass)
}

// Register for changes to multiple traits on another view
let anotherView: MyView
anotherView.registerForTraitChanges(
    [UITraitHorizontalSizeClass.self, ContainedInSettingsTrait.self]
) { (view: MyView, previousTraitCollection: UITraitCollection) in
    // Handle the trait change for this view...
}

22:48 - Registering for trait changes using a target-action

// Register for horizontal size class changes on self
registerForTraitChanges(
    [UITraitHorizontalSizeClass.self],
    action: #selector(UIView.setNeedsLayout)
)

// Register for changes to multiple traits on another view
let anotherView: MyView
anotherView.registerForTraitChanges(
    [UITraitHorizontalSizeClass.self, ContainedInSettingsTrait.self],
    target: self,
    action: #selector(handleTraitChange(view:previousTraitCollection:))
)

@objc func handleTraitChange(view: MyView, previousTraitCollection: UITraitCollection) {
    // Handle the trait change for this view...
}

24:20 - Registering for changes to system traits affecting color appearance

registerForTraitChanges(
    UITraitCollection.systemTraitsAffectingColorAppearance,
    action: #selector(handleColorAppearanceChange)
)

@objc func handleColorAppearanceChange() {
    // Handle the color appearance trait changes...
}

24:37 - Manually unregistering for trait changes

// Store the returned registration token
let registration = registerForTraitChanges([UITraitHorizontalSizeClass.self], action: #selector(handleTraitChange))

// Later, use the stored registration token to manually unregister
unregisterForTraitChanges(registration)

@objc func handleTraitChange() {
    // Handle the trait change...
}

26:19 - Implementing a bridged UIKit trait and SwiftUI environment key

enum MyAppTheme: Int {
    case standard, pastel, bold, monochrome
}

// Custom UIKit trait
struct MyAppThemeTrait: UITraitDefinition {
    static let defaultValue = MyAppTheme.standard
    static let affectsColorAppearance = true
}

extension UITraitCollection {
    var myAppTheme: MyAppTheme { self[MyAppThemeTrait.self] }
}

extension UIMutableTraits {
    var myAppTheme: MyAppTheme {
        get { self[MyAppThemeTrait.self] }
        set { self[MyAppThemeTrait.self] = newValue }
    }
}

// Custom SwiftUI environment key
struct MyAppThemeKey: EnvironmentKey {
    static let defaultValue = MyAppTheme.standard
}

extension EnvironmentValues {
    var myAppTheme: MyAppTheme {
        get { self[MyAppThemeKey.self] }
        set { self[MyAppThemeKey.self] = newValue }
    }
}

// Bridge SwiftUI environment key with UIKit trait
extension MyAppThemeKey: UITraitBridgedEnvironmentKey {
    static func read(from traitCollection: UITraitCollection) -> MyAppTheme {
        traitCollection.myAppTheme
    }

    static func write(to mutableTraits: inout UIMutableTraits, value: MyAppTheme) {
        mutableTraits.myAppTheme = value
    }
}

27:01 - Setting a UIKit trait and reading the bridged environment value from SwiftUI

// UIKit trait override applied to the window scene
let windowScene: UIWindowScene
windowScene.traitOverrides.myAppTheme = .monochrome

// Cell in a UICollectionView configured to display a SwiftUI view
let cell: UICollectionViewCell
cell.contentConfiguration = UIHostingConfiguration {
    CellView()
}

// SwiftUI view displayed in the cell, which reads the bridged value from the environment
struct CellView: View {
    @Environment(\.myAppTheme) var theme: MyAppTheme

    var body: some View {
        Text("Settings")
            .foregroundStyle(theme == .monochrome ? .gray : .blue)
    }
}

28:16 - Setting a SwiftUI environment value and reading the bridged trait from UIKit

// SwiftUI environment value applied to a UIViewControllerRepresentable
struct SettingsView: View {
    var body: some View {
        SettingsControllerRepresentable()
            .environment(\.myAppTheme, .standard)
    }
}

final class SettingsControllerRepresentable: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> SettingsViewController {
        SettingsViewController()
    }
    
    func updateUIViewController(_ uiViewController: SettingsViewController, context: Context) {
        // Update the view controller...
    }
}

// UIKit view controller contained in the SettingsControllerRepresentable
class SettingsViewController: UIViewController {
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        title = settingsTitle(for: traitCollection.myAppTheme)
    }
    
    func settingsTitle(for theme: MyAppTheme) -> String {
        switch theme {
        case .standard:   return "Standard"
        case .pastel:     return "Pastel"
        case .bold:       return "Bold"
        case .monochrome: return "Monochrome"
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23