Navigation Componentで先に知っておきたかったポイント

* Navigation Component が、内部でどのような挙動をしているのか解説します
* 挙動を理解した後に Navigation Component でできることや、制約について話します

Transcript

2. • 星川 貴樹 (@oboenikui) • エムスリー株式会社所属 (新卒3年目) • すき ◦ Android ◦ プロ野球観戦 ◦ ネタTシャツ お ぼ え に く い
3. • 会社で作っている新規アプリにNavigation Componentを導入しま した • 機能紹介記事は多くありますが、動作に関する解説があまり多くなさ そうだった & 動作を知らないためにモヤモヤしたことがありました • Navigation Componentがどのように動作しているかを理解したら スッキリ！
4. • Navigation Component が、内部でどのような挙動をしているの か解説します • 挙動を理解した後に Navigation Component でできることや、 制約について話します
5. • 特に言及されてないところは 2.2.0-rc02 での情報です • 標準の機能（想定される使い方）として提供されていないという意味 で「できない」という表現を使います • コードなどはスペースの都合上端折って書いているところがあります
7. • 画面遷移を、決まった原則に従っ て実装するためのライブラリ • 原則や実装方法などはここ1年で多 くの方が解説してくださっている ので割愛 https://developer.android.com/guide/navigation https://droidkaigi.jp/2019/timetable/70415 https://developer.android.com/guide/navigation /navigation-getting-started より引用
8. • 1つのActivityにおけるFragmentや他Activityへの遷移をXMLで 定義する • 複雑なFragment遷移を良い感じにコントロールしてくれる • Navigation要素 (ToolbarやBottomNavigationなど) と連携 して良い感じの遷移を簡単に記述できる
9. • なぜpopUpToオプションに <navigation> のIDを指定する場合が ある？ • Fragmentをキャッシュできないの？ • マルチモジュール構成のプロジェクトでのベストプラクティスは？ • …… 仕組みを先に理解しないとモヤモヤが残る
11. • XMLで定義したグラフ（木構造） • <navigation> が内部ノード, <fragment> <activity> <dialog> が葉ノードになる ◦ これらのノードをNavDestinationと呼ぶ • <action> <argument> <deepLink> は別扱い
12. • NavController#navigate メソッドでdestinationとして指定 できるもの ◦ ただし <action> <deepLink> は別物 • <action> <deepLink> <argument> を持つことが可能 ◦ これらはNavDestinationのプロパティみたいなもの ◦ <action> に関しては <activity> では使えない
13. <navigation android:id="@+id/navigation_a" app:startDestination="@+id/fragment_a1"> <fragment android:id="@+id/fragment_a1"/> <fragment android:id="@+id/fragment_a2"/> <navigation android:id="@+id/navigation_b" app:startDestination="@id/fragment_b1"> <fragment android:id="@+id/fragment_b1"/> <fragment android:id="@+id/fragment_b2"/> </navigation> <navigation android:id="@+id/navigation_c" app:startDestination="@id/fragment_c"> <fragment android:id="@+id/fragment_c"/> <activity android:id="@+id/activity_c"/> </navigation> </navigation>
15. Actionは遷移時のオプションをまと めたショートカットみたいなもの Actionを使わずに遷移もできるがこ こでは説明の簡略化のため割愛する
16. 【見かけの挙動】 <navigation> へのactionでは Start Destinationへ更に遷移する ここでは見かけ上 <fragment A1> → <fragment B1> という遷移
17. 【本質的な話】 <fragment A1> は親ノードである <navigation A> の子ノードだったら 遷移可能。そのため <fragment A1> → <navigation B> の遷移が可能 親の子ノード 親の子ノード ではない者達 親
19. 【見かけの挙動】 <fragment B2> から <fragment C> への遷移
20. 親の子ノード 親の子ノードではない者達 親の子ノード ではない者達 親 【本質的な話】 <fragment B2> は親の親ノードであ る <navigation A> の子ノードだっ たら遷移可能。そのため <fragment B2> → <navigation C> の遷移が可能
21. 親の親の 子ノード 親 親の親 【本質的な話】 <fragment B2> は親の親ノードであ る <navigation A> の子ノードだっ たら遷移可能。そのため <fragment B2> → <navigation C> の遷移が可能 親や親の親の子ノードではない者達 親の子ノード
23. 親 親の子ノード ではない者達 親の子ノード 【本質的な話】 先祖ノードから辿れないノードへは Actionでは直接遷移できない
24. 親が知らない 行き先
25. 親が知らない 行き先 Deep Linkは遷移可能なノードを ルートから全探索するので理論上 どこへも遷移できる ルート 誰かこのDeep Link扱えない？
26. 親が知らない 行き先 Deep Linkは遷移可能なノードを ルートから全探索するので理論上 どこへも遷移できる ルート 誰かこのDeep Link扱えない？ 無理 無理 わからん、聞いてみる わからん、聞いてみる
27. 親が知らない 行き先 Deep Linkは遷移可能なノードを ルートから全探索するので理論上 どこへも遷移できる ルート 誰かこのDeep Link扱えない？ 無理 無理 無理 できるよ 誰かこのDeep Link扱えない？
28. • XMLをパースしてNavGraphを構築したり、実際の遷移処理を行うク ラス • NavControllerはFragmentManagerとは別に、遷移した NavDestinationをBack stackとして保持する
29. NavControllerの Back stackのイメージ
30. <navigation> タグも スタックに積まれる
43. Activity遷移は管理する必要 がないのでstackに積まない
45. 積み残った<navigation>も 同時に整理される
46. • popUpToで指定したdestinationがBack stackに積まれていた場 合は、そこまでpopする機能 • popUpToInclusive = true ならそのdestinationもpopする popUpToInclusive = false ならその手前までpopする
47. popUpTo に <navivation A> を設定した場合 ここまでの stackを popする
48. popUpTo に <navivation A> を設定した場合
49. popUpTo に <navivation A> を設定した場合
50. popUpTo に <navivation A> を設定した場合 popUpTo にルートの <navigation> を指定 するのは、Back stackをクリアするのと同義
52. • <navigation> 直下に <action> を設定すると、どの子孫ノードからも 実行できるActionが作られる <navigation ...> <fragment android:id="@+id/frag_a1"> <!-- Fragment A1からのみ実行可能 --> <action app:destination="@id/actv_a"/> </fragment> <fragment android:id="@+id/frag_a2"/> <activity android:id="@+id/actv_a"/> </navigation> よく解説ブログに出てくる Action
53. • <navigation> 直下に <action> を設定すると、どの子孫ノードからも 実行できるActionが作られる <navigation ...> <fragment android:id="@+id/frag_a1"/> <fragment android:id="@+id/frag_a2"/> <activity android:id="@+id/actv_a"/> <!-- どのFragmentからも実行可能 --> <action android:id="@+id/action_actv_a" app:destination="@id/actv_a" /> </navigation> Global Action
54. Google I/Oでの発表によると、 • 各モジュールごとにNavigation XML を作る • メインモジュールのNavigation XML でincludeする のが想定解の模様 https://youtu.be/JFGq0asqSuA?t=1130
55. Google I/Oでの発表によると、 • 各モジュールごとにNavigation XML を作る • メインモジュールのNavigation XML でincludeする のが想定解の模様 https://youtu.be/JFGq0asqSuA?t=1130 <!-- main_navigation.xml --> <navigation ...> <include app:graph="@navigation/login_navigation" /> <include app:graph="@navigation/home_navigation" /> ... </navigation>
56. <!-- main_navigation.xml --> <navigation ...> <include app:graph="@navigation/login_navigation" /> <include app:graph="@navigation/home_navigation" /> ... </navigation>
57. <!-- main_navigation.xml --> <navigation ...> <navigation android:id="@+id/login_navigation" /> <navigation android:id="@+id/home_navigation" /> ... </navigation>
58. • 2.3.0から？使えるようになるみたいです • 現在SNAPSHOT版が公開されてます https://developer.android.com/guide/navigation/navigation-dynamic
60. • 例えば右のようなアプリで と遷移した後、バックボタンを押したらどう遷移 するのが理想か • Navigationではスタック操作で可能な遷移のみ 実現できるので以下のような遷移ができない
61. • BottomNavigationView などのナビゲーション用Viewで遷移する 場合、Fragmentが新たに生成される ◦ Google Newsアプリが近い挙動 • popBackStack しない限り生成済みのFragmentには戻らない、と いう挙動が徹底されている • ViewModelに表示に関する全てのデータを持たせ、Fragmentはそ れに従って表示するだけ、というのを徹底する思想？
62. SafeArgs Pluginの問題だが、includeしたNavigation XML内で定 義された <argument> を読んでくれない
63. <!-- main_navigation.xml --> <navigation ...> <include app:graph="@navigation/sub_navigation"/> <action android:id="@+id/action_main_to_sub" app:destination="@+id/frag_sub"/> </navigation> <!-- sub_navigation.xml --> <navigation ...> <fragment android:id="@+id/frag_sub"> <argument android:name="arg" app:argType="string" .../> </fragment> </navigation>
64. // 理想: Stringを引数に取るメソッドが生成されてほしい MainNavigationDirections.actionMainToSub("hoge")
65. // 理想: Stringを引数に取るメソッドが生成されてほしい MainNavigationDirections.actionMainToSub("hoge") // 現実: 引数を何も取らないメソッドが生成される MainNavigationDirections.actionMainToSub()
66. <!-- main_navigation.xml --> <navigation ...> <include app:graph="@navigation/sub_navigation"/> <action android:id="@+id/action_main_to_sub" app:destination="@+id/frag_sub"> <argument android:name="arg" app:argType="string" .../> <!-- ここ --> </action> </navigation> <!-- sub_navigation.xml --> <navigation ...> <fragment android:id="@+id/frag_sub"> <argument android:name="arg" app:argType="string" .../> </fragment> </navigation>
67. navigation-safe-args-generatorに実装があるので最新の実装は こちらから確認できます https://android.googlesource.com/platform/frameworks/support/+/androidx-m aster-dev/navigation/navigation-safe-args-generator/
68. • Navigation Component の動作について解説をした • Navigation Component の中の事情を知った上で、 何ができるか/できないかについて解説した • Android Advent Calendar にも関連記事を書く予定 • 実験用に作ったサンプルリポジトリはこちら （最新版をpushし忘れたので後で確認してください^^;） https://github.com/oboenikui/navigation-experiment
69. <navigation android:id="@+id/navigation_a" app:startDestination="@+id/fragment_a1"> <fragment android:id="@+id/fragment_a1" .../> <fragment android:id="@+id/fragment_a2" .../> <navigation android:id="@+id/navigation_b" ...> <navigation android:id="@+id/navigation_c" ...> </navigation>
70. <navigation android:id="@+id/navigation_a" app:startDestination="@+id/fragment_a1"> <fragment android:id="@+id/fragment_a1" .../> <fragment android:id="@+id/fragment_a2" .../> <navigation android:id="@+id/navigation_b" ...> <navigation android:id="@+id/navigation_c" ...> </navigation>
71. <navigation android:id="@+id/navigation_a" ...> <fragment .../> <fragment .../> <navigation android:id="@+id/navigation_b" app:startDestination="@+id/fragment_b1"> <fragment android:id="@+id/fragment_b1" .../> <fragment android:id="@+id/fragment_b2" ...> </navigation> <navigation android:id="@+id/navigation_c" ...> </navigation>
72. <navigation android:id="@+id/navigation_a" app:startDestination="@+id/fragment_a1"> <fragment android:id="@+id/fragment_a1" .../> <fragment android:id="@+id/fragment_a2" .../> <navigation android:id="@+id/navigation_b" ...> <navigation android:id="@+id/navigation_c" ...> </navigation>
73. <navigation android:id="@+id/navigation_a" ...> <fragment .../> <fragment .../> <navigation android:id="@+id/navigation_b" ...> <navigation android:id="@+id/navigation_c" app:startDestination="@+id/fragment_c"> <fragment android:id="@+id/fragment_c" .../> <activity android:id="@+id/activity_c" ...> </navigation> </navigation>