Build SwiftUI views for widgets

ハイライト

Apple は、Wired Caffeine ウィジェットを使用した SwiftUI ウィジェット ビューの構築プロセスを実演しています: VStack/ZStack レイアウト、動的時間テキスト、ContainerRelativeShape、プレースホルダー、および systemMedium 条件付きレイアウト。

主要内容

このセッションは、非常に具体的なニーズから始まります。 Wired アプリは、ユーザーが摂取したカフェイン入りの飲み物を記録し、体内に残っているカフェインの量を推定します。著者は、このステータスをホーム画面に表示して、ユーザーが現在のカフェイン レベル、最後の飲み物、最後の飲み物からの経過時間を一目で確認できるようにしたいと考えています。

問題はウィジェットの表示方法にあります。アプリの色と視覚的アイデンティティを継続し、小さいサイズに焦点を当て、下部の時間を更新し続ける必要があります。ウィジェットの形状、サイズ、角の半径はシステムによって決定されるため、丸い角を簡単にハードコーディングすることはできません。

デモにはタイムライン構成が用意されているため、すべての焦点はビュー レイヤーにあります。 SwiftUI ビューは次で始まります。 VStack そして徐々に追加します ZStack 背景、 HStack アライメント、 Spacer コンテンツ、デフォルトのパディング、アセット カタログのカラー、およびダーク モードで自動的に切り替わるカラー バリエーションをプッシュします。

ビューがより複雑になると、Apple は上部のカフェイン値を次のように抽出します。 CaffeineAmountView そして下部にある飲み物の情報 DrinkView。このステップの目的は非常に実用的です。コードを明確にしたまま、ウィジェットをプレースホルダーおよび systemMedium サイズまで拡張し続けることができます。

最後に、中型ウィジェットはドリンクの写真を追加し、プレースホルダーは同じビューのセットを直接再利用します。 SwiftUI はテキストを角丸四角形に置き換え、画像を塗りつぶしの色に置き換えます。開発者が対処しなければならないのは、プレースホルダー UI を書き直すことではなく、情報階層と条件付きレイアウトです。

詳細

1. プレビューとデータ構造を使用してビューの境界を厳しくします (02:23)

デモは、ウィジェットの設定を脇に置き、SwiftUI ビューのみを扱うことから始まります。プレビューでの使用 WidgetPreviewContext 指定する systemSmall、ビューデータの取得元は CaffeineWidgetData、カフェイン量、ドリンク名、飲む時間が記載されています。

WidgetPreviewContext
systemSmall
CaffeineWidgetData
VStack
ZStack
HStack
Spacer

キーポイント:

• WidgetPreviewContext は、指定されたウィジェット ファミリに従ってプレビューをレンダリングするために使用されます。
• systemSmall これは最初のターゲット サイズであり、最初にコア情報を実行するのに適しています。
• CaffeineWidgetData UI に必要なデータを収集します。プレビューでは、固定サンプルを使用してインターフェイスを実際の状態に近づけることができます。
• VStack カフェインのタイトル、値、飲み物の名前、時間を上下に配置する責任があります。
• ZStack コンテンツの後ろに背景色を追加します。
• HStack そして Spacer ウィジェットのコンテンツが中央に配置されたときに情報階層が失われないように、コンテンツを最先端にプッシュします。

2. 時刻テキストを自動的に更新します (05:16)

下部にある「最後に飲んだのはどれくらい前ですか」は、スナップショットが生成された時点のものではありません。 SwiftUI Text 新しいイニシャライザは日付とスタイルを受け入れ、システムは時間の変化に応じて表示内容を自動的に更新します。デモでは文字列補間とプラスも使用します。 ago、フレームワークはローカライズ可能なキーを生成します。

// Displaying date and time

// June 3, 2019
Text(event.startDate, style: .date)

// 11:23PM
Text(event.startDate, style: .time)

// 9:30AM - 3:30PM
Text(event.startDate...event.endDate)

// +2 hours
// -3 months
Text(event.startDate, style: .offset)

// 2 hours, 23 minutes – Automatically updating as time pass
Text(event.startDate, style: .relative)

// 36:59:01 – Automatically updating as time pass
Text(event.startDate, style: .timer)

キーポイント:

• .date そして .time 絶対的な日付と時刻をシステム形式で表示します。
• 日付範囲は、イベントの開始から終了までの期間を直接表示できます。
• .offset 相対オフセットを表示するのに適しています。
• .relative 時間の経過とともに更新され、「最後に飲んだのはどれくらい前か」に相当します。
• .timer カウントダウンやタイマーの種類の情報に適しています。

3. ContainerRelativeShape を使用して同心フィレットを処理します (18:40)

カフェイン値の背景は、ウィジェット フレームと同心の丸い角を維持する必要があります。手書き cornerRadius 異なるデバイスや構成では異なるウィジェットの丸めが使用される可能性があるため、デバイスの違いの影響を受けます。 iOS14の ContainerRelativeShape は最も近いコンテナ形状を読み取り、現在の位置に基づいて内部形状に適切なフィレットを計算します。

// Concentric corner radius with ContainerRelativeShape

struct PillView : View {
    var title: Text
    var color: Color

    var body: some View {
        Text(title)
            .background(ContainerRelativeShape().fill(color))
    }
}

