Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Google I/O 報告LT会 / Building UI with the M3-adap...

Atria
June 16, 2024

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/

Atria

June 16, 2024
Tweet

More Decks by Atria

Other Decks in Programming

Transcript

  1. 注意事項 • この発表はGoogle I/O 2024のセッションの一つである 「Building UI with the Material

    3 adaptive library」 を視聴し、追加で気になった点を調べたものです。 • 精査したつもりではありますが、筆者の理解が及ばず 不正確な内容が含まれてしまっている可能性があります。
  2. 動画内で触れられていた話題、ざっくりと • 前提 ◦ 依存関係 ◦ ウィンドウサイズクラスやペインという概念について • NavigationSuiteScaffold :

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

    最適なコンポーネントを自動で提供する ◦ 画面サイズによる動作を手動で設定する方法 • ListDetailPaneScaffold : 画面サイズに応じた機能提供を実現する ◦ 引数の受け渡し • 応用 ◦ navigatorが提供する要素の踏み込んだ説明 ◦ 折りたたみデバイスの状態を取得する
  4. 前提 : ウィンドウサイズという概念 • 大きく分けて Compact, Medium, Expanded に分けられる ◦

    この分類に従うことで、効率的に画面対応が可能になる ◦ 公式ドキュメントに、各端末での目安表が乗ってて便利です 画像引用元: https://developer.android.com/develop/ui/compose/layouts/adaptive/window-si ze-classes
  5. 手動定義の例 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, …
  6. NavigationSuiteScaffoldでハマったこと • 利用すると `java.lang.NoSuchMethodError: No static method NavigationSuiteScaffold-imZBekw` というしんどそうなエラーが... ◦

    kotlinCompilerExtensionのバージョンが1.5.12以上必要らしい ▪ これに伴って、kotlinのバージョンを1.9.23以上にする必要がある 依存関係以外ではバグらず、意外と簡単に導入ができた🎉
  7. ListDetailPaneScaffoldでハマった(ている)こと • 動画で紹介されているコードに不十分なものがあって、そのままでは動かないものが ある ◦ 動画ではなく、ドキュメントの方を参照すると幸せになれる ◦ Build a list-detail

    layout | Jetpack Compose | Android Developers • rememberListDetailPaneScaffoldNavigator周辺をうまく保持しないと、 画面回転などでクラッシュする ◦ 解決方法がまだ見つかってません...😭
  8. 触ってみた感想 • 意外と簡単に導入できた ◦ バージョン周辺の問題さえなんとかなれば導入したいくらい、良かった • 導入難易度は体感NavigationSuiteScaffold < ListDetailPaneScaffold ◦

    NavigationSuiteScaffoldは簡単で、バグりづらく実装まで持っていけた ◦ DetailPaneは画面回転時の処理やアニメーションの適用など、細かい部分が難し い印象を受けました • Now in AndroidではすでにNavigationSuiteScaffoldがメインで実装されているため、 勉強しやすかった • 一方、ListDetailPaneScaffoldは一つの画面で仮に実装されているだけで、情報を集 めにくかった
  9. デモを動かした環境 • 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を選択した際に 生成される依存関係が基本となっています。 太字が変更点です。
  10. 参考文献 • 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..
  11. 参考文献 • 青空文庫 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