UIKitでSwiftUIを使用する

UIKitでSwiftUIを使用する

UIKit Appで、SwiftUIの機能を活用する方法を紹介します。UIHostingConfigurationを使用したSwiftUIで、カスタムUICollectionViewセルやUITableViewセルをシームレスに構築することができます。また、App内でのUIKitとSwiftUIのコンポーネント間におけるデータフローを管理する方法も紹介します。このセッションを最大限に活用するには、SwiftUIに関する基本的な知識を習得しておくとよいでしょう。

リソース
関連ビデオ

WWDC22
WWDC20
- モダンなセルの構成
- Swift UIにおけるデータの重要事項
ダウンロード

♪メロウなヒップホップ ♪ ♪ Sara Frederixonです Health Appのエンジニアです今日はSwiftUIとUIKitの話をします私も皆さん同様に既存のUIKitを使いますそれが私にとってヘルスケアAppですこのAppは多くのデータを表示し健康に関するデータを分かりやすく表示しますでもこの構築は複雑です SwiftUIを最大限活かす事に注力してきましたそこでUIKitとSwiftUIチームと組んだ同一Appにこれらをいかに組み込むかお話しますこのビデオで説明するのはいかに簡単に自分のUIKitAppでSwiftUIを使うかですまずより柔軟性を与える新しいアップデートを加えた既存のUIHostingControllerを説明し次にAppに既に存在するデータを SwiftUIビューに入力しそのデータが変更されたときに SwiftUIビューを確実に更新する方法について掘り下げますそれからSwiftUIを使って UICollectionViewとUITableViewのセルを構築することができるエキサイティングな新機能について話します最後にセル内でSwiftUIを使用しているときにコレクションとテーブルビューでデータの流れのユニークな側面について説明しますではまずUIHostingControllerの話を UIHostingControllerは SwiftUIビュー階層を含むUIViewControllerですホスティングコントローラーを使って作業しますどこでもUIKitのビューコントローラーが使える UIHostingControllerは SwiftUIへアクセスする最も便利な手段ですホスティングコントローラーの機能を見てみましょうホスティングコントローラはビューコントローラでありそのviewプロパティに UIViewが格納されていることを意味しますそのビュー内で SwiftUIコンテンツがレンダリングされます使用例を見てみましょう HeartRateViewとSwiftUI ビューを作成します次にHeartRateViewでコントローラーを作成しこれがルートビューになります UIHostingControllerは全UIKitのビューコントローラーのAPIで使えます他の例を見てみましょう前回と同じHeartRateViewとホスティングコントローラーを用意しましたここでホスティングコントローラーをチャイルドビューコントローラーとして追加しますコントローラービューでポジションとサイズを設定します UIHostingController 内の SwiftUI のコンテンツが変更されたときビューのサイズを変更する必要が生じることがあります iOS 16の新機能としてUIHostingControllerでビューコントローラーの優先コンテンツサイズとビューの固有コンテンツサイズの自動更新を有効にすることができます有効化はUIHostingControllerの sizingOptionsで行います例を見てみましょうまずHeartRateViewを作成しますそしてhostingControllerも作成新しい sizingOptions API を使って hostingController に preferredContentSize を自動的に更新するように指示します次にポップオーバーに設定するのは modalPresentationStyleです新しいsizingOptionsのAPIがポップオーバーを SwiftUIのコンテンツへ常に最適化します UIHostingControllerを学んだところで他のUIKitからSwiftUIへのデータの追加についてお話しますそしてデータ変更時SwiftUIが更新される流れもこれはUIKitのダイアグラムですここには既存のモデルレイヤーがあります通常Appデータのモデルオブジェクトを格納します Appには複数のビューコントローラーが SwiftUIの使用開始はビューコントローラー内の SwiftUIビューとホスティングコントローラーが必要ですこのSwiftUIビューとデータを集積します既存のモデルレイヤーに属するものですここではデータがUIKitとSwiftUIを繋げるか見ていきます SwiftUIは様々なデータのプリミティブを提供します App内のデータ管理の為です他のオプションも見てみましょう SwiftUIで作成したデータの保存は SwiftUIが @Stateと@StateObjectを提供します SwiftUI外のデータにフォーカスしている為このプロパティラッパーは正しくありませんこれについてここでは触れません “Swift UIにおけるデーターの重要項目”のビデオでSwiftUIビュー内のデータが学べます SwiftUI外でデータを扱うにはビューを初期化した際に値を処理します Raw dataを処理しているからですこれはSwiftUIが管理するものではありませんデータ変更時UIHostingControllerをマニュアルで更新する必要があります例を見てみましょう HeartRateViewというSwiftUI ですシングルプロパティで心拍数をbeatsPerMinuteで保存していますこれをテキストでValueとして表示しますここでHeartRateViewを UIHostingControllerで View controllerに表示します対象はHeartRateViewControllerですレファレンスをホスティングコントローラーに保存しますこれで後でroot viewを更新できます SwiftUIのHeartRateViewは値型なのでそれ自体を保存すると別のコピーが作成され UIを更新することができないことを覚えておいてください HeartRateViewControllerは HeartRateViewに入力するためのデータを所有していますこのデータはbeatsPerMinuteプロパティに格納され beatsPerMinuteの値が変化したらメソッドを呼び出してビューを更新しています updateメソッドの内部で最新のbeatsPerMinuteの値を使用して新しいHeartRateViewを作成しそのビューをホスティングコントローラの rootViewとして割り当てますこれはUIKitからSwiftUIにデータを取得するシンプルな方法ですがデータが変更されるたびにホスティングコントローラのrootViewを手動で更新する必要がありますこれらの更新を自動的に行うために他のSwiftUIデータプリミティブをいくつか見ていきましょう @ObservedObjectと@EnvironmentObjectのプロパティラッパーsが ObservableObjectプロトコルに準拠した外部モデルObjectの参照を許可しますこれらのプロパティラッパーを使うとデータが変更されたとき SwiftUIは自動的にビューを更新しますこのビデオでは@ObservedObjectのプロパティラッパーをお見せしました EnvironmentObjectについては先ほど紹介したセッションをご覧ください “Swift UIにおけるデーターの重要項目”です @ObservedObjectの作成を見てみましょうまず既存のモデルオブジェクトを ObservableObjectプロトコルに準拠させることからはじめます次にSwiftUI ビューの @ObservedObject プロパティとしてモデルを保存します ObservableObjectをSwiftUIに接続することでそのプロパティの1つが変更されたときにビューを更新することができます HeartRateViewのサンプルに戻りこれを配線してみましょうこのAppは beatsPerMinuteというプロパティを持った HeartDataというクラスを持っていますこれをObservableObjectプロトコルに準拠させます次にbeatsPerMinuteプロパティに @Publishedプロパティラッパーを追加しますこのプロパティラッパーは変更時にビューを更新するために SwiftUI をトリガーするものです HeartRateViewでは @ObservedObjectプロパティラッパーでアノテーションされたプロパティに HeartDataを格納していますビュー本体ではHeartDataから直接beatsPerMinuteを表示していますではこれらをビューコントローラーで一緒に使ってみましょう以下がHeartRateViewControllerです HeartData ObservableObjectをプロパティに保存しますこのプロパティはSwiftUIビューの内部ではないのでここでプロパティラッパーを使用する必要はありません HeartRateViewControllerは HeartDataのインスタンスで初期化されそれを使ってHeartRateViewを作成しホストコントローラのrootViewとしますダイアグラムはこの結合を表しています現在のHeartDataインスタンスを取得すると 78拍/分の心拍数が含まれていますそしてそのHeartDataのインスタンスで新しいHeartRateViewControllerを作成し SwiftUIのHeartRateViewに接続するのです数秒後次の心拍データサンプルが到着すると心臓データのbeatsPerMinuteプロパティは 94に更新されますこれはObservableObjectの公開プロパティを変更するため HeartRateViewは自動的に更新され新しい値が表示されますデータ変更時にホスティングコントローラーでマニュアルで更新する必要はありませんこれがObservableObjectが UIKitからSwiftUIにデータを橋渡しする素晴らしい方法である理由です次にコレクションビューとテーブルビューのセルでの SwiftUIの使用について説明します iOS 16の新機能である UIHostingConfigurationは既存のUIKitのコレクションビューとテーブルビューの中で SwiftUIの利用を可能にしました UIHostingConfiguration を使うと余分なビューやビューコントローラーを使わずに SwiftUIでカスタムセルを簡単に実装することができます UIHostingConfigurationについて深く掘り下げる前に UIKitのセルコンフィギュレーションについておさらいしておきましょうセルコンフィギュレーションはUIKitでセルのコンテンツ・スタイル・アクションを定義する最新の方法です UIViewやUIViewControllerと違いコンフィギュレーションは軽いstructですこの作成は高価ではありませんコンフィギュレーションはあくまでセルの外観を表すものなので効果を発揮するためにはセルに適用する必要がありますコンフィギュレーションは互換性があり UICollectionViewと UITableViewの両方のセルで機能します詳細は”モダンなセルの構成”をご覧くださいこれを念頭に置いて UIHostingConfigurationの話をしましょう UIHostingConfigurationはコンテントコンフィギュレーションで SwiftUIのViewBuilderで初期化しますつまりSwiftUIでコードを書き始め内部で直接Viewを作成しますホスティングコンフィギュレーションのレンダリングには UICollectionViewかUITableViewの cell.contentConfigurationプロパティに設定しますカスタムの心拍セルを構築するためにこのホスティングコンフィギュレーションで SwiftUIのコードを書き始めましょう “Heart Rate”というテキストと心臓の画像を持つラベルを作成することから始めます SwiftUI のビューはそれらが使われるコンテキストに基づくデフォルトのスタイルを受け取りますしかしSwiftUIの標準的なビューモディファイアを使用してスタイリングのカスタマイズを始めることができますラベルにforegroundStyleとfont修飾子をつけて画像と文字を太いフォントでピンクにしましょう通常のSwiftUIのコードを書いているだけなのでいつでも好きなときにコードをスタンドアロンビューにすることができますここではHeartRateTitleViewという新しいSwiftUIビューを作成し持っていたコードをそのボディに移動しそのHeartRateTitleViewをホスティングコンフィギュレーションで使用していますセルに示すように全く同じ結果が得られますこれでHeartRateTitleViewの中にさらにビューを追加していくことができるようになりましたラベルをHStackの中にスペーサー付きで入れその横にTextビューで現在時刻を追加していますいい具合ですでは更にcustom cellにコンテンツを加えます HeartRateTitleViewの下に書きましょうここではVStackを HeartRateTitleViewの下にあるカスタムセルにさらにコンテンツを追加してみましょう次に90 BPMを表示するために 2つのTextビューをHStackにまとめいくつかのモディファイアを適用して好きなようにスタイルを設定します HeartRateTitleViewで前に行ったのと同様この新しいコードを独自のSwiftUIビューに移動させることができます今度は同じコードを HeartRateBPMViewの本体に展開しますセルもいい感じですがもう1つ追加できるアイデアがあります iOS 16の新機能はわずか数行のコードでデータを美しいグラフで視覚化できる Swift Chartsフレームワークですこれを利用してセルの中に小さな折れ線グラフを表示させてみましょう新しいチャートビューを使用して最近の心拍数サンプルを視覚化する小さなラインチャートを作成しセル内のBPMビューの隣に表示しますグラフを生成するために心拍数のサンプルのコレクションを渡しすべてのサンプルを結ぶLineMarkを描画します各サンプルを示す円記号をライン上に追加しピンクの前景スタイルを適用して HeartRateTitleViewにマッチするようにチャートを着色することができます新しい Swift Charts フレームワークでできることの表面を削ったに過ぎません「Swift Chartsの紹介」のセッションで詳細を紹介しています完成した心拍計は見た目が素晴らしいだけでなくたった数分で簡単に作ることができましたそれだけUIHostingConfiguration と SwiftUI を使ってカスタムセルを作り始めるのは簡単なことです UIHostingConfigurationがサポートする 4つの特別な機能について説明しましょうデフォルトではルートレベルのSwiftUIコンテンツは UIKitのセルのレイアウトマージンに基づいてセルのエッジから挿入されますこれによりセルのコンテンツは隣接するセルやナビゲーションバーなどの他のUI要素のコンテンツと適切に整列されるようになります時には異なるマージンを使用したりセルの端までコンテンツを拡張したい場合がありますこのような場合はUIHostingConfigurationの margin修飾子を使ってデフォルトのマージンを変更することができます SwiftUI を使ってセルの背景の外観をカスタマイズしたい場合 UIHostingConfiguration の background モディファイアを使います UIHostingConfigurationのバックグランドとそのコンテントにはいくつかの重要な違いがあります背景はセルの背面セルのコンテンツビューで SwiftUIコンテンツの下にホストされますまた一般的にコンテンツはセルの端から端まで入り込んでいますが背景はセル内の端から端まで伸びています最後にセルフサイズセルを使用する場合セルの内容のみがセルのサイズに影響します次にコレクションビューのリストやテーブルビューの中にセルがある場合に使用できる UIHostingConfigurationの特別な機能を2つ見てみましょうリストにおいてセルの下のセパレータはデフォルトでホスティングの設定で自動的にSwiftUIテキストに整列されますこの例ではセパレータの前縁が画像からはみ出しセル内のテキストと揃うようになっていることに注目してくださいホスティングの設定でセパレータを異なる SwiftUIビューに揃える必要がある場合は alignmentGuide修飾子を使用してくださいコレクションビューのリストやテーブルビューの内部では SwiftUIで直接行のスワイプアクションを設定することができます swipeActionsモディファイアの中にボタンを作成することでセルをスワイプしてカスタムアクションを表示し実行することができるようになりますこのビデオのサンプルコードをダウンロードすると完全な例を見ることができますスワイプアクションを定義する際にはボタンがアイテムに対する安定した識別子を使用してアクションを実行することを確認してくださいインデックスパスを使用しないでくださいセルが表示されている間にインデックスパスが変更されるとスワイプ操作が間違ったアイテムに作用する可能性がありますセルでUIHostingConfigurationを使用する場合タップ処理・ハイライト・選択などのセルインタラクションは依然としてコレクションビューまたはテーブルビューによって処理されることに留意してくださいこれらのUIKitのセルの状態のいずれかのために SwiftUI のビューをカスタマイズする必要がある場合セルの configurationUpdateHandler の内部でホスティングの設定を作成し SwiftUI のコードで提供される状態を使用することができます ConfigurationUpdateHandlerはセルの状態が変化するたびに再度実行され新しい状態のUIHostingConfigurationを作成しセルに適用しますこの例では状態を利用してセルが選択されたときにチェックマーク画像を追加しています UIHostingConfigurationについて理解できたらモデルレイヤーから SwiftUIを使ってセルを描画された UICollectionViewまたはUITableViewへのデータの流れを管理する方法を説明しましょう目指すのは健康状態の可視化ですこの例ではUICollectionViewを使用していますが私たちが議論するすべては UITableViewにも同様に適用されますコンポーネントを見てみましょう MedicalConditionモデルオブジェクトのコレクションをコレクションビューに表示しますこのコレクション内の各項目についてその病状を表示するセルをコレクションビューに作成したいそのためにコレクションビューに接続された diffableデータソースを作成することにします次にデータコレクション内の MedicalConditionモデルオブジェクトの識別子を diffableデータソースのスナップショットに入力する必要があります diffableデータソーススナップショットには MedicalConditionオブジェクトではなく各MedicalConditionの一意の識別子が含まれていることが重要ですこれによりdiffableデータソースは各項目の同一性を正確に追跡し後で新しいスナップショットを適用したときに正しい変更を計算できるようになりますこれらの項目識別子を持つスナップショットを diffableデータソースに適用することでコレクションビューが自動的に更新され各項目に新しいセルが作成されますそれぞれのセルは UIHostingConfigurationのSwiftUIビューで 1つのMedicalConditionを表示するように設定されています SwiftUIで構築されたセルを表示しているのでデータが変更されたときに UIを更新する処理を行う必要があります変更には2種類あり別々に処理する必要があります 1つ目のタイプはデータ収集そのものが変化する場合です例えば項目の挿入・並べ替え。削除が行われたときですこれらの変更はdiffableデータソースに新しいスナップショットを適用することで処理されます Diffableデータソースは新旧のスナップショットを差分しコレクションビューに必要な更新を行いセルの挿入・移動・削除を行いますデータのコレクション自体の変更はセル内部のものには影響しないので UIKitやSwiftUIを使ってセルを構築してもこれらのタイプの変更を同じように扱うことができます２つ目は個々のモデルオブジェクトのプロパティが変更された場合ですこのような変更には多くの場合既存のセルのビューを更新する必要があります diffableデータソースはスナップショットにアイテムの識別子しか含まれないため既存のアイテムのプロパティがいつ変更されたかを知ることはできません従来UIKitを使用する場合スナップショット内のアイテムを再設定または再読み込みすることでこれらの変更についてdiffableデータソースに手動で伝える必要がありましたしかしセルでSwiftUIを使用する場合これはもう必要ありません SwiftUIビューのObservedObjectプロパティに ObservableObjectモデルを格納することでモデルの公開プロパティへの変更は自動的にSwiftUIがビューをリフレッシュするトリガーとなりますこれはモデルとセル内のSwiftUIビューの間の直接的な接続を確立します変更が行われたとき diffableデータソースや UICollectionViewを通さずにセル内のSwiftUIビューは直接更新されますセルのデータが変更されると新しい内容に合わせてセルを拡大または縮小する必要が生じることがありますしかしSwiftUIのセルの内容が UIKitを通さずに直接更新される場合どのようにコレクションビューはセルのサイズを変更することを知るのでしょうか？ UIHostingConfigurationは UIKitの全く新しい機能を利用してこれを実現します iOS 16ではUICollectionViewとUITableViewのセルフ-サイジングのセルもセルフ-リサイズされるようになりました！これはデフォルトで有効で UIHostingConfigurationを使っていて SwiftUI のコンテンツが変更されるとき必要であればそれを含むセルが自動的にリサイズされますこの機能の詳細については ”UIKitの最新情報”をご覧くださいもう一つデータフローを処理する必要がある場合がありますそれはSwiftUIビューからAppの他の部分にデータを送り返すことです ObservableObjectが全て担ってくれます ObservableObjectの公開プロパティに対して双方向バインディングを作成することができます ObservableObjectからSwiftUIにデータが流れるだけでなく SwiftUIはモデルオブジェクトのプロパティに変更を書き戻すことができますここではMedicalConditionセルのテキストを編集可能にすることで双方向のバインディングを作成する簡単な例を見てみましょう ObservableObjectとMedicalConditionです IDプロパティの固有のIdentifierです diffableデータソーススナップショットへの入力に使用される識別子ですそしてこの公開プロパティには病状のテキストが格納されます各セル内に病状テキストを表示する MedicalConditionViewですこれは読み出しのみなので編集可能にしましょうあとはTextViewをTextFieldに変更しドル記号のプレフィックスを付けて MedicalConditionのtextプロパティへのバインディングを作成するだけですテキストフィールドに入力するとこのバインディングによってSwiftUIは変更を ObservableObjectに直接書き戻せます SwiftUIで双方向のデータフローを設定するのは本当に簡単です UIHostingController は SwiftUI のコンテンツを UIKit Appに埋め込むための強力な方法です SwiftUI のビューはホスティングコントローラのビューの内部でレンダリングされ UIKit でビューコントローラを使うことができる場所であればどこでもホスティングコントローラを使うことができます UIHostingController を使用する場合は必ずビューコントローラーをビューと一緒にAppに追加してくださいツールバー・キーボードショートカット UIViewControllerRepresentableを使用するビューなどの多くのSwiftUIの機能は適切に統合するために UIKit のビューコントローラ階層への接続を必要とするのでホストコントローラのビューをホストコントローラ自身から決して切り離さないでください比較のためにセルに UIHostingConfiguration を適用するとき SwiftUI ビューは UIViewController なしでセルでホストされます UIHostingConfigurationは SwiftUIの機能の大部分をサポートしますしかしUIViewControllerRepresentableに依存するSwiftUIビューはセルの内部で使用できないことに留意してください UIHostingController と UIHostingConfiguration を使って UIKit Appに SwiftUI を組み込むための素晴らしい方法が2つあります SwiftUI は既存の UIKit アプリにシームレスに統合されます UIHostingController を使って App全体に SwiftUI を追加しましょう UIHostingConfigurationを使用してコレクションとテーブルビューにカスタムセルを作成しますまたObservableObjectを活用することでデータとUIを常に同期させることができます今すぐあなたのAppに SwiftUIを追加しましょうありがとうございました

