ナビゲーション グラフを設計する

Navigation コンポーネントは、ナビゲーション グラフを使用してアプリのナビゲーションを管理します。ナビゲーション グラフは、アプリ内の各デスティネーションとそれらの間の接続を含むデータ構造です。

目的地のタイプ

デスティネーションには、ホスト、ダイアログ、アクティビティの 3 つの一般的なタイプがあります。次の表に、これら 3 つのデスティネーション タイプとその目的の概要を示します。

タイプ

説明

使用場面

ホスティング

ナビゲーション ホスト全体を埋めます。つまり、ホストされたデスティネーションのサイズはナビゲーション ホストのサイズと同じであり、以前のデスティネーションは表示されません。

メイン画面と詳細画面

ダイアログ

オーバーレイ UI コンポーネントを表示します。この UI は、ナビゲーション ホストの場所やサイズに結びつけられていません。前のデスティネーションは、そのデスティネーションの下に表示されます。

アラート、選択、フォーム

アクティビティ

アプリ内の固有の画面または機能を表します。

Navigation コンポーネントとは別に管理される新しい Android アクティビティを開始するナビゲーション グラフの終了ポイントとして機能します。

最新の Android 開発では、アプリは 1 つのアクティビティで構成されています。そのため、アクティビティの宛先は、サードパーティのアクティビティとのやり取りや移行プロセスの一環として使用することをおすすめします。

このドキュメントでは、ホストされるデスティネーションの例を紹介します。これらは、最も一般的な一般的なデスティネーションです。他の宛先については、次のガイドをご覧ください。

フレームワーク

どのケースにも同じ一般的なワークフローが適用されますが、ナビゲーション ホストとグラフを作成する正確な方法は、使用する UI フレームワークによって異なります。

  • Compose: NavHost コンポーザブルを使用します。Kotlin DSL を使用して NavGraph を作成します。グラフは 2 つの方法で作成できます。
    • NavHost の一部として: NavHost の追加の一部として、ナビゲーション グラフを直接作成します。
    • プログラムから: NavController.createGraph() メソッドを使用して NavGraph を作成し、NavHost に直接渡します。
  • フラグメント: ビュー UI フレームワークでフラグメントを使用する場合は、NavHostFragment をホストとして使用します。ナビゲーション グラフを作成する方法はいくつかあります。
    • プログラムで行う場合: Kotlin DSL を使用して NavGraph を作成し、NavHostFragment に直接適用します。
      • Kotlin DSL で使用される createGraph() 関数は、フラグメントと Compose の両方で同じです。
    • XML: ナビゲーション ホストとグラフを XML で直接記述します。
    • Android Studio エディタ: Android Studio の GUI エディタを使用して、グラフを XML リソース ファイルとして作成して調整します。

Compose

Compose で、NavHost コンポーザブルを使用してナビゲーション グラフを作成します。次の例を考えてみましょう。

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "profile") {
    composable("profile") { Profile( /* ... */ ) }
    composable("friendslist") { FriendsList( /* ... */ ) }
    // Add more destinations similarly.
}
  1. NavHost コンポーザブルを呼び出すと、開始デスティネーションに対応する NavControllerroute 文字列が渡されます。
  2. NavHost に渡されたラムダは、最終的に NavController.creatGraph() を呼び出し、NavGraph を返します。
  3. NavGraphBuilder.composable() を呼び出すと、結果の NavGraph にデスティネーションが追加されます。
  4. この場合、デスティネーションは ProfileFriendsList のコンポーザブルです。ルート文字列 "profile""friendslist" が、2 つのデスティネーションを識別するキーになります。

NavGraph を作成するラムダについて理解を深めるために、上記のスニペットと同じグラフを作成するには、NavController.createGraph() を使用して NavGraph を個別に作成し、NavHost に直接渡すと仮定します。

val navGraph by remember(navController) {
  navController.createGraph(startDestination = "profile") {
    composable("profile") { Profile() }
    composable("friendslist") { FriendsList() }
  }
}
NavHost(navController, navGraph)

最小限の例

以下に、NavControllerNavHost が連携して動作する必要最小限の例を示します。

// Define the Profile composable.
@Composable
fun Profile(onNavigateToFriendsList: () -> Unit) {
  Text("Profile")
  Button(onClick = { onNavigateToFriendsList() }) {
    Text("Go to Friends List")
  }
}

