[Compose] Navigation

프로젝트를 진행하면서 Navigation기능을 많이 사용하였다.

프래그먼트간의 이동을 더욱 편리하게하고, safe Args특성을 사용하여 데이터 전달을 더욱 안전하게 할 수 있기 때문이다.

 

컴포즈에서도 네비게이션을 사용하여 뷰를 옮길 수 있으며 데이터도 전달할 수 있다.

결과화면

두 번째 화면의 이동은 아무런 조건 없이 가능하고, 세 번째 화면의 이동은 해당 textField에서 입력한 값이 있어야만 가능하고, 이동했을 때의 세 번째 화면에서는 해당 textfield에 있던 값을 띄워보자!

 

gradle파일에 navigation compose 라이브러리를 작성하자.

implementation 'androidx.navigation:navigation-compose:2.4.0-alpha10'

setContent {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "first"
    ){
        composable("first"){
            FirstScreen(navController)
        }
        composable("second"){
            SecondScreen(navController)
        }
        composable("third/{value}"){ backStackEntry ->
            ThirdScreen(
                navController = navController,
                value = backStackEntry.arguments?.getString("value") ?: ""
            )
        }
    }
}

먼저 setContent이다. navController를 이용하여 첫 번째 띄울 화면을 정하여 NavHost에 담는다.

그리고 해당화면을 FirstScreen, Second, Third로 정하였다.

먼저 첫 번째 화면과 두 번째 화면을 살펴보자.

@Composable
fun FirstScreen(navController: NavController){
    val (value, setValue) = remember{
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Text(text = "첫 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigate("second")
        }){
            Text(text = "두 번째")
        }
        Spacer(modifier = Modifier.height(16.dp))
        TextField(value = value, onValueChange = setValue)
        Button(onClick = {
            if(value.isNotEmpty()){
                navController.navigate("third/$value")
            }
        }){
            Text(text = "세 번째")
        }
    }
}

navController를 통해 화면을 변경해주어야 하기 때문에 해당 뷰가 생성될 때 생성자로 navController를 받게된다.

또한 전 글에서 포스팅했던 구조분해를 통해 입력되는 값이 실제로 입력되는 것처럼 보이게 설정한다.

또한, 두 번째 버튼을 클릭했을 때 navController를 통해 second화면으로 이동하는 것을 구현하였다.

 

이제 두 번째 화면을 살펴보자.

@Composable
fun SecondScreen(navController: NavController){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Text(text = "두 번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigateUp()
//            navController.popBackStack()
        }){
            Text(text = "뒤로 가기")
        }
    }
}

여기서 주의할 점은 navController.navigateUp()을 통해 바로 전 화면으로 돌아갈 수 있다.

컴포즈가 아닌 프래그먼트에서도 이 기능을 사용했더라면 익숙할 것이다.  navigateUp말고도 popBackStack()을 사용하여 전 화면으로 돌아갈 수 있다.

 

이제 세 번째 화면으로 옮기는 부분을 봐보자.

Button(onClick = {
    if(value.isNotEmpty()){
        navController.navigate("third/$value")
    }
}){
    Text(text = "세 번째")
}

navigate를 단순히 third로 가는 것이 아니라, value값을 들고가기 때문에 위의 처럼 적어주었다.

composable("third/{value}"){ backStackEntry ->
    ThirdScreen(
        navController = navController,
        value = backStackEntry.arguments?.getString("value") ?: ""
    )
}

따라서 navHost에서 적어줄 때에도 쿼리스트링 적어준 것처럼 중괄호로 { } 해당 value값을 받는다.

이 때 composable에 있는 NavBackStackEntry를 통해 받은 argument를 value값에 저장해 세 번째 화면에 전달한다.

이 때 해당 값이 null 일 수 있으니 안전하게 ?와 null일 때 반환하는 값도 적어준다.

@Composable
fun ThirdScreen(navController: NavController, value : String){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Text(text = "세 번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Text(value)
        Button(onClick = {
            navController.popBackStack()
        }){
            Text(text = "뒤로 가기")
        }
    }
}

이제 세 번째 화면이다.

받은 value값을 text에 지정해주면 끝!! 여기서는 popBackStack을 통해 전 화면으로 돌아가게 구현하였다.

 

 

GitHub - SsongSik/Jetpack_Compose: Creating apps using Jetpack Compose