// Presenting a UIHostingController

let heartRateView = HeartRateView() // a SwiftUI view
let hostingController = UIHostingController(rootView: heartRateView)

// Present the hosting controller modally
self.present(hostingController, animated: true)

2:31 - Embedding a UIHostingController

// Embedding a UIHostingController

let heartRateView = HeartRateView() // a SwiftUI view
let hostingController = UIHostingController(rootView: heartRateView)

// Add the hosting controller as a child view controller
self.addChild(hostingController)
self.view.addSubview(hostingController.view)
hostingController.didMove(toParent: self)

// Now position & size the hosting controller’s view as desired…

3:13 - Presenting UIHostingController as a popover

// Presenting UIHostingController as a popover

let heartRateView = HeartRateView() // a SwiftUI view
let hostingController = UIHostingController(rootView: heartRateView)

// Enable automatic preferredContentSize updates on the hosting controller
hostingController.sizingOptions = .preferredContentSize

hostingController.modalPresentationStyle = .popover
self.present(hostingController, animated: true)

5:27 - Passing data to SwiftUI with manual UIHostingController updates

// Passing data to SwiftUI with manual UIHostingController updates

struct HeartRateView: View {
    var beatsPerMinute: Int

    var body: some View {
        Text("\(beatsPerMinute) BPM")
    }
}