// Define the FriendsList composable.
@Composable
fun FriendsList(onNavigateToProfile: () -> Unit) {
  Text("Friends List")
  Button(onClick = { onNavigateToProfile() }) {
    Text("Go to Profile")
  }
}

// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
  val navController = rememberNavController()
  NavHost(navController, startDestination = "profile") {
    composable("profile") { Profile(onNavigateToFriendsList = { navController.navigate("friendslist") }) }
    composable("friendslist") { FriendsList(onNavigateToProfile = { navController.navigate("profile") }) }
  }
}

スニペットが示すように、NavController をコンポーザブルに渡す代わりに、イベントを NavHost に公開します。つまり、コンポーザブルには、NavHostNavController.navigate() を呼び出すラムダを渡す () -> Unit 型のパラメータが必要です。

フラグメント

前のセクションで説明したように、フラグメントを使用する場合、Kotlin DSL、XML、または Android Studio エディタを使用してプログラムでナビゲーション グラフを作成できます。

以降のセクションでは、これらのさまざまなアプローチについて詳しく説明します。

プログラムで行う場合

Kotlin DSL を使用すると、フラグメントを含むナビゲーション グラフをプログラムで作成できます。多くの点で、XML リソース ファイルを使用するよりも、この方法は便利で最新です。

2 画面のナビゲーション グラフを実装する次の例を考えてみましょう。

まず、NavHostFragment を作成する必要があります。これには app:navGraph 要素を含めないでください。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

次に、NavHostFragmentidNavController.findNavController() に渡します。これにより、NavController が NavHostFragment に関連付けられます。

その後、NavController.createGraph() の呼び出しにより、グラフが NavController にリンクされ、その結果として NavHostFragment にもリンクされます。

// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = "profile"
) {
    // Associate each destination with one of the route constants.
    fragment<ProfileFragment>("profile") {
        label = "Profile"
    }

    fragment<FriendsListFragment>("friendsList") {
        label = "Friends List"
    }

    // Add other fragment destinations similarly.
}

このような DSL の使用は、前の Compose のセクションで説明したワークフローと非常によく似ています。たとえば、こことここの両方で、NavController.createGraph() 関数が NavGraph を生成します。同様に、NavGraphBuilder.composable() はコンポーズ可能なデスティネーションをグラフに追加しますが、ここで NavGraphBuilder.fragment() はフラグメント デスティネーションを追加します。

Kotlin DSL の使用方法について詳しくは、NavGraphBuilder DSL でグラフを作成するをご覧ください。

XML

XML は自分で直接記述できます。次の例はミラーリングされ、前のセクションの 2 画面の例と同じです。

まず、NavHostFragment を作成します。これは、実際のナビゲーション グラフを含むナビゲーション ホストとして機能します。

NavHostFragment の最小実装は次のとおりです。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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:navGraph="@navigation/nav_graph" />

</FrameLayout>

NavHostFragment に属性 app:navGraph が含まれている。この属性を使用して、ナビゲーション グラフをナビゲーション ホストに接続します。グラフの実装方法の例を次に示します。

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/profile">

    <fragment
        android:id="@+id/profile"
        android:name="com.example.ProfileFragment"
        android:label="Profile">

        <!-- Action to navigate from Profile to Friends List. -->
        <action
            android:id="@+id/action_profile_to_friendslist"
            app:destination="@id/friendslist" />
    </fragment>

    <fragment
        android:id="@+id/friendslist"
        android:name="com.example.FriendsListFragment"
        android:label="Friends List" />

    <!-- Add other fragment destinations similarly. -->
</navigation>

アクションを使用して、異なるデスティネーション間の接続を定義します。この例では、profile フラグメントに、friendslist に移動するアクションが含まれています。詳細については、ナビゲーション アクションとフラグメントを使用するをご覧ください。

編集者

Android Studio のナビゲーション エディタを使用してアプリのナビゲーション グラフを管理できます。これは基本的に、前のセクションで説明した NavigationFragment XML の作成と編集に使用できる GUI です。

詳細については、ナビゲーション エディタをご覧ください。

ネストされたグラフ

ネストされたグラフを使用することもできます。グラフをナビゲーション デスティネーションとして使用します。詳細については、ネストされたグラフをご覧ください。

関連情報

ナビゲーションの基本コンセプトについては、次のガイドをご覧ください。