Navigation Component Codelabメモ

自分用メモ。Codelabを進めながら箇条書きした >> Navigation Codelab

1. Introduction

• Navigation Architecture Componentはアプリで絶対に必要となるナビゲーションを簡単にしてくれるライブラリ
• 取り入れることで得られるメリット
  • Fragment Transactionのハンドリングが楽になる
  • Upボタン、Backボタンの正しい振る舞いを取り入れられる
  • デフォルト遷移アニメーションが含まれている
  • ディープリンク操作の手厚いサポート
  • ちょっと付け加えるだけでNavigation Drawer、Bottom Navigationと連携できる
  • 遷移時の値の受け渡しをType Safeに行える
  • GUIで遷移を組める
• 実際にCodelabでやること
  • 定義済、イベントをハンドリングしての遷移の実装
  • Sub Navigation
  • Menu Navigation
  • Bottom Navigation
  • deeplink

2. Setup Your Environment

省略

3. Introducing the Navigation Graph

• 「アプリユーザが遷移可能な画面」をきちんと定義することが大切。
• ↑をdestinationと呼ぶ
• Navigation Componentを使用すれば、Fragment destinationの定義がよく出る
• Activityのdestinationの定義もできる
• 必要とあればActivity、Fragment以外もサポート可能（Add support for new destination types）

Navigation Graph

• 画面遷移はNavigation Graphで視覚的に表せる
• ユーザの到達しうる画面を全てここに定義する
• Navigation Editorを使えば容易に確認、定義できる

Exploring the Navigation Editor

1. res/navigation/hogehoge.xmlを開く
2. Designタブにすると確認できる

• destination間に引かれる線をactionと呼ぶ

Anatomy of a navigation XML file（navigation xmlの詳細）

• <navigation>がrootとなる
• <navigation> には、1つまたは複数の宛先が含まれる
• app:startDestinationで、アプリを開いたときにデフォルトで起動されるdestinationを指定する
• android:id でidを定義
• android:name で、そのdestinationに到達したときにインスタンス化するFragmentを定義
• tools:layout で、開発中に参照するレイアウトファイルを定義できる

4. Add a Destination to the Navigation Graph

• destinationを追加するボタンをクリックして、Fragmnetを選択して追加する

5. Using the Navigation Graph to Navigate

Activities and Navigation

• ナビゲーションの原則としてBottom Navigationなどのグローバルナビゲーションを含むアプリのエントリポイントとしてのActivityがあることが奨励されている
• 対してFragmentはActivityの中の実際のレイアウトになる
• 原則を踏襲するためにNavHostFragmentをアプリに入れる必要あり
• NavHostFragmentはdestinationを入れ替え出しするための箱
• android:name="androidx.navigation.fragment.NavHostFragment", app:defaultNavHost="true"を定義することで戻るボタンと挙動を統一できる
• app:navGraph="@navigation/hogehoge" でavHostFragmentとNavigation Graphを関連付ける

NavigationController

• ボタンクリックをトリガーにして画面遷移させたい場合、このクラスを使う
• NavControllerクラスがあり、NavHostFragmentのFragment切り替えを行うことができる
• NavControllerは以下のstatic関数で取得できる
  • Navigation.findNavController(activity: Activity, @Idres viewId: Int)
  • Navigation.findNavController(view: View)
  • NavHostFragment.findNavController(fragment: Fragment)
  • View.findNavController()
• ボタンクリック時に遷移させたいというときには、Navigation.createNavigateOnClickListener(@IdRes destId: Int, bundle: Bundle)

6. Change the Navigation Transition

• navigate(...)は、何も指定しないとTransition Animationはパチパチ切り替わるだけ
• NavOptionsで指定してあげる

7. Navigate using actions

• Navigation Graphにて、destination間に描画される線をactionと呼ぶ
• Navigation Graph内で<action>を定義していればNavigation.createNavigateOnClickListener(R.id.next_action, null)と、そのactionを指定するだけでTransition Animationを利用できる

8. Navigating using menus, drawers and bottom navigation

• NavigationUI...現在のNavigationGraph上のdestinationと同じIDを持つメニューがあれば、そのメニューをタップすると対象のdestinationに遷移するようになる

9. [Optional] Using type safe argument bundles for navigation

• app/build.gradleにapply plugin: 'androidx.navigation.safeargs'を追加する
• Navigation Graph内に<argument>を追記
• ...Argsクラスができるみたい

10. Deep Linking to a destination

• Navigation Componentはdeep linkもサポートしている
• NavDeepLinkBuilder使えばOK

By default NavDeepLinkBuilder will start your launcher Activity. You can override this behavior by passing in an activity as the context or set an explicit activity class via setComponentName().

• Deeplink時にどのようにしてBackstackがつまれるか
  • Navigation Graphから決定される
  • 親Activityが定義されている場合、そのActivityもBackstackにつまれる

11. Associating a web link with a destination

• 今まではintent-filterでweb linkをハンドリングしていたが、Navigation Graphのdestinationに定義することでweb linkをハンドリングする
  • <nav-graph>をAndroidManifest.xmlに追加する
• <deeplink>をdestinationに追加する
  • app:url属性が必要
• URLのパターンマッチなど以下をサポートしている
  • http or httpsのスキーマは指定しなくともやってくれる
  • {hogehoge}をプレースホルダーとして使える、１文字以上とマッチする
    • 格納されるStringの値は、Bundleから同じkeyで取り出せる
  • .*を使って0文字以上の文字を照合できる
  • NavControllerはACTION_VIEWを自動で検知し、一致するものを探す

12. [Optional] Try navigating on your own

• 自分の力で頑張って！って書いてある

13. Congratulations!

• 終わり