Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Complications and widgets: Reloadedの要約
Search
Ryo Tsuzukihashi
June 24, 2022
1
1.2k
Complications and widgets: Reloadedの要約
Ryo Tsuzukihashi
June 24, 2022
Tweet
Share
More Decks by Ryo Tsuzukihashi
See All by Ryo Tsuzukihashi
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
3
1.1k
二次元コードを読み取りやすくするために 画面を強制的に明るくするのは もうやめにしませんか?👀
tsuzuki817
0
420
動画だけじゃない!iOS 15のピクチャ・イン・ピクチャを使って好きなUIを表示させよう!
tsuzuki817
3
4.6k
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
2
1k
Speech framework tips
tsuzuki817
1
2.6k
Build complication in SwiftUI の要約
tsuzuki817
0
700
SwiftUI で Neumorphism!!!
tsuzuki817
2
1.9k
SwiftUIで作りながら学ぶアニメーション インジケーター編
tsuzuki817
0
590
Featured
See All Featured
Statistics for Hackers
jakevdp
798
220k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GraphQLとの向き合い方2022年版
quramy
46
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
4 Signs Your Business is Dying
shpigford
183
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
Complications and widgets: Reloaded Swi$愛好会スピンオフ WWDC22セッション要約会
Hello! 續橋 涼( @tsuzuki817 ) ヤフー株式会社 PayPayフリマ iOSアプリ開発 趣味: 個人アプリ開発
(SwiftUI製アプリ11個) 2
3 🙇宣伝🙇 ぜひ使ってみてください! アドバイス待ってます🔥
4 この技術にピンときたらインストール! SwiftUI, Picture In Picture, Widget, CoreML, Vision
1.watchOSからiOSへ 一目でわかるコンプリケーションの体験を iOSにもたらす
iOSのロック画面でWidgetが置ける 6
iOSのロック画面でWidgetが置ける 7 iOS 16から使える!
iOSのロック画面でWidgetが置ける 8 コンプリケーションの ようなウィジェット
新しく追加されたWidgetFamily • accessor接頭語を持つ WidgetFamliyが追加 • iOS 16と watchOS 9の両方のプ ラットフォームで構築できる
9
accessoryRectangular 10 ① ü 数行のテキスト ü 小さなグラフやチャート ClockKitのgraphicRectangularと 役割は同じ
accessoryCircular 11 ü 簡単な情報 ü ゲージ ü 進捗状況表示 ClockKitのgraphicCircularと役割 は同じ
②
accessoryInline 12 ü テキストのみを表示 ü iOSでは時計の上 ü watchOSでは多くの箇所 ③
accessoryCorner(watchOSのみ) 13 ü 小さな円形コンテンツ ü ゲージやテキストが混在している 詳しくは以下のセッション参照 ④
2.Color and Rendering さまざまなレンダリングモードに対応できる Widgetを作る
Color 15
Color 16 Widgetでもレンダリングス タイルに適用させることが できるようになりました!
3つの異なるレンダリングモード 17
環境変数 widgetRenderingMode 18
19 Full Color ü コンテンツは指定された通り に表示される ü カラフルな見た目
20 accented ü Viewが2つのグループに分割 ü 独立して着色される ü フラットに着色 ü 元の透明度のみを保持
21 Accentedの確認方法
22 accented ü システムはいくつかの方法で着色 ü いくつかは反転していることに注意 ü 新しい背景も追加
23 vibrant 一度脱色される
24 vibrant ロック画面の背景に 合わせて色付けされる
vivrant 25 見づらくなってしまうため このモードでの透明な色は 避けたほうが良い
vivrant 26 代わりに濃い色や黒色など を使って、可読性を保ちつ づ目立ちすぎないように
背景が必要なウィジェットに一貫した背景 を与えることができる 27 AccessoryWidget Background
28 AccessoryWidgetBackground
AccessoryWidgetBackground • さまざまなレンダリングモードで異なる見た目になる • watch face, Lock Screenのスタイルに応じた外見になるよう にシステムに調整される 29
AccessoryWidgetBackground
AccessoryWidgetBackground Full ColorとAccentedではソフトな透明 Vibrantでは低い輝度とブラー
3.新しいWidgetで使える SwiftUIの新機能 Widgetを適切に表示させるための機能
33 進行状況をアニメーションで 表示したいなぁ
34 進行状況をアニメーションで 表示したいなぁ でも短時間で多くのエン トリーするのもなぁ
35 自動更新ProgressView
36 Widgetにたくさんの情報 の表示させたいけど
37 Widgetにたくさんの情報 の表示させたいけど 情報によって表示領域が 変わってしまう
38 ViewThatFit
39 ViewThatFit 複数のViewを指定すると 利用可能なスペースに収ま る最初のコンテンツビュー を表示する
iOS/Android ΞϓϦΤϯδχΞ࠾༻͍ͯ͠·͢ 最後に…
41 Thanks! Any ques7ons?