SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Android Studio 3.3 の新機能

「ナビゲーションエディタ」をさらに使いこなす! ナビゲーションアーキテクチャコンポーネントでできること

Android Studio 3.3 の新機能 第2回

グラフエディタの見かた

 グラフエディタは前回も解説した通り、画面遷移を視覚的に表現し、操作するためのビューです(図4)。

図4:グラフエディタ
図4:グラフエディタ

 ディスティネーション同士をドラッグ&ドロップによって矢印で結ぶことで、画面遷移を表現できるのは前回解説した通りです。今回はそれに加えて、上部のツールバー(図)の機能を確認していきましょう。

図5:グラフエディタのツールバー
図5:グラフエディタのツールバー

 ツールバーは左から順に、次の機能を表しています。

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

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

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

  • グラフをグループにまとめる
  • [スタート画面に設定する

  • スタート画面に設定する
  • [ディープリンクを設定する

  • ディープリンクを設定する
  • [アクションを追加する

  • アクションを追加する
  • [グラフを整える

  • グラフを整える

 ほとんどの機能は属性ビューでも操作できるものなので、これらを活用してナビゲーションアーキテクチャコンポーネントを扱う方法については、後述します。

 グラフエディタ独自の機能としては、「グラフを整える」機能があります。ディスティネーションを適当に配置していくと、グラフ全体の見通しが悪くなる場合があります(図6)。

図6:雑に配置されたグラフ
図6:雑に配置されたグラフ

 ここで、グラフを整えるボタンを押すと、図7のようになります。

図7:整えられたグラフ
図7:整えられたグラフ

 きれいになりました。とはいえ、あまり万能というわけでもなく、ディスティネーションにアクションの矢印がかぶってしまっている部分もあります。こういった部分については、人間が手作業で整えたほうがよいでしょう。

 グラフをグループにまとめる機能もグラフエディタでの操作が必要ですが、こちらは次回の記事で解説します。

属性(Attributes)の見かた

 属性ビューは、詳細設定を行うためのビューです(図8)。

図8:属性ビュー(右側)
図8:属性ビュー(右側)

 ディスティネーションパネルやグラフビューにおける選択状態に応じて、次のものを設定の対象にします。

  • ディスティネーション
  • アクション
  • ナビゲーショングラフ

 それぞれ、設定できる項目が違うので、個別に解説します。

ディスティネーションの属性を設定する

 ディスティネーションを選択している場合に表示されるのが、ディスティネーションの属性です(図9)。

図9:ディスティネーションに設定可能な属性
図9:ディスティネーションに設定可能な属性

 それでは、1つずつ見ていきましょう。

Type属性

 Type属性がFragmentになっているのが特徴です。アクティビティーをディスティネーションとして使った場合はActivity表記になることもありますが、こちらは本記事では扱いません。

Label属性

 Label属性には、このディスティネーションで使われるレイアウトXMLのファイル名を記述すると公式ドキュメントに記述されていますが、実際にはヘッダーであるToolbarのデフォルトタイトルとして利用されるようです。Toolbarとの連携については次回の記事で解説します。

ID属性

 ID属性は、このディスティネーションを表すIDです。図2のディスティネーションパネルに表示されている名前はこちらです。前回解説した通り、JavaやKotlinで画面遷移を実施する際に遷移先の名前として指定するのも、このIDになります。

Class属性

 Class 属性はディスティネーション特有の項目です。このディスティネーションの実体となるフラグメントを指定します。

Arguments属性

 Arguments(アーギュメント)はフラグメントの初期値です。通常のフラグメントを活用した開発に用いる Argumentsと同じ意味です。右上の「+」ボタンから追加できます(図10)。

図10:Argumentsを設定する
図10:Argumentsを設定する

 表示されるダイアログに、名前と型、そしてデフォルト値を記入します(図11)。

図11:Argumentsの情報を記入する
図11:Argumentsの情報を記入する

 記入を終えると、Argumentsが設定されます(図12)。

図12:Argumentsが設定された
図12:Argumentsが設定された

 便利そうに見えますが、フラグメントにどんなデータを渡すか、そしてフラグメント側でデータを取り出す際に所定の名前を利用するかは、プログラマに委ねられています。そのため、これだけではあまり便利になりません。ここで終わると中途半端なので、便利にするためのツールとして、「SafeArgs」というライブラリが用意されています。SafeArgsの使い方については、次回の記事で解説します。

Actions属性

 Actionsは、このディスティネーションから出て行くときに使用されるアクションの一覧です。新規に作成する場合は、この属性の右上にある「+」ボタンか、グラフエディタの「アクションを追加する」をクリックして、追加ダイアログを表示します。

図13:アクションの追加ダイアログ
図13:アクションの追加ダイアログ

 Fromが遷移元、Destinationが遷移先です。IDはあまりプログラマの目に触れない作りになっているので、自動生成です。残りの項目については、後述するアクションの属性と同じなので、ここでは詳しい解説を割愛します。

Deep Links属性

 Deep Linksは、ブラウザ等のページ遷移をフックしてアプリを起動する、ディープリンクのための設定です。Argumentsと同様に、右上の「+」ボタンから追加して、ダイアログを表示します(図14)。

図14:ディープリンクで検知するURIを入力する
図14:ディープリンクで検知するURIを入力する

 「Auto Verify」というチェックボックスがありますが、これはWebサイトの所有権を確認する場合に使用するもので、用途によっては必要ありません。

 作成が完了すると、図15のようになります。

図15:ディスティネーションにディープリンクを設定した
図15:ディスティネーションにディープリンクを設定した

 なお、初めてナビゲーションアーキテクチャコンポーネントでディープリンクを設定する場合には、 AndroidManifest.xmlにリスト1の設定を行う必要があります。

[リスト1]AndroidManifest.xml
<activity android:name=".MainActivity">
  <!-- ↓これを追加する -->
  <nav-graph android:value="@navigation/nav_graph" />

 これで、ブラウザでhttps://www.example.com/hogeへのリンクをタップしたときに、この画面が開くようになりました(図16)。

図16:リンクをタップするとアプリで開くかどうかを聞かれるようになった
図16:リンクをタップするとアプリで開くかどうかを聞かれるようになった

 手元で試す際には、1つ注意点があります。ChromeのアドレスバーにURLを打ち込んでも、ディープリンクが発動しないのです。そのため、デバッグを行う際には、ローカルでも構わないので、どこかのWebページに次のリンクを仕込んで、それをタップする必要があります。

 よろしければ検証用端末のブラウザで本記事を開いて、上記のリンクをタップしてください。

アクションの属性を設定する

 アクションの矢印を選択した状態で表示されるのが、アクションの属性です(図17)。

図17:アクションに設定可能な属性
図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にすることもできます。

図18:ディスティネーションとは別のデフォルト値を設定する
図18:ディスティネーションとは別のデフォルト値を設定する

 画面遷移の経路によって画面のモードを切り替えるときなどには、便利そうです。

Pop Behavior属性

 Pop Behavior属性はアクション特有の項目です。いわゆる「戻る」操作をした際の挙動を設定します。Pop To項目にディスティネーションを設定すると、「戻る」操作をした際に、そのディスティネーションが一番上になるようにバックスタックがポップされます。

 加えて、Inclusive項目をチェックすると、Pop Toに設定したディスティネーション以外のディスティネーションがすべてポップされ、Pop Toのものだけが残ります。ログイン画面に遷移するときなど、バックスタックに何も残したくない場合に有用です。

Launch Options属性

 Launch Options属性はアクション特有の項目です。画面の起動オプションを設定します。Single Topという名前が示す通り、これは、アクティビティーの起動オプションであるIntent.FLAG_ACTIVITY_SINGLE_TOPと同じ振る舞いを目指しているものです。現在画面スタックの最上位にあるディスティネーションへのアクションを実行しても、スタックが新たに積まれない、といった設定です。

次のページ
ナビゲーショングラフの属性を設定する

この記事は参考になりましたか?

Android Studio 3.3 の新機能連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川 幸哉(ナカガワ ユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/11476 2019/04/10 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー