Android Compose Navigation 기초 2 - Argument 보내기

저번에는 Compose에서 Navigation을 통해 간단한 화면 이동을 배웠습니다.

 

이번에는 화면 이동할  때 argument를 같이 넘기는 법을 알아보고자 합니다.

 

그 전에 하나 궁금한 것이 있어서 검색을 해본 것이 있는데요.

 

object Route {
    const val screenOne = "screenOne"
    const val screenTwo = "screenTwo"
    const val screenThree = "screenThree"
}

 

 

지난번에 쓰던 코드인데 Route를 이런식으로 많이 쓰더라구요. 근데 다른 영상을 보니까 sealed로 만드는 영상도 있었습니다.

 

해당 코드는 지금 만들고 있는 프로젝트에서 쓰고 있는 코드인데요. 저도 sealed로 개발을 했습니다.

사실 크게 차이가 없어보이는데요.

 

sealed class Screen(val route: String) {
    object MainScreen : Screen("main_screen")
    object SearchScreen : Screen("search_screen/{searchId}") {
        fun searchCharacter(searchId: String) = "search_screen/$searchId"
    }

}

 

stackoverflow에서 비슷한 질문을 하나 찾았습니다.

https://stackoverflow.com/questions/69686087/why-use-sealed-class-and-make-object-in-navigation-kotlin-jetpack-compose

Why use "sealed class" and make object in Navigation? (Kotlin Jetpack Compose)

왜 sealed class로 만들어 놓냐 ? 

 

제가 이해한 바로는 argument가 있을 때는 sealed class로 묶어 놓는게 좋다고 합니다. 

 

그럼 이어서 argument를 어떻게 주는지 알아보겠습니다.

 

우선 NavHost를 만들고 그 안에 화면들을 정의해줍니다.

 

composable(route = Screen.MainScreen.route) {
    MainView(navController = navController)
}

제 메인화면인데요 메인화면은

 

아이디인 이유는 메이플 캐릭터 검색을 만들고 있어서 그렇습니당...

 

이렇게 생겼습니다.

 

그럼 저희는 아이디를 입력하면 밑에 있는 버튼을 누르면 페이지가 변경이 되면서 입력한 값이

다음 페이지에 넘어가면 완성입니다.

 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainView(navController: NavController) {
    
    var id by remember { mutableStateOf(TextFieldValue("")) }
    
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Screen 1")
        TextField(value = id, onValueChange = {s -> id = s }, placeholder = { Text(text = "아이디를 입력해주세요.")}, singleLine = true)
        Button(onClick = { navController.navigate(Screen.SearchScreen.searchCharacter(id.text.toString())) }) {
            Text(text = "Navigate to next screen")
        }
    }
}

 

해당 화면 코드입니다.

 

우선 데이터만 넘어가는걸 확인하고 싶어서 화면은 간단하게 만들었습니다.

 

TexField에 들어온 값을 Button을 눌렀을 때 넘겨주면 됩니다.

 

기본적인 사용 방법은 Android developer에서 찾아볼 수 있습니다.

 

보통은 search_screen/{searchId} 이렇게 해서 전달해도 문제가 없다.

 

{ } 이부분이 argument가 들어가는 부분이다 / 로 구분을 한다.

 

 

composable(
    route = Screen.SearchScreen.route,
    arguments = listOf(navArgument(name = "searchId") {
        type = NavType.StringType
    })
) { it ->
    ParallaxEffect(
        navigateBack = {
            navController.popBackStack(
                route = Screen.MainScreen.route,
                inclusive = false
            )
        },
        id = it.arguments?.getString("searchId", ""),
        viewModel = viewModel,
        activity = activity
    )
}

 

 해당 코드는 버튼을 누르고 화면이 이동한 후 나오는 화면이다. 

 

우리가 위에서 argument name을 searchId로 해주었기 때문에 searchId을 찾아주면 된다 Type은 String

찾아온 것을 view에 담아주는 작업이다 it은 navBackStackEntry이다.  navBackStackEntry에서 argument를 찾으면된다.

 

혹시 몰라 default값은 ""으로 해줬다.

 

 

 

 

안녕하세요 텍스트가 위에 찍혀있다.

 

2023-11-06 19:23:08.461  83358335  TAG                     com.example.masearch                 D  ParallaxEffect: receivedText 안녕하세요
2023-11-06 19:23:08.461  8335-8335  TAG                     com.example.masearch                 D  ParallaxEffect: ID 안녕하세요

 

인자를 받았을 때 찍힌 로그입니다. 혹시 몰라서 두 번 찍었습니다.

 

이제 이런식으로 인자를 보낼 수 있다.

 

 

 

 

사실 해당 프로젝트는 메이플 캐릭터 검색을 할려고 만든 프로젝트입니다.

 

이제 원래는 이제 보냈을 때 화면이 바뀌고 Api 통신을 해서 데이터를 가져와야 하지만 ~ 현재 친구가 만들어준 서버가 안되다 보니 화면이 나오지는 않고 있다 .. ㅠ 가끔 됨

 

12월 쯤에 메이플에서 공식 캐릭터 검색 Api를 내준다고 하니 그거만 기다리고 있다..