Widgets Code-along, part 1: The adventure begins

ハイライト

このコードアロングでは Emoji Rangers サンプル アプリを使用して再利用します AvatarView Widget Extensionを作成し、キャラクターデータを接続します TimelineProviderを使用してサイズを制限します。 supportedFamilies、タイムラインを待っている間にプレースホルダーを使用して表示状態をプレビューします。

主要内容

Emoji Rangers はキャラクターのステータスを追跡するゲームです。パワーパンダは回復しており、スパウティとエッグヘッドはそれぞれの状態にあります。メインアプリの左上にはすでにステータスボックスがあり、ホーム画面に置くのにちょうどいいので、プレイヤーはアプリを開かなくてもキャラクターがいつ行動を継続できるかを知ることができます。

このコードアロングでは、Apple は最初に完全なアーキテクチャ図について話しませんでしたが、このブロックから直接開始しました。 Widget の核心は 1 つの文に凝縮されています。それは、時間の経過とともに更新される SwiftUI ビューです。既存の AvatarView 引き続き使用できます。開発者がしなければならないことは、それを Widget Extension に入れて、ギャラリー、ホーム画面、およびタイムラインの待機中に WidgetKit が正しいコンテンツを取得できるようにすることです。

最初のエピソードの目標は小さく、小さなウィジェットを実行することです。このプロセスは、Xcode で新しいウィジェット ターゲットを作成し、追加することから始まります。 AvatarView を使用してターゲットに WidgetPreviewContext 実際のサイズをプレビューし、エントリ、スナップショット、タイムライン、プレースホルダーを通じて同じキャラクターの状態を WidgetKit ライフサイクルに接続します。

これもこのセッションの価値です。 「ウィジェットの作成」は、すぐに検証できるいくつかの小さなステップに分かれています。最初に SwiftUI ビューを再利用し、次に表示名と説明を追加し、次にデータをエントリに入力し、最後に現在作成できるサイズを 1 つだけ開きます。

詳細

(00:48) ここではウィジェットは SwiftUI ビューとして定義されており、時間の経過とともに更新されます。デモは既存のものから始まります AvatarView, このビューはすでにキャラクターのアバターとステータスを表現できるためです。

このセッションには公式のコード スニペットがないため、以下のコード ブロックはトランスクリプトが明確に表示される呼び出しポイントのみを保持します。完全なプロジェクトは、 Building Widgets Using WidgetKit and SwiftUI リソース内のプロジェクトをダウンロードします。

AvatarView(character: panda)

キーポイント:

• AvatarView は、メイン アプリにすでに存在する SwiftUI ビューです。
• character デモではPower PandaなどのEmoji Rangersのキャラクターデータに対応しています。
• 最初のステップは、ウィジェット ターゲットでの UI の再設計を避けるために、既存のビューを再利用することです。

(02:39) ビューをウィジェットに変換する最初のステップは、Xcode で新しいウィジェット拡張ターゲットを作成することです。新しいターゲットがアクティブになったら、必要なビュー ファイルをターゲットに追加し、ウィジェット サイズを使用して SwiftUI プレビューで効果を確認します。

AvatarView(character: panda)
    .previewContext(WidgetPreviewContext(family: .systemSmall))

キーポイント:

• WidgetPreviewContext SwiftUI プレビューをウィジェットのコンテキストに従ってレンダリングさせます。
• family [シートの追加] に表示される小、中、大のサイズに対応します。
• デモを選択すると、最初にステータス ボックスが小さなウィジェットの表示スペースに適合するかどうかが確認されます。

(04:23) DisplayName そして Description ウィジェット テンプレートに追加する必要があるため、メインの EntryView。 EmojiRangerWidgetEntryView すでにエントリがある場合、文字データをエントリに配置してから、 AvatarView。

EmojiRangerWidgetEntryView(entry: entry)

AvatarView(character: entry.character)

キーポイント:

• DisplayName そして Description ウィジェット ギャラリーでユーザーに表示される名前と説明を決定します。
• entry ウィジェット ビューがデータを読み取るためのエントリ ポイントです。
• AvatarView データを確認するためにメイン アプリに直接アクセスするのではなく、エントリからロール オブジェクトを受け取ります。

(05:17) エントリーはタイムラインプロバイダーからのものです。セッションは、プロバイダーをウィジェットのコア エンジンとして参照します。WidgetKit は、単一のコンテンツが必要なときにスナップショットを取得します。ユーザーがデバイスにウィジェットを追加すると、システムは完全なタイムラインを取得します。

TimelineProvider
  .getSnapshot -> one entry for Widget Gallery
  .getTimeline -> entries for the added widget

キーポイント:

