Widgets Code-along, part 2: Alternate timelines

ハイライト

このコードは、小さなウィジェットを最初のエピソードから systemMedium まで拡張します。 TimelineReloadPolicy 治療が完了する前に複数のタイムライン エントリを生成し、SiriKit カスタム インテントを介したユーザー構成とディープ リンクをサポートします。 widgetURL とSwiftUI Link。

主要内容

最初のエピソードではすでに絵文字レンジャーのパワーパンダがホーム画面に表示されていますが、これはまだ単なるシステムの小さなウィジェットです。ユーザーがウィジェット ギャラリーを開いたとき、ウィジェットが複数のサイズをサポートしている場合、システムはユーザーに異なるファミリを選択するように求めます。問題は、小さいバージョンでは 1 つのアバターを入れるのに十分な大きさしかなく、中バージョンの余分なスペースにはより多くのキャラクター情報が含まれる必要があることです。

このコードアロングはまずファミリーの適応を完了し、次に実際のタイムラインに入ります。キャラクターは時間の経過とともに健康状態を回復し、アプリはキャラクターがいつ完全に回復するかをすでに認識しています。ウィジェットが更新を要求できるようにし続けると、システムのスケジュール設定の機会が無駄になります。より良いアプローチは、復元が完了するまでプロバイダーでタイムライン エントリを 1 回生成し、WidgetKit に時間に従ってそれを表示させることです。

後半では、このウィジェットを固定の役割から構成可能なエクスペリエンスに進化させます。ユーザーはホーム画面でウィジェットを長押ししてウィジェットの編集に入り、Power Panda、Egghead、または Spouty を選択できます。キャラクターを選択した後、ウィジェットをクリックすると、対応するキャラクターの詳細ページが直接表示されます。 WidgetKit は表示を担当し、SiriKit カスタム インテントは設定を担当します。 widgetURL とSwiftUI Link アプリに戻る責任があります。

詳細

1. 同じウィジェットが小規模と中規模をサポートします

(03:46) 最初のステップは、のみサポートされていたウィジェットを拡張することです。 systemSmall 前のエピソードで systemMedium。 WidgetKit が提供する widgetFamily 環境値を使用すると、ビューは現在のファミリに基づいて異なるレイアウトを返すことができます。

このセッションには公式の「コード」タブ クリップはありません。コードの形状を示すために、トランスクリプトに明確に現れる API とビューの構造のみを以下にまとめます。

supportedFamilies([.systemSmall, .systemMedium])

@Environment(\.widgetFamily) var family

switch family {
case .systemSmall:
    AvatarView(character: selectedCharacter)
default:
    HStack {
        AvatarView(character: selectedCharacter)
        Text(selectedCharacter.bio)
    }
}

キーポイント:

• supportedFamilies 最初のエピソードでは単一の家族から、 systemSmall そして systemMedium。
• widgetFamily 同じエントリ ビューにより、どのファミリでレンダリングされているかがわかります。
• systemSmall 使い続けています AvatarView。
• 中バージョンでは、 AvatarView の中へ HStack その隣にキャラクターのプロフィールが表示されます。
• トランスクリプトでは、小と中両方に背景色と前景色を追加して、プレビューを実際のホーム画面効果に近づけることも実証しました。

2. 不必要な更新ではなく完全なタイムラインを使用する

(01:12) WidgetKit には 3 つのタイムライン リロード ポリシーがあります。 atEnd、 after そして never。 atEnd 最後のエントリが表示された後に更新のスケジュールを開始します。 after 指定された日にスケジュールを開始します。 never これは、システムが独立して更新されないことを意味し、開発者はウィジェット センター API を通じて明示的にリロードする必要があります。

(07:39) 絵文字レンジャーのキャラクターは時間の経過とともに再生されます。アプリが認識したので、 endDate 完全な復元の場合、プロバイダーは文字の復元が完了するまで 1 分間隔でエントリを生成できます。

let selectedCharacter = configuration.hero
let endDate = selectedCharacter.fullHealthDate
let interval = oneMinute
var currentDate = Date()
var entries: [Entry] = []

while currentDate < endDate {
    entries.append(Entry(date: currentDate, character: selectedCharacter))
    currentDate += interval
}

Timeline(entries: entries, policy: .atEnd)

キーポイント:

• selectedCharacter 現在のウィジェットによって表示される文字です。
• endDate キャラクターが完全に回復した時点です。
• トランスクリプトには、更新間隔が 1 分から開始されると明示的に示されています。 currentDate。
• 各ループは次のエントリを作成します。 currentDate、時間を一段階進めます。
• WidgetKit は、タイムラインが使い果たされる前にデータを取得するためにプロバイダーを再度呼び出す必要はありません。
• atEnd そして after これは最も早い更新時間にすぎず、システムはユーザー エクスペリエンスとスケジュール条件に基づいて実際の更新を調整します。

3. 関連性を使用してスマート スタックを促す

(09:00) タイムライン エントリにはオプションの relevance。ウィジェットがスタック内にある場合、システムはこのプロンプトに基づいてウィジェットをより適切な位置に回転できます。

let relevance = selectedCharacter.healthLevel

Entry(
    date: currentDate,
    character: selectedCharacter,
    relevance: relevance
)

キーポイント:

• の値の範囲 relevance 開発者によって定義されます。
• 完全回復がこのウィジェットにとって最も重要な状態であるため、セッションはキャラクターの健康状態を直接使用することを選択します。
• 関連性はシステムからのインテリジェントなプロンプトであり、強制的な表示コマンドではありません。

4. ホーム画面設定に SiriKit カスタム インテントを使用する

