ナビゲーションエディタを使って簡単な画面遷移を行う（1）
まずは、雰囲気をつかむために、単純な画面遷移を作ってみましょう。図3の画面遷移について考えてみます。
最初に FirstScreenFragment が表示され、その中での操作により、 SecondScreenFragment へと画面が切り替わります。とてもシンプルですね。
プロジェクトを作成する
それでは、実際にAndroid Studioを操作しながら、画面を作っていきます。新規にアプリを作り始めますが、プロジェクトの作成時点では特別な設定をする必要はありません。 MainActivity のテンプレートとしては、図4のように Empty Activity を選択します。
また、本記事ではKotlinによる解説を行うので、図5のように、Kotlin言語を設定します。
アプリ名は NavigationSample 、パッケージ名は com.example.navigation にしました。これで、図6のようなプロジェクトがセットアップされます。
これでプロジェクトの作成は完了です。
ナビゲーショングラフのファイルを作成する
では、次にナビゲーショングラフのファイルを作成していきます。まずは、ファイルツリーのresフォルダを右クリックして、New -> Android Resource Directoryを選択します（図7）。
すると、リソースディレクトリの作成ウィザードが現れるので、図8のようにResource typeを navigation に設定します。
Directory nameは自動で定まるので、変更しないでください。このままOKをクリックすれば、 navigation ディレクトリが作成されます。
続いて、ファイルを作成します。 navigation ディレクトリを右クリックして、New -> Navigation resource fileを選択します（図9）。
すると、リソースファイルの作成ウィザードが現れるので、図10のようにFile nameを nav_graph に設定します。
Directory nameは自動で設定されるので、触らなくて結構です。このまま「OK」ボタンをクリックしてください。すると、Android Studioがナビゲーションアーキテクチャコンポーネントのライブラリ追加を提案してきます（図11）。
これをOKすることで、 app/build.grale にライブラリの設定が追加されます。ここまでの手順で、ナビゲーショングラフのファイルが作成されました（図12）。
この中にナビゲーショングラフを定義していきます。
ナビゲーションエディタからフラグメントを作成する
次に、ナビゲーショングラフの基本単位となる、 ディスティネーション（Destination）を作成します。ディスティネーションは、主にフラグメントをナビゲーショングラフ内にリンクしたものです（実はアクティビティもディスティネーションになれますが、本記事では扱いません）。通常の方法で作成されたフラグメントを利用しても構いませんが、せっかくなので、ナビゲーションエディタからフラグメントを作成してみましょう。図13の①にある追加アイコンをクリックします。
すると、ディスティネーションを追加するためのメニューが開きます。このとき、作成済みのフラグメントがあればリストに並びますが、今回は新しく作成したいので、②にある「Create new destination」を選択します。すると、フラグメント作成ウィザードが開きます（図14）。
まずは FirstScreenFragment を作成したいので、Fragment Nameの欄に FirstScreenFragment と記入して、「Finish」ボタンをクリックします。これで、フラグメントが作成されました。それと同時に、フラグメントが最初のディスティネーションとして、ナビゲーショングラフに登録されました（図15）。
同様の手順を繰り返して、 SecondScreenFragment を定義します（図16）。
これで、画面遷移の元となる2つの画面を生み出すことができました。
フラグメントとしてはこれで完成としたいところなのですが、残念ながらAndroid Studioが生成したフラグメントは、 Arguments の受け取りを想定したためか、今回は必要のない余計なボイラープレート（定型文）を多く含んでいます。今後の作業の妨げとなるため、今のうちに消しておきましょう。 FirstScreenFragment.kt と SecondScreenFragment.kt から、 onCreateView 以外の実装をすべて削除します。リスト1のようになります。
package com.example.navigation
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class FirstScreenFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(
R.layout.fragment_first_screen, container, false)
}
}
SecondScreenFragment.kt にも、同様の修正を行います。これで、フラグメント側の準備はひとまず完了です。
