ナビゲーション

ナビゲーションとは、ユーザーがアプリ内のさまざまなコンテンツ間を行き来する操作を指します。

Android Jetpack の Navigation コンポーネントには、Navigation ライブラリ、Safe Args Gradle プラグイン、アプリ ナビゲーションの実装に役立つツールが含まれています。Navigation コンポーネントは、単純なボタンクリックから、アプリバーやナビゲーション ドロワーなどの複雑なパターンまで、さまざまなナビゲーションのユースケースに対応しています。

主な概念

次の表に、ナビゲーションにおける 3 つの主要な概念と、その実装に使用する主な型をまとめます。

コンセプト

目的

型

ホスト

現在のナビゲーション デスティネーションを含む UI 要素。ユーザーがアプリ内を移動すると、基本的にはアプリがナビゲーション ホストを出し入れしてデスティネーションを入れ替えます。

グラフ

アプリ内のすべてのナビゲーション デスティネーションと、それらの接続方法を定義するデータ構造。

NavGraph

コントローラ

デスティネーション間のナビゲーションを中央で管理する調整役。このコントローラが、デスティネーション間の移動、ディープリンクの処理、バックスタックの管理などを実行するためのメソッドを提供します。

NavController

接続先

ナビゲーション グラフ内のノード。ユーザーがこのノードに移動すると、ホストはそのコンテンツを表示します。

NavDestination

通常は、ナビゲーション グラフの作成時に作成されます。

ルート

宛先と、宛先に必要なデータを一意に識別します。

ルートを使用して移動できます。ルートを使用すると、目的地に移動できます。

シリアル化可能なデータ型。

メリットと機能

Navigation コンポーネントには、他にも以下のような多くのメリットと機能があります。

  • アニメーションと遷移: アニメーションと遷移用の標準化されたリソースを提供します。
  • ディープリンク: ユーザーをデスティネーションに直接誘導するディープリンクを実装して処理します。
  • UI パターン: ナビゲーション ドロワーやボトム ナビゲーションなどを、最小限の追加作業で組み込むためのパターンをサポートします。
  • 型安全性: 型安全性でデスティネーション間でデータを渡す機能が含まれています。
  • ViewModel のサポート: ナビゲーション グラフに対する ViewModel のスコープ設定を有効にして、グラフのデスティネーション間で UI 関連のデータを共有できます。
  • フラグメント トランザクション: フラグメント トランザクションを完全にサポートおよび処理します。
  • 「戻る」と「上へ」: 「戻る」および「上へ」アクションをデフォルトで正しく処理します。

環境をセットアップする

プロジェクトに Navigation のサポートを組み込むには、アプリの build.gradle ファイルに以下の依存関係を追加します。

GroovyKotlin
plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  id 'org.jetbrains.kotlin.plugin.serialization' version '2.0.21'
}
  
dependencies {
  def nav_version = "2.8.9"

  // Jetpack Compose Integration
  implementation "androidx.navigation:navigation-compose:$nav_version"

  // Views/Fragments Integration
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"

  // Feature module support for Fragments
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // Testing Navigation
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

  // JSON serialization library, works with the Kotlin serialization plugin.
  implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3"
}
 
plugins {
  // Kotlin serialization plugin for type safe routes and navigation arguments
  kotlin("plugin.serialization") version "2.0.21"
}

dependencies {
  val nav_version = "2.8.9"

  // Jetpack Compose integration
  implementation("androidx.navigation:navigation-compose:$nav_version")

  // Views/Fragments integration
  implementation("androidx.navigation:navigation-fragment:$nav_version")
  implementation("androidx.navigation:navigation-ui:$nav_version")

  // Feature module support for Fragments
  implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

  // Testing Navigation
  androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

  // JSON serialization library, works with the Kotlin serialization plugin
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3")
}

他のアーキテクチャ コンポーネントをプロジェクトに追加する方法については、プロジェクトにコンポーネントを追加するをご覧ください。

次のステップ

Navigation コンポーネントに関連するドキュメントとリソースについては、以下をご覧ください。

詳細ガイド

ナビゲーション ホストと NavController を実装する方法、およびそれらが Compose や他の UI フレームワークとどのようにやり取りするかについて詳しくは、以下のガイドをご覧ください。

Codelab

動画

サンプル

Jetcaster sample 🎙️

Jetcaster is a sample podcast app, built with Jetpack Compose. The goal of the sample is to showcase building with Compose across multiple form factors (mobile, TV, and Wear) and full featured architecture. To try out this sample app, use the latest

Jetnews sample

Jetnews is a sample news reading app, built with Jetpack Compose. The goal of the sample is to showcase the current UI capabilities of Compose. To try out this sample app, use the latest stable version of Android Studio. You can clone this repository

Jetsnack sample

Jetsnack is a sample snack ordering app built with Jetpack Compose. To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here. This