Build complications in SwiftUI

ハイライト

watchOS 7 では、グラフィックコーナー、円形、長方形、特大コンプリケーションの SwiftUI ビューをホストできる ClockKit テンプレートが追加され、テキストの自動更新、ProgressView、ゲージ、ダイヤルティント処理、および Xcode プレビューのサポートが提供されます。

主要内容

Apple Watch のコンプリケーションは、時計の文字盤にタイムリーな関連情報を表示する役割を果たします。 UVI コンプリケーションの例は、セッションの開始時に使用されます。狭いエリアでは、色のグラデーションを持つ垂直ゲージを使用して、今日日焼け止めが必要かどうかをユーザーに伝えることができます (00:22)。

難しいのは、優れたコンプリケーションでは、複雑な情報を一目で理解できる形式に圧縮する必要があることです。以前は、主に ClockKit の事前定義されたテンプレートとプロバイダーに依存していました。 watchOS 7 には、Graphic Corner、Circular、Rectangular、および Extra Large ファミリをカバーする、SwiftUI ビューを受信できるテンプレートが追加されました (01:29)。

SwiftUI は開発者に、より自由なキャンバスを提供します。セッションでは特に次のことに言及しました GraphicRectangularFullView は、Rectangular ファミリに大きな描画領域を提供する新しいテンプレートです。 Dawn Patrol のタイドチャートとコーヒートラッカー週ごとのコーヒー摂取量チャートは、ダイヤルにチャート情報を配置する例です (02:03、 13:48)。

この自由度にも限界があります。コンプリケーションはタイムライン内の静的なビューです。どこかをクリックするとアプリが開きます。ボタン、ジェスチャー、その他のインタラクティブな要素、および SwiftUI アニメーションはサポートされていません。システムは、ビューが表示される前にパフォーマンスも測定します。複雑なビューや不適切なサイズのビューでは、実行時警告がトリガーされます (19:12)。

詳細

SwiftUI ビューを ClockKit テンプレートに配置する

(01:29) ClockKit の新しいグラフィックテンプレートは SwiftUI ビューを受け取ることができます。以下の公式スニペットは、SwiftUI ビュー、相対時間テキスト、および Xcode でのコンプリケーションのプレビューの両方を示しています。 previewContext()。

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()
    }
}

キーポイント:

import SwiftUI そして import ClockKit 同時に現れるので、 previewContext() SwiftUI プレビューで認識されるビューにテンプレートをラップできます。
RelativeText 単なる単純な SwiftUI です View を使用してコンテンツを整理できます VStack、 Text、 Label そして修飾子。
Text(Date() + 100, style: .relative) セッションによって指定された相対日付フォーマッタを使用し、ダイヤルは相対時間を自動的に正確に保ちます。
CLKComplicationTemplateGraphicRectangularFullView(RelativeText()) SwiftUI ビューを Graphic Rectangular Full View テンプレートに渡します。
.previewContext() このテンプレートをこのファミリーに適したウォッチフェイスに配置するように Xcode プレビューに指示します。

Text、ProgressView、Gauge を使用して、一目で判読できる情報を表現します

(02:38) SwiftUI の Text 追加機能ファミリーを認識します。デフォルトのフォントサイズはファミリーに応じて変更され、デフォルトのフォントも SF Rounded に変更されます。セッションでは、相対、オフセット、タイマースタイルにも名前を付けます。これらはウォッチフェイスによって自動的に更新されます。

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()
    }
}

キーポイント:

Label("Sourdough Timer", systemImage: "timer") SF シンボルと短いテキストを使用して、このコンプリケーションの目的を説明します。
.foregroundColor(.orange) タイトルに明示的な状態色を与えます。後続の色合いルールは、文字盤に色合いが付けられたときにどのように変化するかを決定します。
Text("Time remaining: \(Date() + 100, style: .timer)") 文字列補間にタイマースタイルを追加すると、ダイヤルに残り時間が表示されます。
.frame(maxWidth: .infinity, alignment: .leading) コンテンツが長方形テンプレートの利用可能な幅を埋めて、左側に配置されます。

(03:37) ProgressView は、音楽の進行状況など、直線的に進む情報に適しています。ゲージは、温度やpHなど、時間の経過とともに変化する値に適しています。

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()
    }
}

キーポイント:

