【Android】＜Kotlin＞Navigation Componentを使ったモダンな画面遷移の実装について徹底解説！

2025年1月29日

すだ

みなさまこんにちは〜！
メモリアインクのすだです。

本日は、
Navigation Componentを使ったモダンな画面遷移の実装について
実際のコードを利用して徹底解説していきます！

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

環境

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

Navigation Componentとは？

Navigation Componentは、Jetpackの一部として提供されるライブラリで、
Androidアプリ内の画面遷移（ナビゲーション）を簡単に管理するための仕組みです。

主な特徴として、以下のような点が挙げられます。▼

コードがシンプル → Fragment間の遷移をXMLで管理できる
安全なデータ受け渡し → Safe Args を使うと型安全なデータの受け渡しが可能
戻るボタンやスタック管理が簡単 → システムの戻るボタンと連携できる
アニメーションや遷移エフェクトが設定可能

Navigation Componentの導入

実装を始める前に、Navigation Componentをプロジェクトに導入する必要があります。

アプリレベルの build.gradle に以下を追加してください。

dependencies {
    implementation("androidx.navigation:navigation-fragment-ktx:2.5.3")
    implementation("androidx.navigation:navigation-ui-ktx:2.5.3")
}

画面遷移の実装

導入ができたら、早速実装していきましょう！
手順としては以下です。

ナビゲーショングラフ（NavGraph）の作成
MainActivity の作成
HomeFragmentとレイアウトの作成
DetailFragmentとレイアウトの作成

上から順に、一つ図作業していきます。

1. ナビゲーショングラフ（NavGraph）の作成

Navigation Componentでは、画面遷移のルートを「ナビゲーショングラフ（NavGraph）」で定義します。

res/navigation/ フォルダを作成（無ければ作成）。
nav_graph.xml というファイルを作成。
nav_graph.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"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.HomeFragment"
        android:label="Home" />

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.app.DetailFragment"
        android:label="Detail">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>
</navigation>

2 ~ 4行目：

navigation タグ: ナビゲーションのルート要素
- app:startDestination="@id/homeFragment" → アプリ起動時に最初に表示される画面を homeFragment に設定します

6 ~ 14行目：

<fragment> タグを使って2つの画面を定義
- homeFragment（ホーム画面）
- detailFragment（詳細画面）
android:id="@+id/homeFragment" → Fragment のID（識別子）
android:name="com.example.app.HomeFragment" → Fragmentのクラス名（実際の処理が書かれているファイル）

15行目 ~ ：

<action>タグ: 画面遷移のルートを設定
- android:id="@+id/action_home_to_detail" → 遷移のID
- app:destination="@id/detailFragment" → 遷移先を detailFragment に指定
  → homeFragment で findNavController().navigate(R.id.action_home_to_detail) を呼び出すと detailFragment に遷移できます。

2. `MainActivity` の作成

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

そして、activity_main.xml を作成して
以下のようにNavHostFragment を配置し、app:navGraph=にnav_graph.xml を適用してください。

<androidx.fragment.app.FragmentContainerView
    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" />

1行目：

FragmentContainerView
- フラグメント（画面）を表示するための特別なビュー（コンテナ）です。

3行目：

NavHostFragment
- Navigation Component に組み込まれている画面遷移を管理するための特別なフラグメント です。
- FragmentContainerView にandroid:name="androidx.navigation.fragment.NavHostFragment"と書くだけで自動的に機能します。
- nav_graph.xml に定義したルールに従って、フラグメントを切り替えてくれます。

nav_graph.xml に HomeFragment → DetailFragment への遷移ルールが書かれているので、それに従って画面が切り替わる。

6行目：

app:defaultNavHost="true"
- 戻るボタンを押したときの処理を、この NavHostFragment が最優先で受け取るようにします。

3. `HomeFragment` の作成

class HomeFragment : Fragment(R.layout.fragment_home) {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<Button>(R.id.buttonToDetail).setOnClickListener {
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

5行目：

findNavController()
- 現在の Fragment が属する NavController（ナビゲーションを管理するオブジェクト）を取得。
- NavController は NavHostFragment に紐づいており、画面の切り替えを制御します。
.navigate(R.id.action_home_to_detail)
- av_graph.xml に定義された action_home_to_detail を実行し、HomeFragment から DetailFragment に遷移します。

4. `DetailFragment.kt` を作成（戻るボタンも）

class DetailFragment : Fragment(R.layout.fragment_detail) {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<Button>(R.id.buttonBack).setOnClickListener {
            findNavController().navigateUp()
        }
    }
}

5行目：