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)
}
}
まとめ
Navigation Compose
を使用することで、シンプルに画面遷移を実装可能。NavController
とNavHost
を組み合わせて画面を管理。composable
関数を利用して各画面を定義。- パラメータを渡すことで、動的なデータの受け渡しが可能。
Jetpack ComposeのNavigationを活用し、柔軟なUIを構築してみましょう!