Text("Water Reminder") プログレスバーのみがある場合にコンテキストの欠如を避けるためにユーザーにタイトルを与えます。
Text("32 oz. consumed") Rectangular ファミリの水平スペースに適した短い文に現在の状態を書き込みます。
ProgressView(value: 0.7) は 0 から 1 までの進行状況の値を表します。
LinearProgressViewStyle(tint: .blue) セッションで表示される線形スタイルと色合いを使用します。
プレビューは引き続き経由で行われます CLKComplicationTemplateGraphicRectangularFullView そして previewContext()。

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()
    }
}

キーポイント:

@State var acidity = 5.8 ゲージに現在の値を与えます。たとえば、セッションからの庭の土壌酸性度シナリオなどです。
Gauge(value: acidity, in: 3...10) 値の範囲を定義します。セッション内の範囲は 3 ～ 10 です。
currentValueLabel ユーザーが素早く読み取れるように、ゲージの中央に現在の値が表示されます。
minimumValueLabel そして maximumValueLabel 開始値と終了値にラベルを付けます。
CircularGaugeStyle(tint: Gradient(...)) グラデーションの色合いを使用して、異なる間隔に異なる色のヒントを与えます。
CLKComplicationTemplateGraphicCircularView Circular ファミリのプレビューに対応します。

ハンドルダイヤルの色合い

(06:03) 文字盤は複数の色合いをサポートしており、コンプリケーションは文字盤の色の変化に追従します。セッションでは、色合いを彩度の低い色合いと色の不透明度の色合いの 2 つの効果に分けます。

デフォルトの動作は彩度の低い色合いです。ウォッチフェイスに色が付くと、システムはビューのグレースケールバージョンを作成します。一部のウォッチフェイスでは、グレースケールビューに単一の色がオーバーレイされます。セッションでは、黄色のリンゴと青い円を使用して説明します。2 つの色の明るさが近い場合、彩度を下げるとリンゴが消える可能性があるため、設計時にグレースケールの状態を確認する必要があります (07:03)。

色の不透明度の色合いを指定するには、開発者がビュー階層を 2 つのレイヤーに分割する必要があります。 Transcript によって命名されたキー API は、 complicationForeground 修飾子: デフォルトのコンテンツは背景レイヤーにあり、この修飾子を適用したコンテンツは前景レイヤーに入ります。次に、ダイヤルは各レイヤーの不透明度のみを確認し、特定のダイヤルがどのレイヤーに色を付けるかを決定します (08:32、10:12)。

より細かい制御が可能になります ComplicationRenderingMode。 2 つの値がありますfullColor そして tinted 環境から読み取ることができます。セッションの例では、フルカラーモードでは青色の塗りつぶしを保持し、色付きモードでは不透明度の線形グラデーションのみを変更するように変更します。これは、色の不透明度の色合いは最終的に不透明度のみを使用するためです (11:32)。

キーポイント:

デフォルトの色合いは彩度の低い色合いです。まずビューがグレースケールでまだ読み取れるかどうかを確認してください。
complicationForeground ビューの一部を前景レイヤーに持ち上げるために使用されます。
カラーの不透明度の色合いは不透明度のみを使用し、元の色は直接保持されません。
ウォッチフェイスが異なると、前景レイヤーと背景レイヤーに異なる色が適用される場合があります。
ComplicationRenderingMode 同じビューでレンダリングを調整できるようになります fullColor そして tinted 枝。

Xcode プレビューを使用して複雑な問題を確認する

(13:42) Coffee Tracker の例では、アプリに HistoryView を配置し、プレビューに新しい ComplicationHistoryView を配置して、並べて表示します。目的は、合併症を変更するときにアプリ内のページを誤って損傷することを避けることです。複雑なチャートを合併症固有のビューに分割できるため、文字盤のサイズ、フォント、色合いの調整を 1 か所に集中させることができます。

previewContext() は、このワークフローのエントリポイントです。で定義されています CLKComplicationTemplate ClockKit と SwiftUI の両方をインポートする必要があります。テンプレートを SwiftUI ビューにラップし、プレビューでファミリーに適したウォッチフェイスにコンプリケーションを配置できるようにします (15:11)。

セッションも披露されました PreviewFaceColors: さまざまな文字盤の色を列挙し、マルチカラーの文字盤と着色された文字盤を一緒に見ることができます。これにより、別のファイルを変更するときに、コンプリケーションがどのように色合いをリアルタイムで更新するかを観察できます (18:16)。

