• 2023/7/20
• 3分

【Kotlin/Android Studio】Navigation Componentの使い方!画面遷移方法

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：公式リファレンス：Navigation Componentt

環境

• Android Studio：Flamingo
• Kotlin：1.8.20

Navigation Componentとは？

Androidの,Navigation ComponentはAndroidアプリにおいて画面遷移やナビゲーション機能を提供するためのライブラリです。単純なボタンクリックによる遷移だけでなく、アプリバーやドロワーなどの実装も可能になっています。

公式より発表されているメリット

• フラグメントトランザクションを処理する。
• デフォルトで「上」アクションと「戻る」アクションを正しく処理
• アニメーションと遷移用の標準化されたリソースを提供
• ディープリンクを実装して処理
• ドロワーやボトムナビゲーションなどのナビゲーションUIパターンを組み込める
• Safe Args:宛先間で移動とデータの受け渡しを行う際に型の安全性を提供するGradleプラグインの使用
• ViewModel のサポート

また画面遷移はNavigation Componentを使用しなくても実装できます。コード量は多いですがFragmentについてあまり知識がない場合は先にこちらの記事を参考にしてください。

実装方法

ではNavigation Componentを組み込んで基本的な画面遷移を実装していきたいと思います。

流れ

1. Navigation Componentの導入
2. Fragmentの追加
3. ナビゲーショングラフを作成する
4. アクションを設定する
5. NavHostFragmentをActivityに設定
6. Safe Argsの導入
7. ボタンアクション内に遷移処理を記述する

今回のプロジェクトの全体はGitHubに上げていますので参考にしてください。

Navigation Componentの導入

まずはAndroidプロジェクトの中にNavigation Componentを導入していきます。導入する方法は簡単で「res」を右クリックして「New」＞「Android Resource File」を選択し「Resource Type」をNavigationにして作成します。ファイル名は「my_navi」としておきました。

すると自動で依存関係を追加するかどうか聞かれるので「OK」をクリックします。

追加が完了すると「build.gradle(module)」内に自動で以下の2行が追記されます。

build.gradle(module)
dependencies {

implementation 'androidx.core:core-ktx:1.8.0'
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.5.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
+   implementation 'androidx.navigation:navigation-fragment-ktx:2.6.0'
+   implementation 'androidx.navigation:navigation-ui-ktx:2.6.0'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

Fragmentの追加

続いて画面遷移のためにFragmentを扱うためのクラスとレイアウトを3つ生成します。「app」＞「java」＞「com.example.プロジェクト名」で右クリックして「New」＞「Fragment」＞「Fragment(Blank)」もしくは「Gallery...」＞「Fragment(Blank)」をクリックします。

Fragment NameにFirstFragmentと入力すると自動でレイアウトファイル名をfragment_firstに変更してくれるので「Finish」を押して生成します。

同じ操作でHomeFragment/SecondFragmentも作成しておきます。

ナビゲーショングラフを作成する

ナビゲーショングラフとはアプリ内のデスティネーション(画面)間の移動を紐づける作業(アクション)を設定するリソースファイルのことを指します。「my_navi.xml」のことです。

「my_navi.xml」を開くとデスティネーション(画面)がまだ何も追加されていないので上部にあるスマホのようなマークをクリックし、Fragment3つを追加しておきます。

家のマークが付いているのが最初に開かれるデスティネーションになります。HomeFragmentに家マークがつくように設定しておいてください。

アクションを設定する

アクションはデスティネーションをタッチすると右側に白い丸が出るのでそれをドラッグ&ドロップでFirstとSecondに紐付けます。

ここは割愛しますが、3つのFragmentに識別しやすいようにTextViewをHomeFragmentには遷移用のButtonを2つ用意しておいてください。

NavHostFragmentをActivityに設定

次に「main_activity.xml」を開き、既存のTextViewなどを削除しまっさらにしておきます。左上の検索から「NavHostFragment」を探し画面に追加します。

以下のようなポップアップが出てくるので「my_navi」を選択します。

NavHostFragmentが追加されるのでidをhost_activity_fragmentに変更しておきましょう。

この状態まで来てもビルドはできますがまだ遷移はできません。遷移を実装するためにはSafe Argsと呼ばれるプラグインを使用することが公式より推奨されているのでまずは導入していきます。これによりタイプセーフな実装が可能になります。例えば定義した各アクションのクラスとメソッドを格納するコードが自動で生成されたりするようです。

Safe Argsの導入

Safe Argsを導入するためには「build.gradle」に追記していきます。「Module」と「Project」の両方に記述するので間違えないように注意してください。

まずはModuleの方にid "androidx.navigation.safeargs.kotlin"の1行をpluginsの中に記述します。

build.gradle(Module)
plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
+   id "androidx.navigation.safeargs.kotlin"
}