class HeartRateViewController: UIViewController {
    let hostingController: UIHostingController< HeartRateView >
    var beatsPerMinute: Int {
        didSet { update() }
    }

    func update() {
        hostingController.rootView = HeartRateView(beatsPerMinute: beatsPerMinute)
    }
}

7:51 - Passing an ObservableObject to automatically update SwiftUI views

// Passing an ObservableObject to automatically update SwiftUI views

class HeartData: ObservableObject {
    @Published var beatsPerMinute: Int

    init(beatsPerMinute: Int) {
       self.beatsPerMinute = beatsPerMinute
    }
}

struct HeartRateView: View {
    @ObservedObject var data: HeartData

    var body: some View {
        Text("\(data.beatsPerMinute) BPM")
    }
}

8:30 - Passing an ObservableObject to automatically update SwiftUI views

// Passing an ObservableObject to automatically update SwiftUI views

class HeartRateViewController: UIViewController {
    let data: HeartData
    let hostingController: UIHostingController<HeartRateView>  

    init(data: HeartData) {
        self.data = data
        let heartRateView = HeartRateView(data: data)
        self.hostingController = UIHostingController(rootView: heartRateView)
    }
}

9:52 - UIHostingConfiguration

cell.contentConfiguration = UIHostingConfiguration {
  // Start writing SwiftUI here!
}

