Navigation コンポーネントは、ナビゲーション グラフを使用してアプリのナビゲーションを管理します。ナビゲーション グラフは、アプリ内の各デスティネーションとそれらの間の接続を含むデータ構造です。
目的地のタイプ
デスティネーションには、ホスト、ダイアログ、アクティビティの 3 つの一般的なタイプがあります。次の表に、これら 3 つのデスティネーション タイプとその目的の概要を示します。
タイプ |
説明 |
使用場面 |
---|---|---|
ホスティング |
ナビゲーション ホスト全体を埋めます。つまり、ホストされたデスティネーションのサイズはナビゲーション ホストのサイズと同じであり、以前のデスティネーションは表示されません。 |
メイン画面と詳細画面 |
ダイアログ |
オーバーレイ UI コンポーネントを表示します。この UI は、ナビゲーション ホストの場所やサイズに結びつけられていません。前のデスティネーションは、そのデスティネーションの下に表示されます。 |
アラート、選択、フォーム |
アクティビティ |
アプリ内の固有の画面または機能を表します。 |
Navigation コンポーネントとは別に管理される新しい Android アクティビティを開始するナビゲーション グラフの終了ポイントとして機能します。 最新の Android 開発では、アプリは 1 つのアクティビティで構成されています。そのため、アクティビティの宛先は、サードパーティのアクティビティとのやり取りや移行プロセスの一環として使用することをおすすめします。 |
このドキュメントでは、ホストされるデスティネーションの例を紹介します。これらは、最も一般的な一般的なデスティネーションです。他の宛先については、次のガイドをご覧ください。
フレームワーク
どのケースにも同じ一般的なワークフローが適用されますが、ナビゲーション ホストとグラフを作成する正確な方法は、使用する UI フレームワークによって異なります。
- Compose:
NavHost
コンポーザブルを使用します。Kotlin DSL を使用してNavGraph
を作成します。グラフは 2 つの方法で作成できます。- NavHost の一部として:
NavHost
の追加の一部として、ナビゲーション グラフを直接作成します。 - プログラムから:
NavController.createGraph()
メソッドを使用してNavGraph
を作成し、NavHost
に直接渡します。
- NavHost の一部として:
- フラグメント: ビュー UI フレームワークでフラグメントを使用する場合は、
NavHostFragment
をホストとして使用します。ナビゲーション グラフを作成する方法はいくつかあります。- プログラムで行う場合: Kotlin DSL を使用して
NavGraph
を作成し、NavHostFragment
に直接適用します。- Kotlin DSL で使用される
createGraph()
関数は、フラグメントと Compose の両方で同じです。
- Kotlin DSL で使用される
- XML: ナビゲーション ホストとグラフを XML で直接記述します。
- Android Studio エディタ: Android Studio の GUI エディタを使用して、グラフを XML リソース ファイルとして作成して調整します。
- プログラムで行う場合: Kotlin DSL を使用して
Compose
Compose で、NavHost
コンポーザブルを使用してナビゲーション グラフを作成します。次の例を考えてみましょう。
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "profile") {
composable("profile") { Profile( /* ... */ ) }
composable("friendslist") { FriendsList( /* ... */ ) }
// Add more destinations similarly.
}
NavHost
コンポーザブルを呼び出すと、開始デスティネーションに対応するNavController
とroute
文字列が渡されます。NavHost
に渡されたラムダは、最終的にNavController.creatGraph()
を呼び出し、NavGraph
を返します。NavGraphBuilder.composable()
を呼び出すと、結果のNavGraph
にデスティネーションが追加されます。- この場合、デスティネーションは
Profile
とFriendsList
のコンポーザブルです。ルート文字列"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)
最小限の例
以下に、NavController
と NavHost
が連携して動作する必要最小限の例を示します。
// 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
に公開します。つまり、コンポーザブルには、NavHost
が NavController.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>
次に、NavHostFragment
の id
を NavController.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 です。
詳細については、ナビゲーション エディタをご覧ください。
ネストされたグラフ
ネストされたグラフを使用することもできます。グラフをナビゲーション デスティネーションとして使用します。詳細については、ネストされたグラフをご覧ください。
関連情報
ナビゲーションの基本コンセプトについては、次のガイドをご覧ください。
- 概要: Navigation コンポーネントの一般的な概要をお読みください。
- アクティビティ デスティネーション: ユーザーをアクティビティに誘導するデスティネーションの実装方法の例。
- ダイアログ デスティネーション: ユーザーをダイアログに移動するデスティネーションを作成する方法の例。
- デスティネーションに移動する: デスティネーション間で移動する方法を説明する詳細なガイド。
- ネストされたグラフ: あるナビゲーション グラフを別のナビゲーション グラフ内にネストする方法に関する詳細なガイドです。