続いてProject側に以下の全文をpluginsの上に記述します。

build.gradle(Project)
buildscript {
    repositories {
        google()
    }
    dependencies {
        def nav_version = "2.5.0"
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}

追加できたら薄く上部に表示されている「Sync Now」を押してgradleを同期させます。

ボタンアクション内に遷移処理を記述する

ここまで来たらHomeFragmentのonViewCreatedメソッド内にそれぞれのボタンアクションの中に遷移処理を記述していきます。

HomeFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    val firstButton:Button = view.findViewById(R.id.first_to_button)
    val secondButton:Button = view.findViewById(R.id.second_to_button)

    var navHostFragment = requireActivity().supportFragmentManager.findFragmentById(R.id.host_activity_fragment) as NavHostFragment
    val navController = navHostFragment.navController

    firstButton.setOnClickListener{
        val action =
            HomeFragmentDirections.actionHomeFragmentToFirstFragment()
        navController.navigate(action)
    }

    secondButton.setOnClickListener{
        val action =
            HomeFragmentDirections.actionHomeFragmentToSecondFragment()
        navController.navigate(action)
    }
}

1行ずつ解説していきます。まずは現在のActivityの中からNavHostFragmentを取得します。

var navHostFragment = requireActivity().supportFragmentManager.findFragmentById(R.id.host_activity_fragment) as NavHostFragment

続いてそこからNavControllerを取得します。

val navController = navHostFragment.navController

Safe Argsで名前から自動生成されたHomeFragmentDirectionsクラス(Fragment名 + Directions)からこれまた自動生成されたactionHomeFragmentToFirstFragmentメソッド(action + Fragment名 + To + 遷移先Fragment名)を呼び出してアクションを取得します。

val action = HomeFragmentDirections.actionHomeFragmentToFirstFragment()

最後にnavigateメソッドの引数にアクションを渡せば画面遷移処理の完了です。

navController.navigate(action)

実際にアプリをビルドして動作を確認してみてください。

データの受け渡し

Navigation Componentでは画面間のデータの受け渡しが簡単に実装できるようになっています。

1.Argumentsを追加

「my_navi」から引数を受け取りたいFragmentを選択し右の「Attribute」＞「Arguments」＞「+」をクリックします。引数名とタイプを指定します。

2.データを渡す

データを渡すのはアクションを取得していた以下の部分です。引数名とデータを以下のように渡します。

HomeFragment.kt
val action = HomeFragmentDirections.actionHomeFragmentToFirstFragment(Name = "ame")

3.データを受け取る

データを受け取るためのプロパティを用意します。Safe Argsによって自動生成されたFirstFragmentArgs(Fragment名 + Args)とnavArgsメソッドを使用します。あとはargs.Nameの形式でデータを参照することが可能です。

FirstFragment.kt
class FirstFragment : Fragment() {

    private val args:FirstFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        var text:TextView = view.findViewById(R.id.first_text)

        text.setText(args.Name)
    }
    〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。