Jetpack Compose Navigaion 화면 이동

Navigation을 이용하여 Compose 화면 이동을 해보자.

사용방법은 간단하다. Navigation은 Compose가 나오기전부터 제공하고 있었다.

Compose용 Navigation을 사용하면 된다.

startActivity와 같은 구식 방식은 버리고, 선언형 프로그래밍에 어울리는 Navigation을 활용해보자.

 

1. 앱 모듈의 build.gradle에 아래 항목을 삽입하자.

(참고: https://developer.android.com/jetpack/compose/navigation?hl=ko#setup)

dependencies {
	def nav_version = "2.5.2"
	implementation "androidx.navigation:navigation-compose:$nav_version"
}

 

2. 화면이동을 위해 간단한 컴포즈 화면 2개를 만든다.

MainView라는 리스트 화면을 만들고

리스트를 클릭하면 리스트 내용을 보여주는 DetailView화면을 만든다.

 

2-1. MainView

@Composable
fun MainView(navController: NavController) {
    LazyColumn {
        items(100) {
            val data = "List: $it"
            Text(text = data, modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .clickable {
                    navController.navigate("detail/$data")
                })
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(0.5.dp)
                    .background(color = Color.LightGray)
            )
        }
    }
}

 

2-2. DetailView

@Composable
fun DetailView(data: String) {
    Text(text = data, modifier = Modifier.padding(10.dp))
}

 

3. NavHost 구현

val navController = rememberNavController()
NavHost(navController = navController, startDestination = "main") {
    composable(route = "main") {
        MainView(navController)
    }
    composable(route = "detail/{data}") { backStackEntry ->
        val data = backStackEntry.arguments?.getString("data") ?: "no data"
        DetailView(data = data)
    }
}

 

* navController: NavController와 현재 상태를 사용하기 위해 필수

* startDestination: Activity가 실행되면 처음으로 띄워줄 화면명

* route: 컴포저블 화면명, 컴포저블로 이동시킬 때 사용

* detail/{data}: detail이라는 컴포저블에 data라는 값을 전달, 마치 웹개발 방식과 흡사하다.

 

4. 결과