Compose Navigation実装の見通しを良くする

Transcript

1. 納庄 宏明 Nosho Hiroaki / hiro Compose Naviga-on実装の⾒通しを良くする 2025/3/14 DroidKaigi.collect

   { #17@Tokyo }

2. ⾃⼰紹介 •Android Engineer •納庄 宏明 Nosho Hiroaki / hiro •最近の個⼈の活動

   •OSS制作 •Compose Mul-pla/orm試したり 本⽇のサンプルコード

3. Naviga&onの実装が雑になってい ませんか？

4. 悪い例

5. Naviga&onの⾒通しを良くしよう

6. 発表でふれること •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •覚書 •Naviga-on3というライブラリが ⽤意されている？🤔

7. 型安全なNaviga&on

8. Compose Naviga-on Safe Args •ナビゲーションの型安全機能🚀 •routeや値渡しが型安全になる •不正な画⾯遷移による実⾏時エラーを防ぐ •保守性 ⬆ 可読性

   ⬆ •Compose Mul3pla;ormでも使える

9. 従来 ルートを⽂字列で指定 argumentsで いろいろ設定 argumentsで いろいろ設定

10. Safe Args ルートをジェネリクスで指定 フィールドにアクセス 型を定義 値を渡す時

11. ⽐較 従来 Safe Args

12. •プリミティブ型全般、Enum •Custome Typeを使えば、⾃作クラスも渡せるが、、 •CustomeTypeは乱⽤しないこと •Single Source Of Truthに従っているか？🤔 •画⾯遷移ではidなど最⼩限の情報だけ渡す •Repositoryに情報源を置き、リアクティブに情報を更新

    値は何が渡せるのか？

13. Safe Argsのしくみ •Kotlin Serializa3onを使う •内部ではクラス名の⽂字列を⽣成 •⽂字列指定の⽅法と共存可能💡 •ということは、移⾏も楽 •⼀部の画⾯だけから置き換えられる •Kotlin Serializa3on機能⾊々使える

    •⽣成されるルート⽂字列は@SerialNameで修正可能

14. 良いNaviga&on Graphの構成

15. 良いNavigation Graphの構成の観点 •⼀覧性：画⾯構成/画⾯関係の把握しやすさ •検索性：⾒つけやすさ •DRY：コードが重複しない •良くする⽅法を⾒ていきましょう

16. 関連する画⾯を⼀つにまとめる 関数でまとめる グループ化/ 階層化される ⼀連のフローはNested Graphでも可

17. カプセル化する ルート定義とUI実装を カプセル化 呼び出し側で⼀覧性向上 ※navigate関数もカプセル化しています

18. ルートの定義を⾒つけやすくする Sealed Interfaceの 内部クラスとして定義 補完から⾒つけやすい

19. トップバー・ボトムバー

20. トップバー・ボトムバーをどこに置く？ •Naviga3on Graphの外に置くか、中に置くか？🤔 •やり⽅を間違えるとコードの⾒通しが悪くなる •Good/Badを整理しながら１つずつ紹介します Nav Graph TopBar Screen1, Screen2...

    Nav Graph Screen1, Screen2... TopBar

21. ①トップバーをNaviga-on Graphの外に置く Good ⬆ • 記述が⼀回なのでシンプル Bad ⬇ • 画⾯ごとにトップバーを出し分けづ

    らい(ボタンを変更する等) • 設定クラスを使って出し分ける • 出し分けの種類が増えると設定クラスが⼤ きくなってしまう⬇ • 出し分けが不要なボトムバーに👍 Nav Graph TopBar Screen1, Screen2... 設定クラス title = title = “〇〇画⾯” title =

22. Good ⬆ • 画⾯ごとの出し分けに柔軟 • 動的にUIを変えやすい (Bad ⬇) • トップバーを固定で出し続けられない

    (あまり問題にはならない？) •毎回トップバーの記述が必要 できるだけトップバーの実装を共通化 させる ②トップバーを画⾯の中に置く Nav Graph Screen1, Screen2... TopBar

23. Good ⬆ • ①②のいいとこどり • 柔軟性を持たせたいときだけ内側の トップバーを使える Bad ⬇ •

    アニメーションを調整する必要があ る ③画⾯ごとに外のトップバーを使うか判断する Nav Graph if (useOutsideBar) TopBar Screen1, Screen2... 設定クラス useOutsideBar = true false true 設定クラスは 表⽰・⾮表⽰だけ

24. Nav Graph ④ボトムバーのある画⾯をNested Naviga-onにする • Good ⬆ • 設定クラス等で隠す必要がない •

    2つのNavHostのネストが必要 ※通常のNested Graphでは実現でき ない Bad ⬇ • navControlerが２つあり、使い分けが 必要 • deeplinkの動作に注意 Bottom Bar Nested Graph Screen1, Screen2... Screen3, Screen4... ボトムバーのある画⾯だけ ネストグラフにまとめる

25. ログ

26. BackStackをログにとる •デバッグ環境でBackStackを記録 •画⾯遷移の履歴、BackStackの積まれ⽅ •Crashly-csのクラッシュログに送る •Crashly3csに関してはAnaly3csのScreenViewを設定しておくとパ ンくずリストで⾒れる •ただし全画⾯で指定しておく必要がある BirdListView

27. まとめ

28. 本⽇話したこと •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •⾒通しのよいNaviga3on実装を⽬指しましょう