Compose with navigation (1) : 화면 이동

Compose에서는 화면 이동을 어떻게 할까요? 

Compose에서는 navigation을 활용하여 화면을 이동할 수 있습니다. 

 

Compose의 navigation에서도 navigation Graph, navHost, navController가 사용되고 있습니다. 

 

• navigation Graph : 간단히 말해서 목적지를 정의합니다. 또한 그것이 다른 화면과 어떠한 연관이 있는지 파악할 수 있습니다. 
• navHost : navController를 보관합니다. 
• navController : 화면 간 이동 및 백스텍 관리와 관련이 있습니다. 즉, navigation Graph를 다루는 기능을 가지고 있다고 생각하면 이해가 좀 더 쉬울 것 같습니다.

위의 3개의 navigation Graph, navHost, navController를 기반으로 하여 화면 간의 이동을 컨트롤할 수 있습니다. 

 

---

이제 코드 작성을 해보겠습니다. 

 

def nav_version = "2.5.3"
    implementation "androidx.navigation:navigation-compose:$nav_version"

코드 작성 이전에 build.gradle(app)의 dependencies에 코드를 추가해줍니다. 

 

 

@Composable
fun ScreenOne(navController: NavHostController) {
    Column {
        Text(text = "첫번째 페이지 입니다.")
        Button(onClick = { navController.navigate("screen_two") }) {
            Text(text = "다음")
        }
    }
}

@Composable
fun ScreenTwo(navController: NavHostController) {
    Column {
        Text(text = "두번째 페이지 입니다")
        Button(onClick = { navController.navigate("screen_one") }) {
            Text(text = "이전")
        }
    }
}

간단하게 화면 이동을 보여주기 위한 코드를 작성하였습니다. 

명확한 구분을 위해 ScreenOne, ScreenTwo 로 이름을 명명하였고, 페이지 확인을 위한 Text 및 클릭 시 화면 이동을 위한 Button을 만들었습니다.

 

버튼 클릭한 경우에, navController.navigate("screen_one")이라는 코드가 실행되는 것을 확인할 수 있는데

여기에 "screen_one"은 하단의 코드에서 지정해준 경로입니다. 

 

경로를 지정해준 후, 원하는 화면으로 이동할 수 있게 지정해둔 경로를 입력해주면, 특정 경로로 이동이 가능합니다. 

@Composable
fun MyNavGraph() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "screen_one") {
        composable("screen_one") { ScreenOne(navController) }
        composable("screen_two") { ScreenTwo(navController) }
    }
}

이제 페이지를 만들었으니, 화면 간의 이동을 navigation을 활용하여 구현해줄 차례입니다. 

stateful한 환경이기에 rememberNavController 를 사용합니다. 

그 후 경로를 지정해주어야 합니다. 

 

저는 경로를 "screen_one" , "screen_two" 로 지정해주었습니다. 

화면을 시작하였을 때, 가장 먼저 ScreenOne을 보고 싶기 때문에 startDestination에는 "screen_one"을 입력하였습니다.

@Composable
fun MainUI() {
    MainTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            MyNavGraph()
        }
    }
}

이제 작성한 코드를 사용하면 됩니다 :) 

 

---

Compose with navigation (2) 에서는 Navigation Arguments에 대해 글을 작성할 계획입니다. 

 

읽어주셔서 감사합니다.