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

• 星川貴樹 (@oboenikui) • エムスリー株式会社所属 (新卒3年目) • すき ◦
Android ◦ プロ野球観戦 ◦ ネタTシャツおぼえにくい

• 会社で作っている新規アプリにNavigation Componentを導入しました • 機能紹介記事は多くありますが、動作に関する解説があまり多くなさそうだった & 動作を知らないためにモヤモヤしたことがありました •
Navigation Componentがどのように動作しているかを理解したらスッキリ！

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

• 特に言及されてないところは 2.2.0-rc02 での情報です • 標準の機能（想定される使い方）として提供されていないという意味で「できない」という表現を使います • コードなどはスペースの都合上端折って書いているところがあります

• 画面遷移を、決まった原則に従って実装するためのライブラリ • 原則や実装方法などはここ1年で多くの方が解説してくださっているので割愛 https://developer.android.com/guide/navigation https://droidkaigi.jp/2019/timetable/70415 https://developer.android.com/guide/navigation
/navigation-getting-started より引用

• 1つのActivityにおけるFragmentや他Activityへの遷移をXMLで定義する • 複雑なFragment遷移を良い感じにコントロールしてくれる • Navigation要素 (ToolbarやBottomNavigationなど) と連携して良い感じの遷移を簡単に記述できる

• なぜpopUpToオプションに <navigation> のIDを指定する場合がある？ • Fragmentをキャッシュできないの？ • マルチモジュール構成のプロジェクトでのベストプラクティスは？ •
…… 仕組みを先に理解しないとモヤモヤが残る

• XMLで定義したグラフ（木構造） • <navigation> が内部ノード, <fragment> <activity> <dialog> が葉ノードになる ◦
これらのノードをNavDestinationと呼ぶ • <action> <argument> <deepLink> は別扱い

• NavController#navigate メソッドでdestinationとして指定できるもの ◦ ただし <action> <deepLink> は別物 •
<action> <deepLink> <argument> を持つことが可能 ◦ これらはNavDestinationのプロパティみたいなもの ◦ <action> に関しては <activity> では使えない

Actionは遷移時のオプションをまとめたショートカットみたいなもの Actionを使わずに遷移もできるがここでは説明の簡略化のため割愛する

【見かけの挙動】 <navigation> へのactionでは Start Destinationへ更に遷移するここでは見かけ上 <fragment A1> → <fragment
B1> という遷移

【本質的な話】 <fragment A1> は親ノードである <navigation A> の子ノードだったら遷移可能。そのため <fragment A1>
→ <navigation B> の遷移が可能親の子ノード親の子ノードではない者達親

【見かけの挙動】 <fragment B2> から <fragment C> への遷移

親の子ノード親の子ノードではない者達親の子ノードではない者達親【本質的な話】 <fragment B2> は親の親ノードである
<navigation A> の子ノードだったら遷移可能。そのため <fragment B2> → <navigation C> の遷移が可能

親の親の子ノード親親の親【本質的な話】 <fragment B2> は親の親ノードである <navigation
A> の子ノードだったら遷移可能。そのため <fragment B2> → <navigation C> の遷移が可能親や親の親の子ノードではない者達親の子ノード

親親の子ノードではない者達親の子ノード【本質的な話】先祖ノードから辿れないノードへは Actionでは直接遷移できない

親が知らない行き先

親が知らない行き先 Deep Linkは遷移可能なノードをルートから全探索するので理論上どこへも遷移できるルート誰かこのDeep Link扱えない？

親が知らない行き先 Deep Linkは遷移可能なノードをルートから全探索するので理論上どこへも遷移できるルート誰かこのDeep Link扱えない？無理
無理わからん、聞いてみるわからん、聞いてみる

親が知らない行き先 Deep Linkは遷移可能なノードをルートから全探索するので理論上どこへも遷移できるルート誰かこのDeep Link扱えない？無理
無理無理できるよ誰かこのDeep Link扱えない？

• XMLをパースしてNavGraphを構築したり、実際の遷移処理を行うクラス • NavControllerはFragmentManagerとは別に、遷移した NavDestinationをBack stackとして保持する

NavControllerの Back stackのイメージ

<navigation> タグもスタックに積まれる

Activity遷移は管理する必要がないのでstackに積まない

積み残った<navigation>も同時に整理される

