Jetpack Composeには標準で画面遷移の機能がないため、画面遷移を実現するにはパッケージを導入する必要があります。
目次
画面遷移のためのパッケージを導入
Navigation Composeというライブラリを使用します。
build.gradleのdependencies内に以下を追加します。
dependencies {
def nav_version = "2.5.0"
implementation "androidx.navigation:navigation-compose:$nav_version"
}バージョンはあなたの環境に合わせて調整してください。
追記できたら、Sync nowをクリックします。
ナビゲーションの設定
NavHost を使用してナビゲーションを設定します。
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
@Composable
fun MyApp() {
// ナビゲーションコントローラーを作成し、状態を保持します
val navController = rememberNavController()
// NavHost を使用して、画面間のナビゲーションを定義します
// startDestination は、最初に表示される画面を指定します
NavHost(navController = navController, startDestination = "screen1") {
// composable を使用して、各画面に対する Composable コンポーネントを指定します
composable("screen1") { Screen1(navController) } // "screen1" の場合は Screen1 を表示
composable("screen2") { Screen2(navController) } // "screen2" の場合は Screen2 を表示
}
}このコードでは、まずrememberNavController() 関数を使って、ナビゲーションを管理するための navController を作成しています。これにより、画面間のナビゲーションを実行するためのコントロールが提供されます。
次に、NavHost を使って、画面遷移のルートを定義しています。startDestinationには最初に表示するページを記入します。例では、"screen1" をスタート先として指定しています。
NavHost 内で、composable() を使用して各画面を指定しています。例えば、"screen1" の場合には Screen1 が表示され、"screen2" の場合には Screen2 が表示されます。
画面の作成
Screen1 と Screen2 の画面を作成します。
// 画面１
@Composable
fun Screen1(navController: NavController) {
// Screen1 のコンポーネントを構築する
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Yellow)
) {
Button(
onClick = { navController.navigate("screen2") }
) {
Text(text = "画面２へ")
}
}
}
// 画面２
@Composable
fun Screen2(navController: NavController) {
// Screen2 のコンポーネントを構築する
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Red)
) {
Button(
onClick = {
navController.navigate("screen1")
}
) {
Text(text = "画面１に戻る")
}
}
}
ボタンをタップしたときに、navController.navigate("画面名") を使用して、画面間のナビゲーションを実現しています。
実行結果
Comment