画面遷移を管理してくれるナビゲーションコンポーネント

一歩進んだAndroidアプリ開発ができる「Android Jetpack」入門 第15回

ナビゲーショングラフの作り方

　次に、ナビゲーショングラフの作り方を紹介します。

ナビゲーショングラフはnavigationフォルダに作成

　リスト4の（2）の属性値からもわかるように、ナビゲーショングラフはres/navigationフォルダに作成することになっています。ファイルそのものは、作成したnavigationを右クリックし、「New > Navigation Resource File」メニューを選択することで表示される図4のウィザード画面を利用するのが便利です。

　図4ではファイル名をnav_graphとしていますが、こちらは何でもかまいません。ただし、リスト4の（2）の属性値と一致している必要があります。

図4：ナビゲーショングラフファイルを作成するウィザード画面

ナビゲーションエディタ上でデスティネーションを追加する

　ファイルが作成されると、初期状態では、図5の画面となっています。

図5：ナビゲーションエディタの初期画面

　画面真ん中のメッセージあるように、ナビゲーションエディタ上で遷移に関係する画面を追加する場合は、左上のアイコンをクリックします。なお、ナビゲーションコンポーネントでは、この遷移に関係する画面類のことをデスティネーション（Destination）と言います。

　アイコンをクリックすると、図6の吹き出しが表示されます。ここから、追加するデスティネーションを選択します。

図6：追加するデスティネーションを選択する吹き出し

　あらかじめプロジェクトにフラグメントが存在する場合は、それがリスト表示されます。一方、［Create new destination］を選択することで、図7のフラグメントの追加ウィザードが起動するので、そこから新規に追加することもできます。

図7：フラグメントの追加ウィザード

　ここでは、あらかじめ作成していたメモリスト画面であるfragment_memo_listを選択します。すると、ナビゲーションエディタ上にfragment_memo_listが追加されて、図8の画面になります。

図8：fragment_memo_listが追加されたナビゲーションエディタ画面

　同様に、メモ詳細画面であるfragment_memo_detailを選択します。するとナビゲーションエディタは、図9の画面になります。

図9：fragment_memo_detailが追加されたナビゲーションエディタ画面

ナビゲーションエディタ上でアクションを追加する

　デスティネーションが追加できたところで、ナビゲーションエディタに対して遷移を追加していきます。このデスティネーション間の遷移のことをアクション（Action）といいます。これは、遷移元デスティネーションのアイコンを遷移先デスティネーションにドラッグして繋ぐだけです。本サンプルでは、メモリスト画面からメモ詳細画面への遷移なので、fragment_memo_listのアイコンをドラッグしてfragment_memo_detailに繋ぎます。すると、図10のように矢印が繋がった画面になり、アクションが追加されたことになります。

図10：アクションが追加されたナビゲーションエディタ画面

ナビゲーショングラフの実体はXMLデータ

　これでナビゲーショングラフが作成されたことになります。ここで、このナビゲーショングラフの実体を確認しておきましょう。そもそも、ナビゲーショングラフファイルの拡張子がxmlであることからわかるように、ナビゲーショングラフの実体はXMLデータです。レイアウトエディタ同様に、画面右上のアイコンをクリックすることで、画面がコードモードになり、その内容を確認できます。これは、リスト5の通りです。

［リスト5］res/navigation/nav_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation  // (1)
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/navGraph"  // (2)
  app:startDestination="@id/memoListFragment">  // (3)

  <fragment  // (4)
    android:id="@+id/memoListFragment"  // (5)
    android:name="com.….MemoListFragment"  // (6)
    android:label="fragment_memo_list"  // (7)
    tools:layout="@layout/fragment_memo_list" >  // (8)
    <action  // (9)
      android:id="@+id/action_memoListFragment_to_memoDetailFragment"  // (10)
      app:destination="@id/memoDetailFragment" />  // (11)
  </fragment>
  <fragment  // (4)
    android:id="@+id/memoDetailFragment"
    android:name="com.….MemoDetailFragment"
    android:label="fragment_memo_detail"
    tools:layout="@layout/fragment_memo_detail" >
  </fragment>
</navigation>

　リスト5を見るとわかるように、ナビゲーショングラフのルートタグは（1）のnavigationタグです。そしてそのルートタグには、（2）のid属性と（3）のstartDestination属性が記述されています。startDestination属性は、その名称通り、このアプリケーションの最初の表示画面を設定します。これらの値は、ナビゲーションエディタを利用すると、自動で設定してくれるようになっています。

　各デスティネーションは、（4）のfragmentタグで定義します。これらもナビゲーションエディタ上で追加するだけで、属性も含めて自動で設定してくれます。

　実際、図8の右のAttributesツールウィンドウを参照すると、リスト5の（5）～（7）と同内容が見えます。それぞれの属性は、特に説明が必要ないぐらいお馴染みのもので、id属性の（5）、フラグメントクラスを指定する（6）のname属性、デスティネーションの名称である（7）のlabel属性、レイアウトファイルを指定する（8）のlayout属性です。

　アクションに関しては、遷移元のデスティネーションであるfragmentタグ内に、（9）のように、actionタグを定義します。属性は、少なくとも2個記述する必要があり、（10）のid属性と、遷移先デスティネーションのidを指定する（11）のdestinationです。もっとも、こちらもナビゲーションエディタ上で矢印を繋ぐだけで、自動で作成されます。