Complications and widgets: Reloadedの要約

by Ryo Tsuzukihashi

Slide 1

Slide 1 text

Complications and widgets: Reloaded Swi$愛好会スピンオフ WWDC22セッション要約会

Slide 2

Slide 2 text

Hello! 續橋涼( @tsuzuki817 ) ヤフー株式会社 PayPayフリマ iOSアプリ開発趣味: 個人アプリ開発 (SwiftUI製アプリ11個) 2

Slide 3

Slide 3 text

3 🙇宣伝🙇‍‍ ぜひ使ってみてください！アドバイス待ってます🔥

Slide 4

Slide 4 text

4 この技術にピンときたらインストール！ SwiftUI, Picture In Picture, Widget, CoreML, Vision

Slide 5

Slide 5 text

1.watchOSからiOSへ一目でわかるコンプリケーションの体験を iOSにもたらす

Slide 6

Slide 6 text

iOSのロック画面でWidgetが置ける 6

Slide 7

Slide 7 text

iOSのロック画面でWidgetが置ける 7 iOS 16から使える！

Slide 8

Slide 8 text

iOSのロック画面でWidgetが置ける 8 コンプリケーションのようなウィジェット

Slide 9

Slide 9 text

新しく追加されたWidgetFamily ● accessor接頭語を持つ WidgetFamliyが追加 ● iOS 16と watchOS 9の両方のプラットフォームで構築できる 9

Slide 10

Slide 10 text

accessoryRectangular 10 ① ü 数行のテキスト ü 小さなグラフやチャート ClockKitのgraphicRectangularと役割は同じ

Slide 11

Slide 11 text

accessoryCircular 11 ü 簡単な情報 ü ゲージ ü 進捗状況表示 ClockKitのgraphicCircularと役割は同じ ②

Slide 12

Slide 12 text

accessoryInline 12 ü テキストのみを表示 ü iOSでは時計の上 ü watchOSでは多くの箇所 ③

Slide 13

Slide 13 text

accessoryCorner(watchOSのみ) 13 ü 小さな円形コンテンツ ü ゲージやテキストが混在している詳しくは以下のセッション参照 ④

Slide 14

Slide 14 text

2.Color and Rendering さまざまなレンダリングモードに対応できる Widgetを作る

Slide 15

Slide 15 text

Color 15

Slide 16

Slide 16 text

Color 16 Widgetでもレンダリングスタイルに適用させることができるようになりました！

Slide 17

Slide 17 text

3つの異なるレンダリングモード 17

Slide 18

Slide 18 text

環境変数 widgetRenderingMode 18

Slide 19

Slide 19 text

19 Full Color ü コンテンツは指定された通りに表示される ü カラフルな見た目

Slide 20

Slide 20 text

20 accented ü Viewが2つのグループに分割 ü 独立して着色される ü フラットに着色 ü 元の透明度のみを保持

Slide 21

Slide 21 text

21 Accentedの確認方法

Slide 22

Slide 22 text

22 accented ü システムはいくつかの方法で着色 ü いくつかは反転していることに注意 ü 新しい背景も追加

Slide 23

Slide 23 text

23 vibrant 一度脱色される

Slide 24

Slide 24 text

24 vibrant ロック画面の背景に合わせて色付けされる

Slide 25

Slide 25 text

vivrant 25 見づらくなってしまうためこのモードでの透明な色は避けたほうが良い

Slide 26

Slide 26 text

vivrant 26 代わりに濃い色や黒色などを使って、可読性を保ちつづ目立ちすぎないように

Slide 27

Slide 27 text

背景が必要なウィジェットに一貫した背景を与えることができる 27 AccessoryWidget Background

Slide 28

Slide 28 text

28 AccessoryWidgetBackground

Slide 29

Slide 29 text

AccessoryWidgetBackground ● さまざまなレンダリングモードで異なる見た目になる ● watch face, Lock Screenのスタイルに応じた外見になるようにシステムに調整される 29

Slide 30

Slide 30 text

AccessoryWidgetBackground

Slide 31

Slide 31 text

AccessoryWidgetBackground Full ColorとAccentedではソフトな透明 Vibrantでは低い輝度とブラー

Slide 32

Slide 32 text

3.新しいWidgetで使える SwiftUIの新機能 Widgetを適切に表示させるための機能

Slide 33

Slide 33 text

33 進行状況をアニメーションで表示したいなぁ

Slide 34

Slide 34 text

34 進行状況をアニメーションで表示したいなぁでも短時間で多くのエントリーするのもなぁ

Slide 35

Slide 35 text

35 自動更新ProgressView

Slide 36

Slide 36 text

36 Widgetにたくさんの情報の表示させたいけど

Slide 37

Slide 37 text

37 Widgetにたくさんの情報の表示させたいけど情報によって表示領域が変わってしまう

Slide 38

Slide 38 text

38 ViewThatFit

Slide 39

Slide 39 text

39 ViewThatFit 複数のViewを指定すると利用可能なスペースに収まる最初のコンテンツビューを表示する