キーポイント:

• PillView 背景付きのテキストを再利用可能なビューに抽出します。
• ContainerRelativeShape() 親コンテナによって提供される形状情報を使用します。
• .fill(color) この相対的な形状を指定された色で塗りつぶします。
• .background(...) ウィジェットのアウトラインと同心円を保ちながら、背景をテキスト ビューに追従させます。
• 外側のパディングが変更されると、内側のフィレットも調整され、カーブ上の境界線の太さは一定に保たれます。

4. プレースホルダーとサイズ ファミリは同じビューのセットを共有します (14:24)

拡張ビューを要求するとき、またはデバイスがロックされているときにシステムがプレースホルダーを使用する可能性があるため、ウィジェットにはプレースホルダーが必要です。追加をデモンストレーションする isPlaceholder(true) プレビューするには、SwiftUI がテキスト コンテンツを元のコンテンツと一致する角丸四角形に自動的に置き換えます。固定テキストなど、一部のテキストを保持する必要がある場合 caffeine タグ、追加できます isPlaceholder(false) その内容に。

.isPlaceholder(true)
.isPlaceholder(false)
systemMedium

キーポイント:

• .isPlaceholder(true) ビュー全体をプレースホルダー スタイルに置きます。
• .isPlaceholder(false) 特定の固定テキストを保持できます。
• systemMedium プレビューは、中サイズのウィジェットの情報密度を確認するために使用されます。
• ミディアムレイアウトでは、デモはウィジェットファミリーの条件によって判断され、systemMediumに写真がある場合にのみ写真が表示されます。
• プレースホルダーも画像を処理し、画像の内容を塗りつぶしの色で置き換えます。

重要ポイント

1.「現在のステータス」ウィジェットを作成する

やるべきこと: カフェインレベル、予算残高、今日の歩数、デバイスのバッテリーなど、アプリ内で最も頻繁に表示される数値を小さなウィジェットに入力します。

実行する価値がある理由: Wired の例は、小さなサイズでコアの状態をキャプチャしている限り、ユーザーがアプリを開く回数を減らすことができることを証明しています。

開始方法: まず、コア値、名前、時間のみを含むデータ構造を定義し、次に使用します VStack そして Spacer systemSmall プレビューの最初のバージョンを作成します。

2. 最近のイベントに相対時間を追加します

操作方法: 「最後の飲み物はどれくらい前でしたか」、「最後の同期はどれくらい前でしたか」、「次のイベントまでの時間」などの動的テキストを表示します。

実行する価値がある理由: Text(event.startDate, style: .relative) そして .timer 時間の経過とともに更新されるため、ホーム画面上の情報を維持するのに適しています。

開始方法: の日付スタイルにアクセスします。 Text 実際の日付フィールドから、最初に使用します .relative または .timer プレビューでアップデートの効果を確認します。

3. アセットカタログにブランドカラーを与える

対処方法: ウィジェットにはアプリと同じ色を使用し、それらの色に対してダーク モード バリアントを構成します。

実行する価値がある理由: デモのすべての色はアセット カタログから取得されています。ダーク モードに切り替えると、レイアウト コードを変更せずにウィジェットが自動的に適応します。

開始方法: ウィジェットで使用する背景色とテキストの色をアセット カタログに配置し、プレビューを使用してダーク モードの状態をコピーし、コントラストを確認します。

4. 中ウィジェットに 2 番目の情報レイヤーを追加します。

何をするか: 小では主要なステータスが表示され、中では最近飲んだ写真、最近のタスクの表紙、議題の場所などの写真や補足情報が追加されます。

実行する価値がある理由: 小さなウィジェットが二次コンテンツで混雑するのを避けるために、デモには systemMedium 内のドリンクの写真のみが含まれています。

開始方法: まず、画像名をデータ構造に追加し、次にウィジェット ファミリ条件を使用して画像が中間レイアウトにのみ表示されるように決定および制御します。

5. 正式ビューをプレースホルダーとして直接再利用します。

対処方法: プレースホルダーと実際のウィジェットを同じ構造に保ち、特定のデータのみを非表示にします。

実行する価値がある理由: isPlaceholder(true) テキストを角丸長方形に置き換え、画像を塗りつぶし色に置き換えます。ユーザーに表示されるスケルトンは、最終的なレイアウトと一致しています。

開始方法: プレースホルダー ステータスをプレビューに追加し、使用します isPlaceholder(false) 固定タグやブランドワードを保持します。

関連セッション

• WidgetKit について: まず、WidgetKit のタイムラインと、ホーム画面に適切なタイミングで SwiftUI ビューが表示されるメカニズムを理解します。
• ウィジェット コードと一緒に、パート 1: 冒険が始まります: スターター プロジェクトに従ってウィジェットを最初から作成します。10033 以降の実践演習として適しています。
• ウィジェット コードアロング、パート 2: 代替タイムライン: ウィジェット タイムラインの処理を続行し、ビューの外でデータ更新プロセスを完了します。
• ウィジェット コード アロング パート 3: タイムラインの進歩: コード アロングの継続とタイムライン関連の実装のさらなる進歩。
• ウィジェットに構成とインテリジェンスを追加: 基本ウィジェット ビューを超えて構成とインテリジェンスを引き続き使用します。