(09:56) タイムラインが完了した後も、ウィジェットには Power Panda のみが表示されます。次に、デモでは SiriKit インテント定義ファイルを使用して構成項目を追加し、ユーザーがホーム画面でロールを選択できるようにします。

Intent Definition file
category: information view
parameter: hero
enum values: Panda, Egghead, Spouty

StaticConfiguration -> IntentConfiguration
TimelineProvider -> IntentTimelineProvider
intent: CharacterSelectionIntent
snapshot(configuration)
timeline(configuration)

キーポイント:

• インテント定義ファイルには、ウィジェット ターゲットとアプリ ターゲットの両方が含まれている必要があります。
• デモではインテント カテゴリが情報ビューに設定されています。
• hero パラメータは enum で、デモでは Panda、Egghead、Spouty が完成しています。
• ウィジェットの種類が次から変更されました StaticConfiguration に IntentConfiguration。
• プロバイダーがタイムライン プロバイダーからインテント タイムライン プロバイダーに変更されました。
• スナップショットとタイムラインのメソッドは追加の configuration パラメーターを指定すると、プロバイダーは設定をアプリ内のロール定義にマップします。

5. ウィジェットをクリックして、対応するコンテンツに戻ります

(02:54) ウィジェットにはアニメーションやカスタム インタラクションはありませんが、アプリに深くリンクできます。 systemSmall 完全なクリック可能な領域です。 systemMedium そして systemLarge SwiftUIが使える Link をクリックして複数のクリック可能な領域を作成します。

(13:42) widgetURL 構成が完了したら、ビューに修飾子を追加します。このようにして、ユーザーが現在のロールのウィジェットをクリックすると、対応するロールの詳細ページに直接アクセスできます。

AvatarView(character: selectedCharacter)
    .widgetURL(selectedCharacter.detailURL)

Link(destination: selectedCharacter.detailURL) {
    AvatarView(character: selectedCharacter)
}

キーポイント:

• widgetURL は、クリックで現在の役割に入ることができるようにするために、小規模および中規模のビューで使用されます。
• ユーザーがお気に入りのレンジャーを切り替えると、ジャンプ先も構成に応じて変わります。
• 中規模および大規模な家族でも SwiftUI を使用できます Link 複数のクリック領域を配置できるスペースがある場合。

重要ポイント

1. 回復カウントダウン ウィジェットを作成する

やるべきこと: ゲームのキャラクター、フィットネスの回復、学習のクールダウン時間など、終了時間がわかっている状態をホーム画面に配置します。

実行する価値がある理由: セッションの中心的な例は、キャラクターが時間の経過とともに復元され、アプリがそれを認識していることです。 endDate フルレストアの状態。

開始方法: タイムライン プロバイダーでは、現在の時刻から開始して、次の時刻まで 1 分ごとにエントリが生成されます。 endDate。ポリシーは最初に使用します .atEnd。

2. 同じコンテンツに対して、小規模と中規模の 2 つの読書方法を設計します。

何をすべきか: 小は主要なステータスのみを表示し、中は補足情報を追加します。

実行する価値がある理由: トランスクリプトは、Small が引き続き使用していることを示しています。 AvatarView、および中程度の用途 HStack キャラクターのバイオを追加します。

開始方法: を読んでください。 widgetFamily 環境値、使用法 switch 異なるレイアウトを異なるファミリに返し、プライマリ ビューとプレースホルダを同時に更新します。

3. ユーザーにホーム画面構成エントリを提供します。

手順: ユーザーにウィジェットを長押しして、表示するロール、プロジェクト、またはアカウントを選択させます。

実行する価値がある理由: セッションでは以下を使用します CharacterSelectionIntent ユーザーが編集ウィジェットで Power Panda、Egghead、または Spouty を選択できるようにします。

開始方法: インテント定義ファイルを作成し、カテゴリを情報ビューに設定し、enum パラメーターを追加して、ウィジェットを次のように変更します。 IntentConfiguration。

4. ソート信号をスマートスタックに提供する

やるべきこと: 状態が最も重要な時点でのウィジェットの関連性を改善します。

実行する価値がある理由: セッションがウィジェットがスタック内にあることを明示的に示すと、システムは関連性に基づいてウィジェットをインテリジェントに回転できます。

開始方法: 優先度を表す数値を選択します。完全回復が最も重要な状態であるため、絵文字レンジャーは健康レベルを使用します。

5. クリック操作により正しい詳細ページが表示されるようにします。

対処方法: ユーザーはウィジェットをクリックし、現在の構成に対応する詳細ページに直接アクセスします。

実行する価値がある理由: セッション デモを Spouty として設定した後、ウィジェットをクリックすると Spouty 情報ページが表示されます。

開始方法: 追加 widgetURL 小/中ビューに。中規模以上のターゲット領域が複数ある場合は、SwiftUI を使用します Link ローカルクリック領域を切り離します。

関連セッション

• ウィジェット コードと一緒に、パート 1: 冒険が始まります — まず、ウィジェット ターゲット、プロバイダー、プレースホルダー、および systemSmall の基本リンクを完成させます。
• ウィジェット コードアロング、パート 3: タイムラインの進歩 — このセッションの最後に推奨される次のエピソードでは、引き続き高度なタイムライン、URL、および複数のウィジェットを前進させます。
• ウィジェットに構成とインテリジェンスを追加する — トランスクリプト 詳細なウィジェット構成とシステム インテリジェンスのカスタム インテントで推奨されます。
• 優れたウィジェットのデザイン - ウィジェットの情報レベルと視覚的表現を判断するために使用される、推奨されるトランスクリプトの終わり。
• ウィジェット用の SwiftUI ビューの構築 — このサイトのファミリー対応と合わせて表示するのに適した、SwiftUI ウィジェット ビューの構築の詳細を完成させます。