• getSnapshot サービス ウィジェット ギャラリーや、1 つのコンテンツのみを必要とするその他のシナリオ。
• getTimeline サービスがホーム画面または今日の表示ウィジェットに追加されました。 ・第1話は1件のみとなり、表示リンクが先に流れてからその後のタイムラインデザインが入ります。

(06:22) 初めて実行すると、追加シートに小、中、大が同時に表示されます。発表者は、現時点ではすべてのサイズをサポートする準備ができていないと考えているため、現時点で適切にサポートできる 1 つのサイズのみをオープンします。

EmojiRangerWidget()
    .supportedFamilies([.systemSmall])

キーポイント:

• supportedFamilies はウィジェット設定の追加の修飾子です。
• サイズを制限することで、ウィジェットの最初のバージョンが中規模および大規模のスペースを無駄にしないようにできます。
• 最終検査では、ウィジェット ギャラリーにはサポートされているサイズが 1 つだけ表示され、ホーム画面に直接追加できます。

(06:55)もあります PlaceholderView テンプレート内にあります。 WidgetKit がタイムラインを待機しているときに表示されます。このデモでは、プレースホルダーも次のように変更されます。 AvatarView、そして使用します isPlaceholder テキストと画像を灰色の丸いプレースホルダーに自動的に変換します。

AvatarView(character: panda)
    .isPlaceholder(true)

キーポイント:

• プレースホルダーには実際の入力は必要ありません。デモ中もパンダの通行は続く。
• isPlaceholder テキストは灰色の角丸長方形に置き換えられ、画像は自動的に置き換えられます。
• SwiftUI Previewでは実際のウィジェットとプレースホルダーを同時に配置できるため、待機状態や完了状態の比較が容易になります。

重要ポイント

1. キャラクターステータス用の小さなウィジェットを作成します

やるべきこと: ゲーム、フィットネス、学習アプリのステータス ブロックを 1 つホーム画面に配置します。

実行する価値がある理由: セッションに絵文字レンジャーの状態ボックスを選択した理由は、それがすでに一目でわかる SwiftUI ビューであるためです。

開始方法: まず、次のような小さなビューを見つけます。 AvatarView アプリ内でウィジェット拡張ターゲットに追加してから使用します WidgetPreviewContext 小さいサイズを確認します。

2. ウィジェット ギャラリー用の実際のスナップショットを準備する

内容: ギャラリーのプレビューに、空の状態ではなく、代表的なキャラクターまたはクエストを表示します。

実行する価値がある理由: トランスクリプトには、WidgetKit が Widget Gallery などのエントリを 1 つだけ必要とする場合にスナップショットが使用されるコンテンツであることが明確に記載されています。

開始方法: 最新または最も代表的なオブジェクトをプロバイダーのスナップショット パスに配置し、最初にそれが に渡せることを確認します。 EntryView 完全に。

3. プレースホルダーを使用して待機状態をプレビューします

内容: タイムラインを待機しているウィジェットの読み込み中の外観を読みやすくします。

実行する価値がある理由: このセッションは次のことを示しています。 isPlaceholder テキストと画像をシステムのプレースホルダー効果に自動的に置き換えます。

開始方法: 実際のウィジェット ビューとプレースホルダー ビューを同じプレビュー グループに配置し、 isPlaceholder プレースホルダーバージョンに。

4. 最初のバージョンは 1 つのサイズのみで提供されます

対処方法: 最初に小さいウィジェットを公開し、中および大きいウィジェットのコンテンツ レベルが明確になってから展開します。

実行する価値がある理由: デモでは、小、中、大がすべてデフォルトで表示されますが、現在のキャラクター ステータス ボックスのスペースは他のサイズでは十分に活用されていません。

開始方法: 追加 supportedFamilies ウィジェット設定に追加し、検証済みのファミリのみを保持します。

関連セッション

• WidgetKit について — まず WidgetKit の全体的なモデルを見てから、このゲームに戻って最初のステップでコードを実行してみましょう。
• ウィジェット用の SwiftUI ビューの構築 — ウィジェット ビュー自体を深く掘り下げて、このセッションで簡単に説明しただけの SwiftUI レイアウトの詳細を入力します。
• ウィジェット コードアロング、パート 2: 代替タイムライン — 同じプロジェクトを継続し、最初のエピソードから実際のタイムラインにエントリを進めます。
• ウィジェット コードアロング、パート 3: 高度なタイムライン — 次に、高度なタイムライン、URL、ディープ リンク、および複数のウィジェットを処理します。
• 優れたウィジェットのデザイン — トランスクリプト 最後に推奨されるデザイン セッションは、どの情報をウィジェットに入力するかを判断するのに適しています。