Glance 3分クッキング

Transcript

1. Glance 3分クッキング ゆつぼ(@morayl1)
2. ゆつぼ うつぼです。かわいい！ 2 morayl morayl1 株式会社リクルート スタディサプリのAndroidエンジニア
3. Glanceと私 Glance = Compose を使用してアプリ ウィジェットを作成できるライブラリ。 2年半前(alpha03)に触って記事を書いた以来離れていた。 Glanceを使ってJetpackComposeでAndroidのウィジェットを開発しよう - Qiita 最近また触ったので、調べたことを共有する。 ※Glanceにフォーカスし、ウィジェットの基本は話しません 3
4. TodoListウィジェットを作ってみる 要件 • RoomのTodoListを表示 • スクロールできる • Todoをタップすると消せる 用意するものは3つ 1. appwidget-provider(meta-data) 2. GlanceAppWidgetReceiver 3. GlanceAppWidget 4
5. 依存関係 5
6. 1. appwidget-provider(meta-data) AndroidManifestのGlanceAppWidgetReceiverのmeta-dataで参照する initialLoadingはglanceにデフォルトが 入っている Composeが表示されるまでに時間を 待つなら意味がある Flowで購読すればあまり意味はなさ そう 6
7. 1. appwidget-provider(meta-data) AndroidManifestのGlanceAppWidgetReceiverのmeta-dataで参照する initialLoadingはglanceにデフォルトが 入っている Composeが表示されるまでに時間を 待つなら意味がある Flowで購読すればあまり意味はなさ そう • xmlだが、Glanceライブラリにデフォルトが用意されている • 端末再起動時や、Glance準備中に表示されるレイアウト • もちろん自分で用意してもOK 7
8. 2. GlanceAppWidgetReceiver これだけ！ 8
9. 3. GlanceAppWidget 最小構成 9
10. 3. GlanceAppWidget 最小構成 見づらい 10
11. 見た目を整える 11
12. 見た目を整える material2 or 3のカラーを使うことが出来る 12
13. データを読み取る 13
14. データを読み取る • provideGlanceで時間のかかる処理を実行できる ◦ CoroutineWorkerとしてバックグラウンドで実行される ◦ 10分以内のタスクを実行できる(provideContentを呼ぶと45秒) ◦ ApiやDatastoreを使っても良い ◦ ここで時間がかかるとinitial_layoutが表示される • provideContent内でcollectAsStateでデータソースを監視する ◦ update/updateAllは、provideGlanceが実行中の場合それを再起動しない 14
15. リストを表示する 15
16. リストを表示する • LazyColumnで簡単に作れる • Glance ≒ Compose。割と使えるが、全て同じではない。 16
17. 依存性注入 17
18. 依存性注入 HiltのEntryPoinAccessorsを 使って簡単に注入できる 18
19. クリック処理 19
20. クリック処理 Activity起動はこれだけ repositoryへの入力もGlance内で解決できる 20
21. まとめ • レイアウトが≒Composeで書ける • 簡単にThemeを適用できる • provideGlance内でデータロード出来る • HiltのEntryPointAccessorsで依存性を注入できる • クリック処理も簡単 Androidアドベントカレンダーで、詳細な記事を書きます！ 21
22. 参考(全てAndroid Developers) • Glance でアプリ ウィジェットを作成する ◦ まずはこれ • シンプルなウィジェットを作成する ◦ ウィジェットの基本(meta-dataとかも解説) • GlanceAppWidget provideGlance ◦ リファレンスに詳細な解説とサンプルコードが載っている • Create a widget with Glance | Android Developers ◦ GlanceのCodelab • Hilt でサポートされていないクラスに依存関係を注入する ◦ AppWidgetにRepositoryをInjectするときに使った方法 22