• popUpToで指定したdestinationがBack stackに積まれていた場合は、そこまでpopする機能 • popUpToInclusive = true ならそのdestinationもpopする popUpToInclusive
= false ならその手前までpopする

popUpTo に <navivation A> を設定した場合ここまでの stackを popする

popUpTo に <navivation A> を設定した場合

popUpTo に <navivation A> を設定した場合 popUpTo にルートの <navigation> を指定するのは、Back
stackをクリアするのと同義

• <navigation> 直下に <action> を設定すると、どの子孫ノードからも実行できるActionが作られる <navigation ...> <fragment android:id="@+id/frag_a1">
 <action app:destination="@id/actv_a"/> </fragment> <fragment android:id="@+id/frag_a2"/> <activity android:id="@+id/actv_a"/> </navigation> よく解説ブログに出てくる Action

• <navigation> 直下に <action> を設定すると、どの子孫ノードからも実行できるActionが作られる <navigation ...> <fragment android:id="@+id/frag_a1"/>
<fragment android:id="@+id/frag_a2"/> <activity android:id="@+id/actv_a"/>  <action android:id="@+id/action_actv_a" app:destination="@id/actv_a" /> </navigation> Global Action

Google I/Oでの発表によると、 • 各モジュールごとにNavigation XML を作る • メインモジュールのNavigation XML でincludeする
のが想定解の模様 https://youtu.be/JFGq0asqSuA?t=1130

Google I/Oでの発表によると、 • 各モジュールごとにNavigation XML を作る • メインモジュールのNavigation XML でincludeする
のが想定解の模様 https://youtu.be/JFGq0asqSuA?t=1130  <navigation ...> <include app:graph="@navigation/login_navigation" /> <include app:graph="@navigation/home_navigation" /> ... </navigation>

<navigation ...> <include app:graph="@navigation/login_navigation" /> <include app:graph="@navigation/home_navigation"
/> ... </navigation>

<navigation ...> <navigation android:id="@+id/login_navigation" /> <navigation android:id="@+id/home_navigation"
/> ... </navigation>

• 2.3.0から？使えるようになるみたいです • 現在SNAPSHOT版が公開されてます https://developer.android.com/guide/navigation/navigation-dynamic

• 例えば右のようなアプリでと遷移した後、バックボタンを押したらどう遷移するのが理想か • Navigationではスタック操作で可能な遷移のみ実現できるので以下のような遷移ができない

• BottomNavigationView などのナビゲーション用Viewで遷移する場合、Fragmentが新たに生成される ◦ Google Newsアプリが近い挙動 • popBackStack しない限り生成済みのFragmentには戻らない、と
いう挙動が徹底されている • ViewModelに表示に関する全てのデータを持たせ、Fragmentはそれに従って表示するだけ、というのを徹底する思想？

SafeArgs Pluginの問題だが、includeしたNavigation XML内で定義された <argument> を読んでくれない

<navigation ...> <include app:graph="@navigation/sub_navigation"/> <action android:id="@+id/action_main_to_sub" app:destination="@+id/frag_sub"/>
</navigation>  <navigation ...> <fragment android:id="@+id/frag_sub"> <argument android:name="arg" app:argType="string" .../> </fragment> </navigation>

// 理想: Stringを引数に取るメソッドが生成されてほしい MainNavigationDirections.actionMainToSub("hoge")

// 理想: Stringを引数に取るメソッドが生成されてほしい MainNavigationDirections.actionMainToSub("hoge") // 現実: 引数を何も取らないメソッドが生成される MainNavigationDirections.actionMainToSub()

<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>  <navigation ...> <fragment android:id="@+id/frag_sub"> <argument android:name="arg" app:argType="string" .../> </fragment> </navigation>

navigation-safe-args-generatorに実装があるので最新の実装はこちらから確認できます https://android.googlesource.com/platform/frameworks/support/+/androidx-m aster-dev/navigation/navigation-safe-args-generator/

• Navigation Component の動作について解説をした • Navigation Component の中の事情を知った上で、何ができるか/できないかについて解説した •
Android Advent Calendar にも関連記事を書く予定 • 実験用に作ったサンプルリポジトリはこちら（最新版をpushし忘れたので後で確認してください^^;） https://github.com/oboenikui/navigation-experiment

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

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

More Decks by Takaki Hoshikawa

Other Decks in Programming

Featured

Transcript