マテリアル 3 の アダプティブライブラリを使用して UI を 作成する 2024/6/14 Google I/O 報告LT会 Atria(あとりあ)

注意事項 ● この発表はGoogle I/O 2024のセッションの一つである 「Building UI with the Material 3 adaptive library」 を視聴し、追加で気になった点を調べたものです。 ● 精査したつもりではありますが、筆者の理解が及ばず 不正確な内容が含まれてしまっている可能性があります。

話す人 ● Atria(あとりあ) ● 24卒入社 Androidアプリエンジニア ● 最近 ○ コーヒーが飲めるようになった ○ 肩こりを自覚し始めた

Androidデバイスの多様化 画像引用元: https://store.google.com/

しんどい しんどさのあまり「対応しません！」って人もいる

M3-adaptive で解決! 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

実際にやってみた 軽くデモをやります

動画内で触れられていた話題、ざっくりと ● 前提 ○ 依存関係 ○ ウィンドウサイズクラスやペインという概念について ● NavigationSuiteScaffold : 最適なコンポーネントを自動で提供する ○ 画面サイズによる動作を手動で設定する方法 ● ListDetailPaneScaffold : 画面サイズに応じた機能提供を実現する ○ 引数の受け渡し ● 応用 ○ navigatorが提供する要素の踏み込んだ説明 ○ 折りたたみデバイスの状態を取得する

動画内で触れられていた話題、ざっくりと ● 前提 ○ 依存関係 ○ ウィンドウサイズクラスやペインという概念について ● NavigationSuiteScaffold : 最適なコンポーネントを自動で提供する ○ 画面サイズによる動作を手動で設定する方法 ● ListDetailPaneScaffold : 画面サイズに応じた機能提供を実現する ○ 引数の受け渡し ● 応用 ○ navigatorが提供する要素の踏み込んだ説明 ○ 折りたたみデバイスの状態を取得する

NavigationSuiteScaffold

前提 : ウィンドウサイズという概念 ● 大きく分けて Compact, Medium, Expanded に分けられる ○ この分類に従うことで、効率的に画面対応が可能になる ○ 公式ドキュメントに、各端末での目安表が乗ってて便利です 画像引用元: https://developer.android.com/develop/ui/compose/layouts/adaptive/window-si ze-classes

NavigationSuiteScaffold : ひとくち解説 ● 最適なコンポーネントを自動で提供してくれるやつ ○ もっと砕けた表現をすると、ボトムナビゲーションをいい感じに配置できる

自動適用と手動定義 ● ライブラリに全部お任せすることが可能だが、 一部状況で変なUIが構築されることがある ● この問題に対しては、 layoutTypeを自分で定義することによって ナビゲーションドロワーの大きさを いい感じに切り替えることが可能

手動定義の例 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, …

NavigationSuiteTypeの種類 NavigationDrawer NavigationBar None NavigationRail

NavigationSuiteScaffoldでハマったこと ● 利用すると `java.lang.NoSuchMethodError: No static method NavigationSuiteScaffold-imZBekw` というしんどそうなエラーが... ○ kotlinCompilerExtensionのバージョンが1.5.12以上必要らしい ■ これに伴って、kotlinのバージョンを1.9.23以上にする必要がある 依存関係以外ではバグらず、意外と簡単に導入ができた🎉

ListDetailPaneScaffold

前提 : ペイン(Pane)という概念 ● 画面をペイン(Pane)という概念で分割する ○ 画面の大きさによってペインを単体で利用したり、 組み合わせたりして画面を構成しようという仕組み 画像引用元: https://io.google/2024/explore/5539154e-ea71-412c-852d-55c8649a2f8d/

ListDetailPaneScaffold : ひとくち解説 ● 画面サイズが大きい時、アプリ内で分割画面を構築してくれるやつ ○ 画面サイズが小さい場合は、1画面で構成してくれる

ListDetailPaneScaffoldでハマった(ている)こと ● 動画で紹介されているコードに不十分なものがあって、そのままでは動かないものが ある ○ 動画ではなく、ドキュメントの方を参照すると幸せになれる ○ Build a list-detail layout | Jetpack Compose | Android Developers ● rememberListDetailPaneScaffoldNavigator周辺をうまく保持しないと、 画面回転などでクラッシュする ○ 解決方法がまだ見つかってません...😭

触ってみた感想 ● 意外と簡単に導入できた ○ バージョン周辺の問題さえなんとかなれば導入したいくらい、良かった ● 導入難易度は体感NavigationSuiteScaffold < ListDetailPaneScaffold ○ NavigationSuiteScaffoldは簡単で、バグりづらく実装まで持っていけた ○ DetailPaneは画面回転時の処理やアニメーションの適用など、細かい部分が難し い印象を受けました ● Now in AndroidではすでにNavigationSuiteScaffoldがメインで実装されているため、 勉強しやすかった ● 一方、ListDetailPaneScaffoldは一つの画面で仮に実装されているだけで、情報を集 めにくかった

付録

デモを動かした環境 ● 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を選択した際に 生成される依存関係が基本となっています。 太字が変更点です。

もっと理解したい方へ Google I/O 2024 公式ページより、 以下のセッションが参考になりそうです。 引用元: https://io.google/2024/ explore/intl/ja/?q=mobile 今回対象としたセッションは 割と続き物みたいな感じになっていました。 先にこの2つを見た方が理解が楽かもしれません。

参考文献 ● 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..

参考文献 ● 青空文庫 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