2022年6月15日

松本

【Android】Navigation Componentで簡単に画面遷移するお話

スマホアプリ

facebook
twitter

1 いにしえの時代のFragment間の移動
2 Navagation Componentを使おう
3 Activityの設定
4 Safe Argsの利用
5 遷移
6 遷移時のアニメーション
- 6.1 アニメーションの追加
7 遷移時に値を渡す
8 終わりに
9 参考URL

いにしえの時代のFragment間の移動

7年くらい前までであれば、Fragment間の移動はソースで記述していました。

// FragmentManagerからFragmentTransactionを作成
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

// 実際に使用するFragmentの作成
Fragment nextFragment = new SecondFragment();

// Fragmentを組み込む
fragmentTransaction.replace(R.id.fragment_container, nextFragment);

// backstackに追加
fragmentTransaction.addToBackStack(null);

// 上記の変更を反映する
fragmentTransaction.commit();

// FragmentManagerからFragmentTransactionを作成

FragmentManager fragmentManager = getFragmentManager();

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

// 実際に使用するFragmentの作成

Fragment nextFragment = new SecondFragment();

// Fragmentを組み込む

fragmentTransaction.replace(R.id.fragment_container, nextFragment);

// backstackに追加

fragmentTransaction.addToBackStack(null);

// 上記の変更を反映する

fragmentTransaction.commit();

Fragment Managerを呼び出してTransactionを生成して、遷移先のFragmentを生成してから書き換えるという感じです。
懐かしさすら覚えますが、当時はこれはこれで便利だなと思いました。
もちろん今でもこの方法は使えますので、既存のアプリをわざわざ後述するNavigation Componentに置き換えるメリットは薄いと思います。

Navagation Componentを使おう

いつのまにかNavigation Componentと呼ばれるものができ、Fragment間の挙動をxmlで記述し、プログラム上から呼び出すだけで簡単に遷移できるようになりました。

今回はFirstFragmentからSecondFragmentへの遷移を行うという動きを入れましょう。

作成手順は以下のようになります。

resを右クリック
Resource Typeを Navigation を選択。
name にファイル名を入力します。（今回はnav_graph）
必要なライブラリーがbuild.gradleのdependenciesに存在しない場合、ダイアログが表示されるため、OKを押す。
res フォルダに navigation フォルダが作成され、nav_graph.xmlファイルが作成される

これで完成です。

それではxmlファイルを見ていきます。

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/navigation_first">

    <fragment
        android:id="@+id/first_fragment"
        android:name="xxx.fragment.FirstFragment"
        android:label="@string/title_label_section1"
        tools:layout="@layout/fragment_first">

    </fragment>

    <fragment
        android:id="@+id/second_fragment"
        android:name="xxx.fragment.SecondFragment"
        android:label="@string/title_label_section2"
        tools:layout="@layout/fragment_second">

    </fragment>

</navigation>

<?xml version="1.0" encoding="utf-8"?>

<navigation xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/nav_graph"

app:startDestination="@id/navigation_first">

<fragment

android:id="@+id/first_fragment"

android:name="xxx.fragment.FirstFragment"

android:label="@string/title_label_section1"

tools:layout="@layout/fragment_first">

</fragment>

<fragment

android:id="@+id/second_fragment"

android:name="xxx.fragment.SecondFragment"

android:label="@string/title_label_section2"

tools:layout="@layout/fragment_second">

</fragment>

</navigation>

先ほどの新規で作った場合は<fragment>タグは存在しませんが、今回は説明のため、あらかじめ2つのフラグメントの設定を行っておきます。

<fragment>が2つありますが、これはそれぞれFirstFragment SecondFragmentを設定します。
これはGUI上でも直接XMLを触ってもいいですが、XMLで触る場合は以下を参考にしてください。

id	ID
name	Fragmentを指定
label	actionBarのタイトルで表示される文字列
layout	Fragmentで指定されているレイアウト

