【Android】Kotlinでフラグメント(Fragment)の画面遷移(FragmentManager、Navigation Component)を行う方法について徹底解説

2024年2月13日2024年4月2日

すだ

Androidアプリ開発者のみなさま！Kotlinを勉強中のみなさま！
こんにちは〜メモリアインクのすだです！

本日は、フラグメント(Fragment)同士での画面遷移について
コードを使用しながら実践形式で学んでいきましょう！

この記事を読んでわかること…
・FragmentManagerを使用した画面遷移の実装方法
・Navigation Componentを使用した画面遷移の実装方法

Fragmentの基本的な考え方・使い方に関しては
以下の記事にてご紹介しています！ぜひあわせてご覧ください！

Fragment（フラグメント）に関して

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

FragmentManagerを使用した画面遷移の実装方法

FragmentManagerとは？

Androidの初期から存在するフラグメントを管理するためのクラスです。

フラグメントの操作に関するトランザクション（追加、削除、置き換えなど一連の操作のまとまり）を
直接行うことができます。

画面遷移の実装方法

・フラグメント①に「次へ」ボタンを置いて、②に画面遷移できるようにする
・フラグメント②に「戻る」ボタンを置いて、①に戻れるようにする
という実装を行なってみます。

上記画像のように、
Fragmentを2つ用意して土台となるActivityの上にフラグメント①を表示、
さらにその上にフラグメント②を重ねていくことで画面遷移させるイメージです！

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Fragment①を表示
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                .add(R.id.fragment_container, FirstFragment())
                .commit()
        }
    }
}

解説

土台となるActivityで、Fragment①を表示します。

FirstFragment.kt（フラグメント①）

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Fragment①を表示
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // 「次へ」ボタン押下時
        view.findViewById<Button>(R.id.button_goto_second).setOnClickListener {
            // Fragment②への遷移
            fragmentManager?.beginTransaction()
                ?.replace(R.id.fragment_container, SecondFragment())
                ?.addToBackStack(null)  // BackStackに追加
                ?.commit()
        }
    }
}

解説

fragmentManager?.beginTransaction() 〜 commit()

fragmentManagerで、フラグメントの追加、削除、置き換えなどの操作を行います。
beginTransaction()で、フラグメントに対する一連の変更を開始するためのメソッドです。
commit()で、これまでに追加されたフラグメントの変更を確定し、実際に画面遷移を実行します。

?.replace(R.id.fragment_container, SecondFragment())

現在表示されているフラグメントを、新しいフラグメントで置き換えます。
第一引数に、現在表示されているフラグメントをレイアウトファイルのIDで指定しています。
第二引数に、遷移したい新しいフラグメントのインスタンスを指定します。

?.addToBackStack(null)

「Fragment②へ遷移する処理」という操作をバックスタック（= 履歴）に追加します。
nullを引数に指定しているのは、このトランザクションに特定の名前を付けない場合です。
名前を付けることで、特定のトランザクションを後で識別しやすくすることが可能ですが、ここでは名前は不要なのでnullを使っています。

SecondFragment.kt（フラグメント②）

class SecondFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Fragment②を表示
        return inflater.inflate(R.layout.fragment_second, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
　　　　　// 「戻る」ボタン押下時
        view.findViewById<Button>(R.id.button_go_back).setOnClickListener {
            // Fragment①に戻る
            fragmentManager?.popBackStack()
        }
    }
}

解説

fragmentManager?.popBackStack()

popBackStack()メソッドを呼び出すと、
バックスタックの最上位にある履歴（トランザクション丸ごと）が取り除かれます。

つまり、「Fragment②へ遷移する処理」という履歴が取り除かれ、Fragment①が表示された状態に戻るということです。

Navigation Componentを使用した画面遷移の実装方法

Navigation Componentとは？

Android Jetpackの一部として導入された比較的新しいフレームワークで、
アプリの画面の移動を簡単に設定できるようにするものです。

アプリの地図のような役割を果たし、どの画面からどの画面へ移動するかを示す地図を作ることができます。

画面遷移の実装方法

build.gradle（Module: app） Navigation Componentを使用するための依存関係を追加します。

dependencies {
    implementation "androidx.navigation:navigation-fragment-ktx:2.3.5"
    implementation "androidx.navigation:navigation-ui-ktx:2.3.5"
}

nav_graph.xml

<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/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.yourpackagename.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first">
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.yourpackagename.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" />
</navigation>

解説

<navigation>

このタグの中に、アプリの画面遷移に関する情報を記述します。
ナビゲーショングラフとよばれ、アプリ内の画面遷移（フラグメント間の移動）を管理するための設定ファイルのことを指します。

このナビゲーショングラフに従うと、アプリが起動するとfirstFragmentが表示されます。
ユーザーが何らかのアクションを行うと、secondFragmentへ移動します。
移動は<action>タグで定義された設定（ナビゲーションアクション）に基づいて行われます。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" />

解説

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

NavHostFragmentは、アプリ内のフラグメント間のナビゲーション（画面遷移）を管理するためのコンテナです。

app:defaultNavHost=”true”

ユーザーがアプリ内で「戻る」ボタンを押したとき、このNavHostFragmentがナビゲーションのバックスタック（画面遷移の履歴）を管理し、適切な画面に戻るようにします。
これによりスムーズな画面遷移と、「戻る」ボタンの自然な挙動が実現することができます。

app:navGraph

使用するナビゲーショングラフを指定します。

FirstFragment.kt（フラグメント①）

class FirstFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<Button>(R.id.navigate_button).setOnClickListener {
            findNavController().navigate(R.id.action_firstFragment_to_secondFragment)
        }
    }
}

解説

findNavController().navigate(R.id.action_firstFragment_to_secondFragment)

findNavController()は、現在のフラグメントが関連付けられているナビゲーションコントローラーを見つける関数です。
ナビゲーションコントローラーとは、アプリの画面遷移を管理する部品のことで、どの画面からどの画面へ移動するかという情報を持っています。

navigate()は、次の画面へ移動する命令をナビゲーションコントローラーに伝える関数です。
引数にナビゲーションアクションのIDを指定します。

SecondFragment.kt（フラグメント②）

class SecondFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_second, container, false)
    }
}

すだ

Navigation Componentは、画面遷移の処理をグラフィカルに実装することができるのでわかりやすいかつ慣れると使いやすいですね〜！