Navigation Composeによる画面遷移とデータの受け渡し【Jetpack Compose入門⑧】

Jetpack ComposeにおけるNavigationの基本
1. Navigation Composeとは？
2. Navigation Composeの依存関係を追加
画面遷移の基本実装
データの受け渡し
1. 画面間でパラメータを渡す方法
2. 受け取る側の実装
まとめ

Jetpack ComposeにおけるNavigationの基本

Navigation Composeとは？

Jetpack Composeでは、Navigation Composeライブラリを使用して画面間の遷移を管理できます。従来のFragmentやIntentを使った画面遷移とは異なり、シンプルかつ直感的にナビゲーションを実装できます。

NavHostを使用することで、アプリ内の異なる画面を管理し、NavControllerを使って遷移を制御します。

Navigation Composeの依存関係を追加

まず、Navigation Composeを使用するために、以下の依存関係をbuild.gradle（Module: app）に追加します。

dependencies {
    implementation("androidx.navigation:navigation-compose:2.5.3")
}

画面遷移の基本実装

NavControllerの設定

Jetpack Composeでは、NavControllerを使用して画面を管理します。NavHostの中に、各画面のルートを定義し、画面間の遷移を実装します。

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailScreen() }
    }
}

HomeScreenの実装

ホーム画面から詳細画面へ遷移するボタンを実装します。

@Composable
fun HomeScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "ホーム画面", fontSize = 24.sp)
        Button(onClick = { navController.navigate("details") }) {
            Text(text = "詳細画面へ")
        }
    }
}

DetailScreenの実装

詳細画面を表示するシンプルなComposable関数を作成します。

@Composable
fun DetailScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "詳細画面", fontSize = 24.sp)
    }
}

データの受け渡し

画面間でパラメータを渡す方法

画面遷移の際にデータを渡す場合、NavControllerのnavigateメソッドを利用します。

composable("details/{message}") { backStackEntry ->
    DetailScreen(message = backStackEntry.arguments?.getString("message") ?: "デフォルトメッセージ")
}

遷移時には以下のようにパラメータを渡します。

navController.navigate("details/こんにちは！")

受け取る側の実装

DetailScreenで渡されたメッセージを表示します。

@Composable
fun DetailScreen(message: String) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "受け取ったメッセージ: $message", fontSize = 24.sp)
    }
}