これで2つのFragmentをNavigation Componentに登録しました。

次に遷移の動きを入れましょう。

先ほどのfragmentの中に

        <action
            android:id="@+id/action_First_to_Second"
            app:destination="@id/navigation_second" />

<action

android:id="@+id/action_First_to_Second"

app:destination="@id/navigation_second" />

を入れます。

id	ID
destination	遷移先のFragmentのIDを指定
enterAnim	画面遷移時の最初のアニメーション（任意）
exitAnim	画面遷移時の終了時のアニメーション（任意）
popEnterAnim	戻った時の最初のアニメーション（任意）
popExitAnim	戻ったときの終了時のアニメーション（任意）

必要なのはidとdestinationなので、まずはこれを入れてください。
今回はFirstFragmentからSecondFragmentへの遷移なのでこれだけでいいです。

Activityの設定

これだけだと表示がされないので、Activityの設定を行います。

activity_main.xmlの記述を次のように変更します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/host_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<androidx.fragment.app.FragmentContainerView

android:id="@+id/host_fragment"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:name="androidx.navigation.fragment.NavHostFragment"

app:navGraph="@navigation/nav_graph"

app:defaultNavHost="true"

</androidx.constraintlayout.widget.ConstraintLayout>

今回は単純な画面なのですっきりしていますが、実際はボトムナビゲーションやらFABつけたりするともう少しごちゃごちゃするので、そこらへんは対応してください。

先ほど作った navigation/nav_graph をここで設定しています。

Safe Argsの利用

どうもSafe Argsという機能を使ってNavHostを利用するのがよさげなので、それを利用します。
ただそれを利用するにはbuild.gradleに追加を行う必要があります。
バージョンはそのときによって変わるのでご注意ください。

    dependencies {
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.5.0-rc01"
    }

dependencies {

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.5.0-rc01"

}

plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

plugins {

id 'androidx.navigation.safeargs.kotlin'

}

以上を入力してSync nowしたのちにビルドを行います。

遷移

それでは遷移させましょう。
遷移させるイベントはなんでもいいですが、ボタンをタップしたタイミングで遷移させるのがいいかなと思います。

        val view = inflater.inflate(R.layout.fragment_first, container, false)

        val buttonGo = view.findViewById<AppCompatButton>(R.id.button_go)
        buttonGo.setOnClickListener{
            // NavHostの取得
            val navHostFragment =
                requireActivity().supportFragmentManager.findFragmentById(R.id.host_fragment) as NavHostFragment
            val navController = navHostFragment.navController
            val action = FirstFragmentDirections.actionFirstToSecond()
            navController.navigate(action)

        }

val view = inflater.inflate(R.layout.fragment_first, container, false)

val buttonGo = view.findViewById<AppCompatButton>(R.id.button_go)

buttonGo.setOnClickListener{

// NavHostの取得

val navHostFragment =

requireActivity().supportFragmentManager.findFragmentById(R.id.host_fragment) as NavHostFragment

val navController = navHostFragment.navController

val action = FirstFragmentDirections.actionFirstToSecond()

navController.navigate(action)

}

Safe Argsを利用したことで、自動的に フラグメント名＋Directions というクラス名が生成されます。（今回は FirstFragmentDirections）

また navigations に追加したidは[action_First_to_Second]となりますが、これも

actionFirstToSecond()となります。

最後にnavController.navigate(action) で遷移します。

遷移時のアニメーション

どうせなら画面遷移時にアニメーションを設定しましょう
以前のやり方でも設定できましたが、今回はnavigationのactionで設定できるのでかなり手軽に行えます。

アニメーションの追加

まずアニメーションを作ります。

res/anim（なければ作る）の中に以下のXMLファイルを作ります。

左側からスライド

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime" />
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

<?xml version="1.0" encoding="utf-8"?>

<translate android:fromXDelta="-100%p" android:toXDelta="0"