グラフエディタの見かた
グラフエディタは前回も解説した通り、画面遷移を視覚的に表現し、操作するためのビューです(図4)。
ディスティネーション同士をドラッグ&ドロップによって矢印で結ぶことで、画面遷移を表現できるのは前回解説した通りです。今回はそれに加えて、上部のツールバー(図)の機能を確認していきましょう。
ツールバーは左から順に、次の機能を表しています。
-

-
ディスティネーションを追加する
-

- グラフをグループにまとめる
-

- スタート画面に設定する
-

- ディープリンクを設定する
-

- アクションを追加する
-

- グラフを整える
ほとんどの機能は属性ビューでも操作できるものなので、これらを活用してナビゲーションアーキテクチャコンポーネントを扱う方法については、後述します。
グラフエディタ独自の機能としては、「グラフを整える」機能があります。ディスティネーションを適当に配置していくと、グラフ全体の見通しが悪くなる場合があります(図6)。
ここで、グラフを整えるボタンを押すと、図7のようになります。
きれいになりました。とはいえ、あまり万能というわけでもなく、ディスティネーションにアクションの矢印がかぶってしまっている部分もあります。こういった部分については、人間が手作業で整えたほうがよいでしょう。
グラフをグループにまとめる機能もグラフエディタでの操作が必要ですが、こちらは次回の記事で解説します。
属性(Attributes)の見かた
属性ビューは、詳細設定を行うためのビューです(図8)。
ディスティネーションパネルやグラフビューにおける選択状態に応じて、次のものを設定の対象にします。
- ディスティネーション
- アクション
- ナビゲーショングラフ
それぞれ、設定できる項目が違うので、個別に解説します。
ディスティネーションの属性を設定する
ディスティネーションを選択している場合に表示されるのが、ディスティネーションの属性です(図9)。
それでは、1つずつ見ていきましょう。
Type属性
Type属性がFragmentになっているのが特徴です。アクティビティーをディスティネーションとして使った場合はActivity表記になることもありますが、こちらは本記事では扱いません。
Label属性
Label属性には、このディスティネーションで使われるレイアウトXMLのファイル名を記述すると公式ドキュメントに記述されていますが、実際にはヘッダーであるToolbarのデフォルトタイトルとして利用されるようです。Toolbarとの連携については次回の記事で解説します。
ID属性
ID属性は、このディスティネーションを表すIDです。図2のディスティネーションパネルに表示されている名前はこちらです。前回解説した通り、JavaやKotlinで画面遷移を実施する際に遷移先の名前として指定するのも、このIDになります。
Class属性
Class 属性はディスティネーション特有の項目です。このディスティネーションの実体となるフラグメントを指定します。
Arguments属性
Arguments(アーギュメント)はフラグメントの初期値です。通常のフラグメントを活用した開発に用いる Argumentsと同じ意味です。右上の「+」ボタンから追加できます(図10)。
表示されるダイアログに、名前と型、そしてデフォルト値を記入します(図11)。
記入を終えると、Argumentsが設定されます(図12)。
便利そうに見えますが、フラグメントにどんなデータを渡すか、そしてフラグメント側でデータを取り出す際に所定の名前を利用するかは、プログラマに委ねられています。そのため、これだけではあまり便利になりません。ここで終わると中途半端なので、便利にするためのツールとして、「SafeArgs」というライブラリが用意されています。SafeArgsの使い方については、次回の記事で解説します。
Actions属性
Actionsは、このディスティネーションから出て行くときに使用されるアクションの一覧です。新規に作成する場合は、この属性の右上にある「+」ボタンか、グラフエディタの「アクションを追加する」をクリックして、追加ダイアログを表示します。
Fromが遷移元、Destinationが遷移先です。IDはあまりプログラマの目に触れない作りになっているので、自動生成です。残りの項目については、後述するアクションの属性と同じなので、ここでは詳しい解説を割愛します。
Deep Links属性
Deep Linksは、ブラウザ等のページ遷移をフックしてアプリを起動する、ディープリンクのための設定です。Argumentsと同様に、右上の「+」ボタンから追加して、ダイアログを表示します(図14)。
「Auto Verify」というチェックボックスがありますが、これはWebサイトの所有権を確認する場合に使用するもので、用途によっては必要ありません。
作成が完了すると、図15のようになります。
なお、初めてナビゲーションアーキテクチャコンポーネントでディープリンクを設定する場合には、 AndroidManifest.xmlにリスト1の設定を行う必要があります。
<activity android:name=".MainActivity"> <!-- ↓これを追加する --> <nav-graph android:value="@navigation/nav_graph" />
これで、ブラウザでhttps://www.example.com/hogeへのリンクをタップしたときに、この画面が開くようになりました(図16)。
手元で試す際には、1つ注意点があります。ChromeのアドレスバーにURLを打ち込んでも、ディープリンクが発動しないのです。そのため、デバッグを行う際には、ローカルでも構わないので、どこかのWebページに次のリンクを仕込んで、それをタップする必要があります。
よろしければ検証用端末のブラウザで本記事を開いて、上記のリンクをタップしてください。
アクションの属性を設定する
アクションの矢印を選択した状態で表示されるのが、アクションの属性です(図17)。
デスティネーションのActions属性との違いとして、From項目がありません。これは、一度設定されたアクションが遷移元のディスティネーションの一部として登録される内部構造に由来しています。
Type属性
Type属性がActionになっているのが特徴です。
ID属性
ID属性は、このアクションを表すIDです。基本的には自動生成されたものを利用しますが、次回解説するSaveArgsを利用する際には自分でIDを決めたほうが扱いやすいこともあります。
Destination属性
Destination属性はアクション特有の項目です。遷移先のディスティネーションを指定します。
Animations属性
Animations属性はアクション特有の項目です。遷移時に画面が左や右へとシュッと動く、アニメーションを設定できます。設定できる内容自体は従来アクティビティーやフラグメントの切り替えに設定していたものと同じです。
res/anim/*.xmlに記述したアニメーションリソースを表す、 @anim/**を指定することで、ナビゲーションアーキテクチャコンポーネントによる画面遷移にも、アニメーションを適用できます。次回の記事で解説します。
Argument Default Values属性
Argument Default Values属性には、遷移先のディスティネーションが持つArgumentsに対して、デフォルト値を上書きします。例えば、図11でディスティネーションの属性に設定したinitialCountのデフォルト値は0でしたが、図18のように、このアクションを経由したときだけデフォルト値を1にすることもできます。
画面遷移の経路によって画面のモードを切り替えるときなどには、便利そうです。
Pop Behavior属性
Pop Behavior属性はアクション特有の項目です。いわゆる「戻る」操作をした際の挙動を設定します。Pop To項目にディスティネーションを設定すると、「戻る」操作をした際に、そのディスティネーションが一番上になるようにバックスタックがポップされます。
加えて、Inclusive項目をチェックすると、Pop Toに設定したディスティネーション以外のディスティネーションがすべてポップされ、Pop Toのものだけが残ります。ログイン画面に遷移するときなど、バックスタックに何も残したくない場合に有用です。
Launch Options属性
Launch Options属性はアクション特有の項目です。画面の起動オプションを設定します。Single Topという名前が示す通り、これは、アクティビティーの起動オプションであるIntent.FLAG_ACTIVITY_SINGLE_TOPと同じ振る舞いを目指しているものです。現在画面スタックの最上位にあるディスティネーションへのアクションを実行しても、スタックが新たに積まれない、といった設定です。






