SwiftUIでコンプリケーションを構築する

SwiftUIでコンプリケーションを構築する

SwiftUIを使って、Apple Watchのグラフィックコンプリケーションにスパイスを効かせてみましょう。メリディアンやインフォグラフといった文字盤のコンプリケーション上でのカスタムSwiftUIビューの使い方をお伝えします。コンプリケーションを作成する際のベストプラクティスをご紹介し、Xcode 12で作成中のものをプレビューする方法についてもお伝えします。このセッションを最大限に活用するためには、SwiftUIの基礎知識とApple Watchでのコンプリケーション構築に慣れていることが望まれます。概要については、"Create Complications for Apple Watch"をご覧になり、"Building watchOS App Interfaces with SwiftUI"をお読みください。SwiftUIでグラフィックコンプリケーションを構築する方法を理解したら、コンプリケーションや文字盤の共有といった他のwatchOS 7の機能と合わせ、Appを愛するユーザー向けに、個性とカスタマイズをふんだんに盛り込んだ文字盤を作成することができます。

リソース
関連ビデオ

WWDC22
- WidgetKitのコンプリケーションによるさらなる進化
WWDC21
- Swiftの並行処理: サンプルAppの更新
WWDC20
WWDCへようこそ “SwiftUIでコンプリケーションを構築する” 私はマシュー・クーンス watchOS SwiftUI担当のエンジニアです
後ほど同僚のオーガストも登場の予定です SwiftUI complicationsを使用した素晴らしい作品について話します Complicationsはタイムリーで的確なAppの情報を文字盤に表示してくれる機能です Complicationsは非常に強力かつ有用な機能ですからこれを利用すれば複雑な情報の中の必要な部分を一目で直ちに理解できるように抽出してくれますたとえばUVI complicationは色が段階的に変化する垂直方向のゲージを表示するので今日は日焼け止めが必要かが一目で分かるように示すことができます
UVIチャートのようなcomplicationsの作成はかなり難しいことですが SwiftUI complicationsを使用すれば SwiftUIの知識をそのまま文字盤へ生かすことができますもちろん Xcodeプレビューなしで SwiftUI complicationsは使えませんこれを使えば　異なるフェイスの complicationsを同時に見られます本日どうすればSwiftUI complicationsを作ることができるのか話しますこの機能を実現するためにはまずClockKitとSwiftUIの新しいAPIを確認する必要があります
SwiftUIビューと文字盤の色合いとの関係を知りベストプラクティスをいくつか見ていきましょうまずAPIについてです
ComplicationsでSwiftUIビューを使用するためまずは実証済みのcomplication テンプレートを利用します ClockKitには数十ものテンプレートがあり分かり易いレイアウトを提供してくれます watchOS7から新しいテンプレートが追加されていますこれにより他のClockKitプロバイダの製品にも SwiftUIビューの適用が可能になりましたこれらのテンプレートはGraphic Corner Circular　Rectangular
さらにはExtra Largeファミリーに適用されますしかしSwiftUI が最も輝くのは１つのSwiftUI ビューだけを対象とするテンプレートを使用するときですテンプレートは個々のファミリーの描画のための完備したキャンバスを提供します
さらにGraphicRectangularFullView テンプレートは更に大きなキャンバスを描くことができる全く新しいテンプレートですこのキャンバスがあればSwiftUIを使用してあらゆる作業を行うことができます SwiftUIの強力な作画ライブラリを自由自在に使用することができますから complicationsで使用する新しいデザインを簡単に作成できますここに示すDawn Patrolからのウエーブチャートがその例ですこれがSwiftUIビューを ClockKitテンプレートに取り込む方法ですまたcomplicationをより強力にして柔軟性を与えるため SwiftUIにも変更を加えました
まず最初にテキストについて話しますテキストを表示するcomplicationファミリーを意識してテキストをアップデートしましたそれぞれのファミリーごとにデフォルトのフォントサイズが設定されていますたとえばGraphicRectangular complication上のここに示す同じテキストが Extra Largeフェイス上でははるかに大きく表示されますデフォルトフォントも SF Roundedへ変更されていますからこのフェイスにうまく馴染んでいます
さらにこのテキストが備える新しい日付書式設定機能が文字盤上で素晴らしく機能しています特に相対オフセットおよびタイマースタイルは文字盤上で自動的に最新の状態に保たれますたとえばこの日付に相対スタイルを適用することにより日付が現在との比較で常に正確に表示されますタイマースタイルについても同様です日付を文字列内部にスペースを補間して挿入することができますそうすると残り時間が自動的にSourdough Timer上に表示されます
このようにテキスト処理機能が改善されています次に頻繁に使用されるコントロールの２つの例を紹介しますこれらも我々が SwiftUIへ盛り込んだ機能ですそのコントロールとはProgress ViewとGaugeです
Progress ViewとGaugeはどちらも非常に有用ですが同時にどちらも特定の目的を持っています
Progress View は時間とともに直線的に進行する情報たとえば音楽ですね一方Gaugeは時間とともに変化する情報たとえば温度に向いていますまずProgress Viewからスタートしましょう
最も単純なセットアップを考えると Progress Viewは１つの値だけを持ち１つのスタイルを設定することができますこのケースでは Circularスタイルを使用しています
Progress Viewにはその使用目的を示すラベルを追加することができますこのケースでは音符を表す SFシンボルを使用しています
最後にProgress Viewは色付けも可能です色を付けることによって私たちの音楽Progress Viewが完成します
Progress Viewはリニアスタイルで使用することも可能ですすべてのAPIはあなたが予想するとおりに機能してくれます次にGaugeを見てみましょう
Gaugeは山ほどの構成オプションを備えた非常に強力なコントロールですご覧ください
ここに示すのは庭の土の酸性度レベルを表示するだけのシンプルなGaugeです使用しているのはCircularGaugeスタイルです
現在の値を示すラベルを追加することができますこのラベルはGaugeの中央に表示されこれによって前後関係が一目で分かります
Gaugeの使用目的によっては開始時と終了時の値をラベルで示すのが有用ですこのケースではGaugeは3から10の範囲で変化しますこれらのラベルを追加してみましょう最小値と最大値を示すラベルです
Progress Viewと同じように Gaugeにも色を付けることができますここでは緑色を追加してみます
しかしGaugeがその本領を発揮するのは色にグラデーションを持たせるときですそのためにSwiftUIのgradientを使用します
Gaugeを直線スタイルで表示することも可能です Rectangular complicationで見栄えの良い方法ですし Modular Compactフェイス上で表示したように見えますこれがGauge APIです 1つ覚えておいて頂きたいのは GaugeとProgress Viewsはどちらも SwiftUI上で利用できますがユーザーが構築する新規コントロールとして提供されていることですたとえばRectangular complicationで Circular Gaugeを使用することできますが
直にAppで Gaugeを使用することも可能です
SwiftUIとClockKitに追加した新しいAPIをご紹介しました次に私が好きな文字盤の機能について話しますそれは文字盤への色付けです
文字盤は色のすべての範囲をサポートしていますからさらに進んだパーソナライズが可能となっています Complicationがフェイスカラーを取り込んでフェイスに独自のスタイルを与えてくれます
フェイスの種類によっては更に一歩進める機能を備えています Solar Dialフェイスでは日付が進むのに応じて色彩と個々のcomplicationの色を変化させます色付けした文字盤上であなたのcomplicationがどのように振る舞うかはそのcomplicationのデザインに依存しますそれでは文字盤の色付けがどのように機能するのかを見ていきましょうこれは青いサークル上の黄色いアップルを示すフルカラービューです
文字盤に色付けをするとき２つの色付け効果のいずれかが適用されます
その一つは色付けの非飽和度効果です２番目は色付けのオパシティ効果です
まず最初は色付けの非飽和度について話します
非飽和色付けモードは complicationのデフォルト着色モードです文字盤に色を付けるとビューのグレイスケールバージョンができます
何種類かのフェイスたとえばExtra Largeのフェイスの場合はこの非飽和色付けビュー全体に１つの色が施されることがあります文字盤上で非飽和色付けされるタイプのSwiftUI complicationを― 構築する方法を見てゆきましょう
ここに示すのは私のビューの対応するコードの例ですが１つのサークルとアップル画像の ZStackになっています
文字盤上できれいに見えています
ここで文字盤の色を赤に変えてみるとご覧のようにデフォルトの非飽和モードが適用されますからビューが文字盤上で自動的に非飽和色へ変化します
次はExtra Largeフェイス上の場合には非飽和ビュー全体が１つの色で表示されます非常に簡単ですね SwiftUIビューに変更を加えることなしに色付きcomplicationが得られました
そうは言いましたがcomplicationの色の選択については注意が必要です
もし類似した明るさの色を選択したとしたらどうでしょうビューを非飽和化すると同時にアップルが見えなくなってしまいます非飽和化したときにビューがどう見えるかをよく考えることが重要です
以上が非飽和色付けの説明でした次に色付けのオパシティについて見ていきます色を付けるときのデフォルト色付け法は非飽和色ですがそれに代わる方法として色のオパシティを基準とした着色法を選択することができますこの色付けスタイルはcomplicationの中に色のレイヤーを作ることによって機能しますレイヤーを形成することで文字盤の色をそれぞれのレイヤーに割り付けることができます
フルカラービューからスタートしてみるとまず必要なのはcomplicationに含まれるレイヤーを識別することです文字盤は２つの明確に分かれたレイヤーをサポートします
この場合サークルをアップルから分離させていますこれらが我々の２つのレイヤーになります次にその名前が示すように文字盤はそれぞれのビューのオパシティのみを考慮しますこれらのビューが完全なオパシティを備えているため両方とも白く見えます
続いて文字盤は適当なレイヤーに色を適用しますそれぞれの文字盤がそれぞれのレイヤーに適用された色を決定しますこの場合文字盤はサークルのレイヤーが赤色となるように決定しましたアップルのレイヤーは白色のままです
ここまで来ましたらレイヤーを再び合体させます選択した色をどうレイヤーに反映させるかの定義は文字盤のデザインによりますたとえばExtra Largeフェイスであれば赤いバックグラウンドに白いアップルの表示です
しかしメリディアンの文字盤上であれば白いバックグランド上に赤く表示されます
それ以外のフェイスたとえばSolar Dialフェイスの場合どちらのレイヤーにも異なる色が適用されます
我々の例に戻りますただし今回はExtra Largeフェイスを使用しますどうすればcomplicationが不透明色を使用できるか見ていきましょう
サークルとアップルがそれぞれレイヤーの中で異なるレイヤーとして存在するようにしたいのですデフォルト設定ではすべてのビューコンテンツがバックグラウンドレイヤーに存在するものと見なします
complicationのForegroundモディファイアを使用することにより私はアップルイメージが前面レイヤーに押し上げられるように設定しました一方サークルはバックグラウンドレイヤーに留まっていますこれで両者は別なレイヤーに分かれましたから不透明な色付けが機能するようになります
ここで文字盤の色を赤に変えてみるとアップルの色が白くなりサークルが赤くなります
再びフェイスの色を変えてみるとバックグラウンドも連動して変わることが分かります Extra Largeフェイス上ではバックグラウンドレイヤーに文字盤の色が与えられていました別のフェイスにも目を向けてみましょう
メリディアンの文字盤の場合は反対側のレイヤーが着色されていることに気付かれるでしょう
それがオパシティ色付けでありここではビューの階層構造の中に区別された複数の不透明レイヤーを作成します文字盤がレイヤーに色を割り当てることで目を見張るような結果を引き出すことができます場合によっては着色のためビューへ追加的な変更を施したい場合が生じますたとえばバックグランドの色を変更してグラデーションを使用したくなるかも知れません
またバックグラウンドを完全に取り除きたいこともあるでしょう新しく導入されたcomplicationRenderingModeを使用すればこのような操作も可能ですこのレンダリングモードは２つの値を持っていてビューをフルカラーフェイス用にレンダリングする場合はfullColor ビューを色の付いたフェイス上に表示させるときはtintedを使用します
現在設定されている値は環境から取得します
それでは私たちの例に戻って complicationRenderingModeの使い方を調べていきます
まず最初に環境を使用して現在設定されているレンダリングモードを取得します
次に私たちのサークルのフィルを変更し complicationを“color”または“tinted” に設定することによってレンダリングモードが使用できるようにします
レンダリングモードの設定をチェックするためにスイッチ文を追加します
現在の設定がfullColorである場合は青色のフィルカラーを使用してサークルを正確に現状のまま保ちます
一方現在の設定が tintedである場合はフィルを全面的に変更します１つの色だけで着色するのではなく LinearGradientを使用します
特にここではビューのオパシティのみを変化させるグラジエントを使用します以前の説明からも分かるようにこれはcolor opacity complicationに他なりませんしたがってオンスクリーン表示するときに考慮すべき項目はビューのオパシティだけなのです変更できるのはオパシティだけなのですからグラジエントはオパシティ１からオパシティ０まで変化します
次に取り扱うのはtinted complicationですがこちらは tintedモードではオパシティグラジエントフィルを持っており fullColorモードでは青色のフィルを持っていますこれで必要な情報が揃いましたそれではキーとなるポイントをまとめます
デフォルトではSwiftUIビューは文字盤上で非飽和化されます color opacity complicationが必要なのであれば complicationForegroundモディファイアを使用して着色のためにビューの部分をひとまとめにしますそして最後にfullColorと tinted complicationのために complicationRenderingModeを使用してビューの高度なカスタム化を行いますここまでの説明で SwiftUI complicationsの作成に使用できる新規APIのすべてについて学習しました実際に使用したときに何が起こるのでしょうか説明はオーガストに引き継ぎたいと思いますありがとうマシュー文字盤担当のエンジニアオーガスト・ヨキです Xcodeで学習した内容を実際に使用する方法について説明します以前私たちはcomplicationを作成し更新するためのサンプルコードを公開しましたその名前はCoffee TrackerですそのAppの見た目がこちらです
Coffee Trackerそれ自体が複数のcomplicationを含んでいますしたがって新しいSwiftUI complicationsの機能を示すための絶好の素材なのです
マシューと私は新しいSwiftUIビューの組み込みに取り組んできましたこのビューの目的はユーザーの皆様のカフェイン消費量を示すことです先週消費したコーヒーの量をそれに対応するコーヒーカップの数として表示しますさらにこのチャートには複数の色が組み込まれていますこれらのビューはとても見栄えが良いですよねとても優れたGraphic Rectangular complicationに育ってゆくでしょうそれではSwiftUIとcomplicationテンプレートを組み込む方法と色付けの２つのオプションをサポートする方法を知るために Xcodeへ移動します以前 AppのHistory Viewに取り組んでいたことがありますそのとき私たちはビューに加えた変更を簡単に見るためのプレビューを設定しました単純なビューであれば何の変更もなしに complicationに含めることができますあるいは１～２つ程度の新しいプロパティを定義するだけで complicationへのレンダリングが可能になるかも知れません
しかし私たちのチャートは相当に複雑ですから complicationで使用するビューを新たに作成することにしました別個にビューを作成することにより complicationに固有な任意の変更もカプセル化が可能になります
そこで新しいビューをプレビューに追加することにしますその理由は私たちの新しいComplicationHistoryViewばかりではなく AppバージョンのHistoryViewも表示できるようにしておきたいからですこれによって変更が単なる思い違いでないことを示すことができますそれではcomplicationで使用する対象として HistoryViewのHistoryChart部分を考えてみます
私たちのcomplicationをプレビューするためまずは新しいSwiftUIビューを使用して FullViewGraphicRectangularTemplateを作ります
ただしこのテンプレート自体は SwiftUIビューでなくテンプレートだけでプレビューはできませんそのため CLKComplicationTemplateに１つの新機能を加えましたそれがpreviewContextです previewContextはClockKitとSwiftUIの両方がいっしょにインポートされたときに定義されますこの関数はSwiftUIビュー内でテンプレートのラッパーとして機能しますからどう変形すればcomplicationテンプレートを設定した文字盤へうまく融合できるのかを Previewが知ることができますフェイス上ですべてのcomplicationテンプレートのプレビューを行いそのファミリーに最もうまくフィットするテンプレートを探しました SwiftUIの強力な機能のおかげでこのcomplicationのルックスはほぼ完成しておりもうすぐ手離れする段階にありますしかしGraphic Rectangularフォントのデフォルトサイズは今表示しているタイプのcontentに対してまだ少し大きすぎるでしょうこれを修正してみましょう
チャートにフォントモディファイアを追加して私たちのcomplicationで表示するのに適したサイズを設定します
同時にGraphicRectangularFullViewテンプレートの表示に利用できるスペースを確保します complicationの安全なエリアについてはマシューが後ほど詳しく説明しますピッタリのフォントサイズになりましたご覧のとおりこのチャートは文字盤上で他のcomplicationと隣り合わせになっていますそのためcomplicationデータに多少のコンテキストを与えなければなりませんこのコンテキストを与える手段として最適なのはタイトルを与えることです
すべてがSwiftUI上での操作ですからテキストとして""Weekly Coffee”を追加してみますさらにこれをVStackのHistory Chartと共にラッピングしますこれではるかに洗練されたルックスになりましたしかしフェイスに色が付いたときに complicationはどのように見えるのでしょうプレビューのフェイスカラーとして青色を設定してみます
ごちゃごちゃになりはしませんが全部の色が見えなくなってしまいますタイトルをフェイスの色合いに適合させるために complicationForegroundを使用してみましょう
これでタイトルの色が自動的に調整されてフェイスの色にマッチするようになりました色付けのサポートも重点の一つですから色付けに焦点を合わせてプレビューを検討してみます
色付きフェイスのすぐ隣に複数の色を持つフェイスを置くとこのように見えますすぐに気が付くように complicationForegroundを使用するとグラジエントとGaugeが見えなくなってしまいますその理由は色付けをサポートすると同時に私たちのcomplicationが非飽和化されなくなるためですその代わりにビュー階層構造のオパシティだけが使用されるのですつまり階層構造のすべてがオパシティ値だけに集約され complicationForegroundでマーキングしたパーツがグループ化されますグループ化されたパーツのすべてに同じ色付けが適用されます以前学習したように色付けを取り扱う別な方法があります complicationRenderingModeの環境値ですこれを利用して色付けに対応するチャートの挙動を変更してみますまず最初にプレビューに色を付けておきますこれにより別ファイルに加える変更に同期してcomplicationがどの更新するかで観察することができますここに示すビューでは指定された日付に対応するカラムが作成されます
complicationRenderingModeのために新しい環境プロパティを追加してその新規プロパティを私たちのカスタムHistoryGaugeStyleへ引き渡しますこれによって着色したときにバックグランドが隠されることになりますチャートのレンダリングがfullColorの場合とは変化していることが分かりますね
complicationRenderingModeを使用することによってビュー階層構造の個々のピースを変化させることが可能になります fullColorと着色レンダリングとの間でコードパスの大規模な分岐は生じませんそれではComplicationHistoryViewへ戻ることにしますこれまでフェイスカラーを青色にしたときに新しいcomplicationがどう見えるかを調べましたサンプルプレビューが他の色だったとしたらどうでしょう？
ClockKitとSwiftUIのパワーを併用すれば PreviewFaceColorを列挙することができるのでこれを利用して挙動を同時に調べてみましょうこの手法を用いることによりユーザーが選択できるオプションを網羅しながら complicationのルックスに問題がないかを調べ上げることができます SwiftUIとcomplicationテンプレートの使用法がどれほど簡単であるか complicationForegroundを使用すれば着色を素早くサポートできることを説明しましたまたcomplicationRenderingModeを使用すれば微妙な色合い調整も可能なことを説明しました再びマシューの登場ですベストプラクティスについて説明がありますありがとうオーガスト素晴らしいプレゼンでしたね SwiftUIによってウィークリーサマリービューのようなチャートをシームレスに作成することができますこれほど簡単にcomplicationに組み込める方法はありませんでした次の話題はSwiftUI complicationを構築するときに考慮すべきベストプラクティスについてです
まず最初に知るべき重要事項は complicationのどこかをタップするとその都度Appが起動することです complicationはボタンジャスチャーその他の対話的エレメントをサポートしません complicationの構築ではテキスト画像および描画プリミティブのみを使用します
complicationに適合しないビューを使おうとした場合に警告を発生するため私たちはXcodeに新しい実行時ワーニング機能を追加しました
最後にcomplicationが静的ビューから構成された時系列であることを忘れないでくださいしたがってSwiftUIアニメーションはサポートされていません
文字盤を常にハイレベルで動作させるためにビューの性能特性にも―
留意して頂きたいと思いますスクリーンに表示される前にすべての SwiftUIビューの性能を測定してください
それぞれのcomplicationで使用する画像の適正サイズについては Human Interface Guidelineを始めとする弊社ドキュメントを参照してください
また輪郭のぼやけや書式付きテキストなどある種の描画属性については実行時コストへの配慮も必要です絶対に必要なものだけを使用するのが良い方針です
性能の良くないビューを使用すると complication実行時に悪影響が起こります
実行時ワーニングに注意を払ってくださいこのワーニングの例ではビューのサイズと複雑性に対して警告を発しています
Complicationがこのような実行時ワーニングを表示したならばビルドエラーと考えてくださいお客様がベストな経験をできるようにするため complicationの出荷前にエラーを完全につぶしておく必要があります
最後にレイアウトのベストプラクティスをいくつか紹介しますそれぞれのcomplicationにはデフォルトフォントサイズが設定されているので構築したいビューのガイドラインとしてデフォルトフォントサイズを利用ください
たとえばExtra Large complicationは描画キャンバスを持つことがありますがその目的は大型で見やすい情報の提供にあることに留意ください
Circularと Rectangular complicationファミリーはそれぞれが特有の形状でコンテンツにマスクを施すことにご注意を
またRectangular Full View complicationは文字盤上のコンテンツに欠けがないようレイアウトの一部にセーフエリアを設けています
たとえばここに示すような大型描画エリアは Apple Watchディスプレイの文字盤のコーナー部分に欠けが生ずる可能性がありますデフォルトではcomplicationをあらゆる配置で割り付けても安全なようにセーフエリアが設定されています complicationの全エリアを使用したいのであれば edgesIgnoringSafeAreaモディファイアを使用してください Weekly Coffee complicationで我々が行ったのがこの使用法の例になります
これにより余裕スペースが若干増えますその場合もレイアウトに欠けが生じないよう― 注意を払う必要があります SwiftUI complicationsを使用して実行できる素晴らしい仕事を紹介してきましたまず最初に SwiftUIの知識はそのまま文字盤でも有効であることを話しました
次にText ProgressView Gaugeに対応する強力な新しいAPIを紹介してこれらを使用して文字盤に色を付ける方法を説明しました
さらにXcodeプレビューを使用して複数のcomplicationを文字盤の色を変えながら同時に取り扱う方法を説明しました
complication構築の経験がないあるいはcomplicationテンプレートの知識をアップデートしたいとお考えの場合は “Create Complications for Apple Watch”をご覧ください
さらにcomplicationに正しい情報を正しいタイミングで表示する方法を知りたければ “Keep Your Complications Up to Date”をご覧ください
ありがとうございました