11:02 - Building a custom cell using SwiftUI with UIHostingConfiguration

// Building a custom cell using SwiftUI with UIHostingConfiguration

cell.contentConfiguration = UIHostingConfiguration {
    HeartRateTitleView()
}

struct HeartRateTitleView: View {
    var body: some View {
        HStack {
            Label("Heart Rate", systemImage: "heart.fill")
                .foregroundStyle(.pink)
                .font(.system(.subheadline, weight: .bold))
            Spacer()
            Text(Date(), style: .time)
                .foregroundStyle(.secondary)
                .font(.footnote)
        }
    }
}

12:46 - Building a custom cell using SwiftUI with UIHostingConfiguration

// Building a custom cell using SwiftUI with UIHostingConfiguration

cell.contentConfiguration = UIHostingConfiguration {
    VStack(alignment: .leading) {
        HeartRateTitleView()
        Spacer()
        HeartRateBPMView()
    }
}

struct HeartRateBPMView: View {
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Text("90")
                .font(.system(.title, weight: .semibold))
            Text("BPM")
                .foregroundStyle(.secondary)
                .font(.system(.subheadline, weight: .bold))
        }
    }
}

13:41 - Building a custom cell using SwiftUI with UIHostingConfiguration, with a chart!

// Building a custom cell using SwiftUI with UIHostingConfiguration

