Android Studio 3.3の目玉機能「ナビゲーションエディタ」を理解する

Android Studio 3.3 の新機能 第1回

ナビゲーションエディタを使って簡単な画面遷移を行う（2）

ディスティネーションをアクションでつなぐ

　ナビゲーショングラフは、ディスティネーション同士がどのように遷移していくのかを定義するためのものです。このディスティネーション同士の関係性はアクション（Action）と呼ばれるデータで表され、ナビゲーションエディタ上では矢印の付いた線で表現されます。次の手順として、 FirstScreenFragment と SecondScreenFragment をアクションでつないでみましょう。

　まずは、ナビゲーションエディタ上で FirstScreenFragment をクリックします。すると、右端に丸い印が現れます（図17）。

図17：アクションの起点となる丸い印

　この丸い印を SecondScreenFragment までドラッグ＆ドロップします。すると、矢印が現れて、2つの画面の間に画面遷移が発生することが表現されました（図18）。

図18：2つの画面がアクションでつながった

　これで、最低限のナビゲーショングラフが定義できました。

アクティビティにNavHostFragmentを配置する

　ナビゲーショングラフが定義できたので、次はアクティビティへとつないでいきます。前述の通り、ナビゲーショングラフに基づいて画面遷移をハンドリングする NavHostFragment をアクティビティ上に配置する必要があります。レイアウト上に配置することになるので、 res/layout/activity_main.xml を扱うことになります。初期表示で出ているHelloWorldのTextViewは、不要なので消しておきましょう。

　さて、ありがたいことに、 NavHostFragment はレイアウトエディタから追加可能です。 activity_main.xml を開いたら、Palette -> Containersを探すことで、 NavHostFragment を見つけることができます。 NavHostFragment はドラッグ＆ドロップでレイアウトに追加しましょう（図19）。

図19：NavHostFragmentをドラッグ＆ドロップする

　すると、ナビゲーショングラフを設定するためのウィザードが現れます（図20）。

図20：ナビゲーショングラフを指定する

　ここには先ほど作成したナビゲーショングラフのパスが設定されているので、そのまま「OK」ボタンをクリックしましょう。これで、フラグメントがレイアウト上に配置されます（図21）。

図21：NavHostFragmentが配置できた

　レイアウトのプレビュー上でも、ナビゲーショングラフの最初のディスティネーションである FirstScreenFragment のレイアウトが表示され、接続がうまくいったことがわかります。ただ、このままだと NavHostFragment のサイズが適切に調整されていないので、図22のように画面いっぱいに表示されるよう設定を行う必要があります。

図22：NavHostFragmentを画面いっぱいに表示する

　今回は ConstraintLayout を使っているので、設定としては「上下左右の親に対してマージン0dpで制約を付ける」と「幅と高さを match_constraint （0dp）にする」の2つの設定を行いました。GUIでできる準備はここまでです。

画面遷移を実行する

　それではいよいよ、画面遷移を実行してみましょう。現状では、画面遷移を行うための取っ掛かりがないので、 res/fragment_first_screen.xml を編集して、ボタンを設置しました（図23）。

図23：画面遷移を実行するためのボタンを用意する

　このボタンには、 btn_goto_second というIDを定義してあります。このボタンのクリックイベントとして、リスト2のように、画面遷移を実行する処理を記述します。

［リスト2］FirstScreenFragment.kt

class FirstScreenFragment : Fragment() {
  // 略
  override fun onViewCreated(
    view: View,
    savedInstanceState: Bundle?
  ) {
    super.onViewCreated(view, savedInstanceState)

    view.findViewById<Button>(R.id.btn_goto_second)
    .setOnClickListener { v ->
      Navigation.findNavController(v) // (1)
                .navigate(R.id.secondScreenFragment) // (2)
    }
  }
}

　（1）の findNavController() は、ナビゲーションアーキテクチャコンポーネントを用いた画面遷移を操作するツールである NavController を取得するためのメソッドです。 NavController には、（2）のように navigate() メソッドが定義されており、ここに遷移先のディスティネーションのIDを指定することで、画面遷移を実現できます。

　「ディスティネーションのID」については、本記事でまだ扱っていませんでした。ナビゲーションエディタで SecondScreenFragment を選択すると、IDを確認することができます（図24）。

図24：ディスティネーションのID

　他のディスティネーションとかぶらない限りは、自由な値を設定することができますが、基本的には自動生成に任せておいた方がよいでしょう。

動かしてみる

　さて、 navigate() メソッドが実行されれば、画面遷移が発生しそうなところまで実装できました。それでは、実際に動かしてみます。

　アプリが起動して、「GO TO SECOND」のボタンを押すと、図25のように SecondScreenFragment の画面に切り替わります。

図25：ボタンを押すと画面が切り替わる

　ここでOSの戻るボタンを押すと、元の画面に戻るようにもなっています。いわゆるバックスタックが用意されているのは、画面遷移ライブラリとしてはありがたい機能ですね。

細かいところがまだ設定できていない

　アクティビティの画面遷移とは違って、この時点では遷移時にアニメーションが発生せず、パッと切り替わってしまいます。また、標準の Toolbar がアクティビティ側に表示されているのも気になるところです。このあたりは、次回の記事でナビゲーションエディタやレイアウトエディタを操作しながら、解決していきます。

まとめ

　Android Studio 3.3の機能について、ナビゲーションエディタの使い方を中心に解説しました。次回も、ナビゲーションエディタを通じて、ナビゲーションアーキテクチャコンポーネントでできることを、さらに広く解説していきます。