import SwiftUI
import ClockKit

struct RelativeText: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Count Down")
                .font(.headline)
                .foregroundColor(.accentColor)
            Label("Nap Time", systemImage: "moon.fill")
            Text(Date() + 100, style: .relative)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct RelativeText_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(RelativeText())
            .previewContext()
    }
}

3:26 - Timer Text

import SwiftUI
import ClockKit

struct TimerText: View {
    var body: some View {
        VStack(alignment: .leading) {
            Label("Sourdough Timer", systemImage: "timer")
                .foregroundColor(.orange)
            Text("Time remaining: \(Date() + 100, style: .timer)")
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct TimerText_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(TimerText())
            .previewContext()
    }
}

4:04 - Progress View Sample #1

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7)
            .progressViewStyle(CircularProgressViewStyle())
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:15 - Progress View Sample #2

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7) {
            Image(systemName: "music.note")
        }
        .progressViewStyle(CircularProgressViewStyle())
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:23 - Progress View Sample #3

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7) {
            Image(systemName: "music.note")
        }
        .progressViewStyle(CircularProgressViewStyle(tint: .red))
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:29 - Progress View Sample #4

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Water Reminder")
                .foregroundColor(.blue)
            Text("32 oz. consumed")
            ProgressView(value: 0.7)
                .progressViewStyle(LinearProgressViewStyle(tint: .blue))
        }
        
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(ProgressSample())
            .previewContext()
    }
}

4:45 - Gauge Sample #1

import SwiftUI
import ClockKit

struct GaugeSample: View {
    var body: some View {
        Gauge(value: 5.8, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

4:55 - Gauge Sample #2

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:02 - Gauge Sample #3

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:14 - Gauge Sample #4

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(CircularGaugeStyle(tint: .green))
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:21 - Gauge Sample #5

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(
            CircularGaugeStyle(
                tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
            )
        )
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:34 - Gauge Sample #6

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Garden Soil Acidity")
                .foregroundColor(.green)
            Gauge(value: acidity, in: 3...10) {
                Image(systemName: "drop.fill")
                    .foregroundColor(.green)
            } currentValueLabel: {
                Text("\(acidity, specifier: "%.1f")")
            } minimumValueLabel: {
                Text("3")
            } maximumValueLabel: {
                Text("10")
            }
            .gaugeStyle(
                LinearGaugeStyle(
                    tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
                )
            )
        }
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(GaugeSample())
            .previewContext()
    }
}

リソース

関連ビデオ

WWDC22

WWDC21

WWDC20