MENU

【Jetpack Compose】画面遷移のやり方

記事内に商品プロモーションが含まれる場合があります

Jetpack Composeには標準で画面遷移の機能がないため、画面遷移を実現するにはパッケージを導入する必要があります。

目次

画面遷移のためのパッケージを導入

Navigation Composeというライブラリを使用します。

build.gradledependencies内に以下を追加します。

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 が表示されます。

Screen1Screen2 は後ほど生成しますが、それぞれ画面を表します。

画面の作成

Screen1Screen2 の画面を作成します。

// 画面1
@Composable
fun Screen1(navController: NavController) {
    // Screen1 のコンポーネントを構築する
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow)
    ) {
        Button(
            onClick = { navController.navigate("screen2") }
        ) {
            Text(text = "画面2へ")
        }
    }
}

// 画面2
@Composable
fun Screen2(navController: NavController) {
    // Screen2 のコンポーネントを構築する

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {
        Button(
            onClick = {
                navController.navigate("screen1")
            }
        ) {
            Text(text = "画面1に戻る")
        }
    }
}

ボタンをタップしたときに、navController.navigate("画面名") を使用して、画面間のナビゲーションを実現しています。

実行結果

Share
  • URLをコピーしました!

Comment

コメントする

目次