アプリのボタンをタップして画面を遷移させる一つの方法として”Navigation コンポーネント”がある。
本記事では画面遷移の簡素なアプリを例にしつつ、Navigation コンポーネントの基本的な使い方についてまとめる。
1. Navigation コンポーネントを利用した簡単なアプリ
AndroidアプリのNavigationコンポ―ネントを利用して、図ような単純なアプリを作ってみた。
画面上の”NEXT”をタップした時に次のページに移り、最後に”Back”をタップして最初の画面に戻るというアプリを作成する。今回はNaviagationコンポーネントを利用して作成する。
なお、画面構成としてFragment上のボタン配置や、ActivityにNavigation関連のxmlファイルを配置する必要があるが本記事では説明は割愛する。本記事ではあくまでNavigationコンポーネントの使用方法に絞ってまとめていく。
2. Navigation コンポーネントの使い方
Navigationコンポーネントとは、Android Jetpackと呼ばれるライブラリに含まれるツールの一つで、アプリの画面遷移を便利に作成できる。
Navigation Editorと呼ばれるツールが秀逸で、画面を配置して矢印をつないでいけば、感覚的に画面遷移の構成を作れることが魅力だ。特に画面がたくさんあって遷移ルートが複雑なものにはNavigationコンポーネントは必須ツールといえる。
Navigationコンポーネントを使う手順は以下の通り。
(1) buid.gradle(Project)にバージョンとSafeArgsのclasspathを追加
buildscript {
dependencies {
def nav_version = "2.3.5"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
}
}
nav_versionはナビゲーションコンポーネントのバージョンで、最新のバージョンを調べて記入する。
SafeArgs は、データの受け渡しを安全に行うためのプラグインであり、classpathに追記して有効化する。
(2) buid.gradle(Module)SafeArgsのid、Navigationの依存関係追記
plugins {
id 'androidx.navigation.safeargs.kotlin'
}
dependencies {
implementation 'androidx.navigation:navigation-fragment-ktx:2.2.2'
implementation 'androidx.navigation:navigation-ui-ktx:2.2.2'
}
3行目はSafeArgs を使用するためのid追記。
9.10行目は、Navigationコンポーネントを利用するための依存関係を追記。バージョンは適宜最新版に修正が必要。
(3) Navigationグラフの作成、画面遷移の設定
Navigation Editorの機能を使って視覚的に画面遷移を作成する。まず、Projectのresディレクトリを右クリックして、New -> Android Resource Fileを選択する。適宜名前を付けて、Resourse typeを”Navigation”に設定して新しいNavigationグラフを作成する。
すでに作成した３つのfragment(FirstFragment, SecondFragment, ThirdFragment)を Navigationグラフ に追加する。 Navigationグラフ の画面中央をクリックすれば簡単に追加できるはず。
各Fragmentを矢印（→）で繋いでいく。これで画面遷移の設定は完成！
(4) フラグメント.ktにボタンをタップした時の画面遷移を記述する。
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.button1.setOnClickListener{
val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment()
findNavController().navigate(action)
}
}
フラグメントのonViewCreatedの中に記述する。4行目の”button1″はFirst FragmentのボタンのID。なお、こここではView Binding（ビューバインディング）を使用している。 View Binding は以下の記事でまとめているので参考にしてほしい。
5行目はSafeArgs によって自動生成されたFirstFragmentDirectionsクラスの画面遷移のメソッドを呼び出している。6行目で、引数として５行目の設定を渡して画面遷移を実行する。
なお、SecondFragmentおよびThirdFragmentも同様にこの手順を記述して、Navigationを利用した画面遷移アプリは完成となる。
3. まとめ
今回は、Androidアプリの画面遷移を設定するのに便利な、Navigaionコンポーネント の使用方法についてまとめてみた。サンプルアプリとして、Fragment上のボタンをタップして画面遷移を行う単純なアプリを例にしている。
Navigationコンポーネントを利用することで、複数のFragment間の画面遷移を比較的簡潔に記述することができるので便利である。
初めてNavigation コンポーネント を使用する方のお役に立てれば幸いである。
コメント