[Android] Compose Navigation 사용하기

먼저 다음 공식 사이트의 글을 참조하면 더욱 정확히 알 수 있다.

https://developer.android.com/codelabs/basic-android-kotlin-compose-navigation?hl=ko

Compose를 사용하여 화면 간 이동  |  Android Developers

 

Android에서 Compose를 사용할 때의 화면 전환 방법은 기존과 다르다.

기존에는 Intent를 사용하여 화면 전환을 쉽게 할 수 있었지만, Compose에서는 NavHost를 사용하여야 한다.

그러면, NavHost를 활용한 Compose에서의 화면 전환에 대해 알아보자.

 

enum class AppleGameScreen(){
    Main,
    Game,
    Score
}

 

먼저 화면 이름 변수들을 포함하는 enum을 정의한다.

메인 페이지, 게임 페이지, 점수 페이지를 사용할 것이기 때문에 다음과 같이 enum을 정의하였다.

 

// MainActivity.kt

setContent {
    AppleGameTheme {
        val navController = rememberNavController()
        NavHost(
            navController = navController,
            startDestination = AppleGameScreen.Main.name,
        ){
            composable(route = AppleGameScreen.Main.name){
                MainScreen(navController = navController)
            }
            composable(route = AppleGameScreen.Game.name){
                GameScreen()
            }
            composable(route = AppleGameScreen.Score.name){
                ScoreScreen()
            }
        }
    }
}

 

MainActivity.kt에서 NavHost()를 정의한다.

먼저 NavHost에 navController와 startDestination을 정의해주어야한다.

navController는 rememberNavController()를 통해 정의하고 사용하고,

startDestination은 앱이 시작됐을 때 보여질 화면을 넣어주면 된다.

 

이후에는 이 앱에서 사용되는 모든 화면에 대해서, composable()을 정의해주면 된다.

composable()에서는 route로 enum의 이름과 보여질 화면을 연결해주면 된다.

 

// MainScreen.kt

@Composable
fun MainScreen(
    navController: NavController,
){
    Scaffold { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .padding(16.dp)
        ){
            Text(text="Main Screen")
            Button(onClick = {navController.navigate(AppleGameScreen.Game.name)}) {
                Text(text="Go to Game Screen")
            }
            Button(onClick = {navController.navigate(AppleGameScreen.Score.name)}) {
                Text(text="Go to Score Screen")
            }
        }

    }

}

 

startDestination에서 정의했던 MainScreen이다.

여기서도 navController를 사용해주어야 하기 때문에, 파라미터로 navController를 전달받는다.

그리고 다른 페이지로 이동하고 싶다면 전달받은 navController에서 .navigate() 함수를 이용하여

다른 페이지로 이동할 수 있다.