注意
ベータ版は色々バグや不安定な箇所がありますのでご注意ください。
Appleにフィードバックを送ってより良いものにしていきましょう😌
環境
- watchOS 7 beta
- Xcode 12 beta
Build complications in SwiftUI
[引用: Get ready for watchOS 7.]
- SwiftUIでwatchOSのコンプリケーションが作れるようになった
- コンプリケーションとは、アプリに関するタイムリーで関連性の高い情報をウォッチフェイスに表示
- 複雑な情報をひと目で理解できるものに洗練することができる
追加されたSwiftUIで使えるComplication Template
Graphic Corner, Circular, Rectangular, and Extra Largeの4つ
-
GraphicCorner
-
GraphicCircular
-
GraphicRectangular
-
ExtraLargeCircular
Preview
適当なViewをSwiftUIで作成します。
新しく追加されたAPIもコンプリケーションに使えるので便利ですね！
import SwiftUI
import ClockKit
struct SampleGraphicRectangular: View {
@State var gaugeValue: CGFloat = 3
var body: some View {
VStack {
Text("Swift愛好会")
Gauge(value: gaugeValue, in: 1...15) {
Image(systemName: "drop.fill")
.foregroundColor(.green)
} currentValueLabel: {
Text("\(gaugeValue, specifier: "%.1f")")
}
.gaugeStyle(LinearGaugeStyle(
tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
))
}
}
}
これをプレビューしたいですね！
しかし、CLKComplicationテンプレートはSwiftUIのViewそのものではないので、単体ではプレビューすることができません。
そこで今回追加されたSwiftUI用のCLKComplicationTemplateとpreviewContext関数です！
ClockKitとSwiftUIの両方を同時にインポートした場合に利用することができます。
プレビューされた全てのComplicationテンプレートは、それらのfamilyに最適なwatch faceに設定されます。
以下のようなに適当なViewを作成し、 テンプレートを適用しpreviewContext()を利用すると
struct SampleGraphicRectangular_Previews: PreviewProvider {
static var previews: some View {
Group {
CLKComplicationTemplateGraphicCornerCircularView(SampleGraphicRectangular())
.previewContext()
CLKComplicationTemplateGraphicCircularView(SampleGraphicRectangular())
.previewContext()
CLKComplicationTemplateGraphicRectangularFullView(SampleGraphicRectangular())
.previewContext()
CLKComplicationTemplateGraphicExtraLargeCircularView(SampleGraphicRectangular())
.previewContext()
}
}
}
以下のような対応されたwatch faceのプレビューを表示し自身のViewがコンプリケーションとして表示されていることをプレビューすることができます。
めちゃくちゃ便利です！！！
| CLKComplicationTemplate GraphicCornerCircularView |
CLKComplicationTemplate GraphicCircularView |
CLKComplicationTemplate GraphicRectangularFullView |
CLKComplicationTemplate GraphicExtraLargeCircularView |
|
|---|---|---|---|---|
| preview (イメージ) |
 |
 |
|
 |
| watch face | インフォグラフ（左上） | インフォグラフモジュラー（小さい円） | インフォグラフモジュラー（中央） | 特大（中央） |
face color
以下のようなメソッドでwatch faceのカラーを変えることができます。
.previewContext(faceColor: .blue)
またwatch faceのfaceColorによってコンプリケーションの見た目を変更したい場合には以下のようにcomplicationのRenderingModeが環境変数から取れますのでそれを利用することで対応できます！
@Environment(\.complicationRenderingMode) var mode
エラー
ComplicationControllerのgetCurrentTimelineEntry（）などでComplication familyと異なるタイプのTemplateが選択されていた場合
Data handler called with incompatible template for complication family.
Expected template for 'CLKComplicationFamilyGraphicCircular',
but received one for 'CLKComplicationFamilyGraphicCorner'.
できないこと
- SwiftUIのButton, gestures,その他のインタラクティブ要素はサポートされていない
- Complicationはどこをタップしても必ずアプリが起動する
- SwiftUIのAnimationはサポートされていない
- Complicationは静的なViewで構成されたタイムラインであること