キーポイント:

単純なビューでは、複雑化に入るために属性を少し調整するだけで済む場合があります。
複雑なチャートは、別個の複雑なビューに分割するのに適しています。
previewContext() テンプレートを SwiftUI プレビューに配置します。
PreviewFaceColors 複数の文字盤の色を同時に確認するために使用されます。
プレビューはフルカラーと着色された状態の両方をカバーする必要があります。

公開する前に制限とレイアウト境界を確認してください

(19:12) コンプリケーションはミニアプリではありません。任意の領域をクリックするとアプリが開きます。ボタン、ジェスチャー、その他のインタラクティブな要素はサポートされていません。 Session では、テキスト、画像、描画プリミティブのみを使用することをお勧めします。

Complication は静的なビューで構成されるタイムラインであるため、SwiftUI アニメーションもサポートされていません。システムは、各 SwiftUI ビューを表示する前に、そのビューのパフォーマンスを測定します。 Session は直接推奨しています: Xcode がサイズや複雑さに関するランタイム警告を出した場合、それをビルドエラーとして扱い、公開する前に修正してください (19:38)。

レイアウトに関しては、円形ファミリと長方形ファミリはコンテンツを対応する形状にマスクします。 Rectangular Full View には、Apple Watch 画面の特定の文字盤位置でコンテンツが切り取られるのを防ぐための安全領域があります。本当に領域全体を使用したい場合は、次を使用できます。 edgesIgnoringSafeAreaただし、コンテンツがトリミングされていないことを確認してください (20:46)。

キーポイント:

コンプリケーションタップはアプリを均一に開き、ローカルボタンやジェスチャーに依存できません。
タイムラインビューは静的なコンテンツであるため、複雑な場合は SwiftUI アニメーションが機能しません。
画像サイズ、ぼかし、書式設定されたテキストなどの描画コストは、実行時のパフォーマンスに影響します。
実行時警告はリリース前に修正する必要があります。
円形および長方形のファミリはコンテンツをマスクします。フルビューの安全領域は、デフォルトですべての場所を保護します。

重要ポイント

カウントダウンタイプのコンプリケーションを作成: 昼寝、お菓子作り、会議前のリマインダーなど。セッションの Text(Date() + 100, style: .relative) タイマーのスタイルはウォッチフェイスによって自動的に更新されます。起動方法は次のとおりです。 CLKComplicationTemplateGraphicRectangularFullView 短いタイトル、SF シンボル、時間のテキストを表示します。
進捗タイプの複雑さを作成: 水の消費、音楽の再生、タスクの完了など。 ProgressView の円形および直線的なスタイルは、小さなサイズのダイヤルに適応されています。始める方法は、使用することです ProgressView(value:) を押して状態を 0 から 1 まで表し、ファミリを押して円形または線形スタイルを選択します。
複雑な情報をインターバルで測定します: 土壌の pH、UV、温度など。ゲージは、現在値、最小値、最大値、およびグラデーションの色合いをサポートします。開始方法は、まず値の範囲を決定してから、次を使用します。 Gauge(value:in:) プラス currentValueLabel ユーザーが一目で測定値を確認できるようにします。
複雑なグラフを合併症固有のビューに分割: Coffee Tracker の例は、毎週のコーヒー摂取量グラフを ComplicationHistoryView に抽出します。まず始めに、アプリ内の大きなグラフを、タイトルと主要な列またはゲージのみを保持する SwiftUI ビューに縮小してから、 previewContext() アプリビューと追加機能ビューを同時に表示します。
色合いのプレビューリストを作成: ウォッチフェイスの色合いは色とレベルのパフォーマンスを変更します。まず、前景レイヤーに次のマークを付けます。 complicationForeground、使用 ComplicationRenderingMode 処理する fullColor そして tinted それぞれ、使用します PreviewFaceColors 複数の文字盤の色を確認するには、

Build complications in SwiftUI

ハイライト

主要内容

詳細

SwiftUI ビューを ClockKit テンプレートに配置する

Text、ProgressView、Gauge を使用して、一目で判読できる情報を表現します

ハンドルダイヤルの色合い

Xcode プレビューを使用して複雑な問題を確認する

公開する前に制限とレイアウト境界を確認してください

重要ポイント

関連セッション

コメント