Google I/O 報告LT会 / Building UI with the M3-adaptive-lib

2024/6/14にサイボウズ社内で実施したGoogle I/O 2024の報告LT会の資料です。

Building UI with the Material 3 adaptive library
https://io.google/2024/explore/2dff9b4c-4069-4bde-ab9a-c5f53dc0fdb8/

Transcript

1. マテリアル 3 の アダプティブライブラリを使用して UI を 作成する 2024/6/14 Google I/O 報告LT会 Atria(あとりあ)
2. 注意事項 • この発表はGoogle I/O 2024のセッションの一つである 「Building UI with the Material 3 adaptive library」 を視聴し、追加で気になった点を調べたものです。 • 精査したつもりではありますが、筆者の理解が及ばず 不正確な内容が含まれてしまっている可能性があります。
3. 話す人 • Atria(あとりあ) • 24卒入社 Androidアプリエンジニア • 最近 ◦ コーヒーが飲めるようになった ◦ 肩こりを自覚し始めた
4. Androidデバイスの多様化 画像引用元: https://store.google.com/
5. しんどい しんどさのあまり「対応しません！」って人もいる
6. M3-adaptive で解決! 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
7. 実際にやってみた 軽くデモをやります
8. 動画内で触れられていた話題、ざっくりと • 前提 ◦ 依存関係 ◦ ウィンドウサイズクラスやペインという概念について • NavigationSuiteScaffold : 最適なコンポーネントを自動で提供する ◦ 画面サイズによる動作を手動で設定する方法 • ListDetailPaneScaffold : 画面サイズに応じた機能提供を実現する ◦ 引数の受け渡し • 応用 ◦ navigatorが提供する要素の踏み込んだ説明 ◦ 折りたたみデバイスの状態を取得する
9. 動画内で触れられていた話題、ざっくりと • 前提 ◦ 依存関係 ◦ ウィンドウサイズクラスやペインという概念について • NavigationSuiteScaffold : 最適なコンポーネントを自動で提供する ◦ 画面サイズによる動作を手動で設定する方法 • ListDetailPaneScaffold : 画面サイズに応じた機能提供を実現する ◦ 引数の受け渡し • 応用 ◦ navigatorが提供する要素の踏み込んだ説明 ◦ 折りたたみデバイスの状態を取得する
10. NavigationSuiteScaffold
11. 前提 : ウィンドウサイズという概念 • 大きく分けて Compact, Medium, Expanded に分けられる ◦ この分類に従うことで、効率的に画面対応が可能になる ◦ 公式ドキュメントに、各端末での目安表が乗ってて便利です 画像引用元: https://developer.android.com/develop/ui/compose/layouts/adaptive/window-si ze-classes
12. NavigationSuiteScaffold : ひとくち解説 • 最適なコンポーネントを自動で提供してくれるやつ ◦ もっと砕けた表現をすると、ボトムナビゲーションをいい感じに配置できる
13. 自動適用と手動定義 • ライブラリに全部お任せすることが可能だが、 一部状況で変なUIが構築されることがある • この問題に対しては、 layoutTypeを自分で定義することによって ナビゲーションドロワーの大きさを いい感じに切り替えることが可能
14. 手動定義の例 val adaptiveInfo = currentWindowAdaptiveInfo () val customNavSuiteType = with(adaptiveInfo){ if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass. EXPANDED){ if (windowSizeClass.windowHeightSizeClass == WindowHeightSizeClass. COMPACT){ NavigationSuiteType. NavigationRail }else NavigationSuiteType.NavigationDrawer }else{ NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } … NavigationSuiteScaffold ( layoutType = customNavSuiteType, …
15. NavigationSuiteTypeの種類 NavigationDrawer NavigationBar None NavigationRail
16. NavigationSuiteScaffoldでハマったこと • 利用すると `java.lang.NoSuchMethodError: No static method NavigationSuiteScaffold-imZBekw` というしんどそうなエラーが... ◦ kotlinCompilerExtensionのバージョンが1.5.12以上必要らしい ▪ これに伴って、kotlinのバージョンを1.9.23以上にする必要がある 依存関係以外ではバグらず、意外と簡単に導入ができた🎉
17. ListDetailPaneScaffold
18. 前提 : ペイン(Pane)という概念 • 画面をペイン(Pane)という概念で分割する ◦ 画面の大きさによってペインを単体で利用したり、 組み合わせたりして画面を構成しようという仕組み 画像引用元: https://io.google/2024/explore/5539154e-ea71-412c-852d-55c8649a2f8d/
19. ListDetailPaneScaffold : ひとくち解説 • 画面サイズが大きい時、アプリ内で分割画面を構築してくれるやつ ◦ 画面サイズが小さい場合は、1画面で構成してくれる
20. ListDetailPaneScaffoldでハマった(ている)こと • 動画で紹介されているコードに不十分なものがあって、そのままでは動かないものが ある ◦ 動画ではなく、ドキュメントの方を参照すると幸せになれる ◦ Build a list-detail layout | Jetpack Compose | Android Developers • rememberListDetailPaneScaffoldNavigator周辺をうまく保持しないと、 画面回転などでクラッシュする ◦ 解決方法がまだ見つかってません...😭
21. 触ってみた感想 • 意外と簡単に導入できた ◦ バージョン周辺の問題さえなんとかなれば導入したいくらい、良かった • 導入難易度は体感NavigationSuiteScaffold < ListDetailPaneScaffold ◦ NavigationSuiteScaffoldは簡単で、バグりづらく実装まで持っていけた ◦ DetailPaneは画面回転時の処理やアニメーションの適用など、細かい部分が難し い印象を受けました • Now in AndroidではすでにNavigationSuiteScaffoldがメインで実装されているため、 勉強しやすかった • 一方、ListDetailPaneScaffoldは一つの画面で仮に実装されているだけで、情報を集 めにくかった
22. 付録
23. デモを動かした環境 • Android Studio Iguana | 2023.2.1 • Android14 • agp = "8.3.0" • kotlin = "1.9.23" • coreKtx = "1.10.1" • junit = "4.13.2" • junitVersion = "1.1.5" • espressoCore = "3.5.1" • lifecycleRuntimeKtx = "2.6.1" • activityCompose = "1.7.0" • composeBom = "2023.08.00" • m3AdaptiveNavSuite = "1.0.0-alpha07" • m3Adaptive = "1.0.0-beta02" • navigationCompose = "2.7.7" • kotlinCompilerExtensionVersion = "1.5.12" Android Studio Iguana | 2023.2.1で New Project -> Empty Activityを選択した際に 生成される依存関係が基本となっています。 太字が変更点です。
24. もっと理解したい方へ Google I/O 2024 公式ページより、 以下のセッションが参考になりそうです。 引用元: https://io.google/2024/ explore/intl/ja/?q=mobile 今回対象としたセッションは 割と続き物みたいな感じになっていました。 先にこの2つを見た方が理解が楽かもしれません。
25. 参考文献 • Building UI with the Material 3 adaptive library ◦ https://io.google/2024/explore/2dff9b4c-4069-4bde-ab9a-c5f53dc0fdb8/ • Compose Material 3 ◦ https://developer.android.com/jetpack/androidx/releases/compose-material3 • compose material3 adaptive ◦ https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive?_gl=1*1mjw5ne*_up*MQ..*_ga*MTE1NDU3 Mjg0Mi4xNzE4MTY3NDEz*_ga_6HH9YJMN9M*MTcxODE2NzQxMi4xLjAuMTcxODE2NzQxMi4wLjAuMA.. • About adaptive layouts ◦ https://developer.android.com/develop/ui/compose/layouts/adaptive?_gl=1*14tfoxc*_up*MQ..*_ga*NTE5MDM3MTk0LjE3MTgzMjE 2NjU.*_ga_6HH9YJMN9M*MTcxODMyMTY2NC4xLjAuMTcxODMyMTY2NC4wLjAuMA..
26. 参考文献 • 青空文庫 Aozora Bunko ◦ https://www.aozora.gr.jp/ • android/nowinandroid ◦ https://github.com/android/nowinandroid • material3-adaptive-navigation-suite 1.0.0-alpha06 update causes NoSuchMethodError: No static method NavigationSuiteScaffold-imZBekw ◦ https://issuetracker.google.com/issues/335384193