cell.contentConfiguration = UIHostingConfiguration {
    VStack(alignment: .leading) {
        HeartRateTitleView()
        Spacer()
        HStack(alignment: .bottom) {
            HeartRateBPMView()
            Spacer()
            Chart(heartRateSamples) { sample in
                LineMark(x: .value("Time", sample.time),
                         y: .value("BPM", sample.beatsPerMinute))
                   .symbol(Circle().strokeBorder(lineWidth: 2))
                   .foregroundStyle(.pink)
            }
        }
    }
}

14:41 - Content margins

cell.contentConfiguration = UIHostingConfiguration {
    HeartRateBPMView()
}
.margins(.horizontal, 16)

15:16 - Cell backgrounds

cell.contentConfiguration = UIHostingConfiguration {
   HeartTitleView()
} 
.background(.pink)

16:32 - List swipe actions

cell.contentConfiguration = UIHostingConfiguration {
    MedicalConditionView()
        .swipeActions(edge: .trailing) { … }
}

17:25 - Incorporating UIKit cell states

// Incorporating UIKit cell states

cell.configurationUpdateHandler = { cell, state in
    cell.contentConfiguration = UIHostingConfiguration {
      HStack {
        HealthCategoryView()
            Spacer()
            if state.isSelected {
                Image(systemName: "checkmark")
            }
        }
    }
}

23:17 - Creating a two-way binding to data in SwiftUI

// Creating a two-way binding to data in SwiftUI

class MedicalCondition: Identifiable, ObservableObject {
    let id: UUID
   
    @Published var text: String
}

struct MedicalConditionView: View {
    @ObservedObject var condition: MedicalCondition

    var body: some View {
        HStack {

            Spacer()
        }
    }
}

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

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

リソース

関連ビデオ

WWDC22

WWDC20