[Android] Jetpack Compose Navigation 적용해서 화면 이동하기

 

 

안드로이드에 Compose로 구현한다면

화면 이동할 때도 Compose Navigation을 써줘야 하지 않겠습니까?

 

아래와 같은 상황들에서 적용할 수 있는 예시를 적어보고자 합니다.

1. 화면 이동하기

2. 인자 전달하기

2-1. String 타입 이동

2-2. 커스텀 데이터 모델 (Parcelable 타입) 이동

 

---

우선 build.gradle(app)에 아래 dependency 추가가 필요합니다.

dependencies {
    def nav_version = "2.6.0"

    implementation "androidx.navigation:navigation-compose:$nav_version"
}

 

최신 버전은 공식문서에서 확인할 수 있습니다.

https://developer.android.com/jetpack/compose/navigation

Compose를 통해 이동  |  Jetpack Compose  |  Android Developers

 

---

1. 화면 이동하기

Intro 화면에서 List 화면으로 이동한다는 예시로 해보겠습니다.

 

 

화면들의 경로를 한눈에 볼 수 있도록 Screens 클래스를 생성해서 정리해줍니다.

sealed class Screens(
    val route: String
) {
    object IntroScreen: Screens("intro_screen")

    object ListScreen: Screens("list_screen")
}

괄호 안에 쓰인 "intro_screen"같은 경로는 상수로 지정하거나, string 파일에 지정해서 가져와줘도 됩니다.

 

 

그리고 AppNavHost 함수를 생성해줍니다.

화면 전환 처리 도구인 navController를 관리하고 여러 화면으로의 전환을 처리하는 함수로,

따로 파일을 만들어도 되고, Compose Screen들이 떠 있는 Activity(혹은 Fragment)에서 작성해주셔도 됩니다.

 

@Composable
    fun AppNavHost(navController: NavHostController) {
        NavHost(navController = navController, startDestination = Screens.IntroScreen.route) {
            composable(Screens.IntroScreen.route) {
                IntroScreen(navController)
            }
            composable(Screens.ListScreen.route) {
                ListScreen(navController)
            }
        }
    }

 

 

그리고 Activity에서 해당 함수를 호출해주면 Navigation을 쓰기 위한 준비과정이 끝납니다.

 @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun MyApp() {
        val navController = rememberNavController()

        Scaffold(
            modifier = Modifier.fillMaxSize()
        ) { _innerPadding ->
            Box(
                modifier = Modifier.padding(_innerPadding)
            ) {
                AppNavHost(navController = navController)
            }
        }
    }

여기서 이용하는 navController는 state hoisting를 위해 한 군데서만 생성해 관리해주는 것이 좋습니다.

 

 

 

여기서 이제 Intro 화면에서 버튼을 눌러 List 화면으로 가고자 한다면,

BottomButton(
	onClick = {
		navController.navigate(
			Screens.ListScreen.route
		)
	},
	buttonTitle = "다음"
)

위 코드와 같이, 

navController.navigate(Screens.ListScreen.route) 로 이동이 가능합니다.

 

 

navController는 @Composable IntroScreen을 보여줄 때 파라미터로 navController를 넣어주는 걸 이용하는 겁니다.

 

 

---

2. 인자 전달하기

List Screen에서 Detail Screen으로 이동하는 예시를 들어보겠습니다.

 

 

먼저, String 타입과 같은 기본 데이터 타입 하나만 전달해보겠습니다.

제가 본 방법이 2개 있는데요

 

 

첫번째는 Screens 파일에서 경로에 포함시키는 방법입니다.

const val TITLE_ARGS = "TITLE"

sealed class Screens(val route: String) {

    object DetailScreen : Screens("detail_screen/{$TITLE_ARGS}") {
        fun withTitle(title: String): String {
            return this.route.replace(TITLE_ARGS, title)
        }
    }

}

 

경로에 전달할 인자를 지정해주고

함수를 하나 생성해 파라미터로 받은 인자를 경로에 포함시켜서 전달하는 방법입니다.

 

 

Activity의 AppNavHost함수에서는 

composable(
	route = Screens.DetailScreen.route,
	arguments = listOf(
		navArgument(TITLE_ARGS) {
			type = NavType.StringType
		}
	)
) { _backStackEntry ->
	val title = _backStackEntry.arguments!!.getString(TITLE_ARGS)!!
	DetailScreen(navController, title)
}

위와 같이 backStackEntry argument안에 넣어주고 받아와 Compose Screen을 보여줄 때 

필요한 데이터를 넘겨주면 됩니다.

 

 

 

만약에 이미지 url을 전달하고 싶은데 위와 같은 방법을 쓰면 다음과 같은 에러가 발생하는데요

java.lang.IllegalArgumentException: Navigation destination that matches request NavDeepLinkRequest{ uri=android-app://androidx.navigation

url 링크가 충돌나서 생기는 문제입니다.

그럴 때는 보내줄때 url을 encode하여 보내주면 됩니다.

val encodedUrl = URLEncoder.encode(_imageUrl , StandardCharsets.UTF_8.toString())

받은 곳에서는 별도의 처리 과정이 필요하지 않습니다.

 

 

 

두번째 방법은 navController의 BackStackEntry 속 saveStateHandle에 넣고 꺼내서 보내는 방법입니다.

이 방법은 Screens 클래스에서는 별도의 지정이 필요하지 않고

AppNavHost 함수에서 꺼내 전달하는 과정이 필요합니다.

 

composable(Screens.DetailScreen.route) {
	val data = remember {
		navController.previousBackStackEntry?.savedStateHandle?.get<String>("title")
	}
	if (data != null) {
		DetailScreen(navController, data)
	}
}

 

Detail을 보여줄 때는 navController.previousBackStackEntry의 savedStateHandle에 get해서 불러오고 

List에서 Detail로 이동시킬 때는 navController.currentBackStackEntry의 savedStateHandle에 set 해줍니다.

navController.currentBackStackEntry?.savedStateHandle?.set(key = "title", value = titleText)
navController.navigate(Screens.DetailScreen.route)

 

 

이 방법은 기본 데이터 타입이 아닌 직접 생성한 데이터 모델을 이동시켜야할 때 적용할 수 있는 방법인데요

 

 

@Parcelize
data class Menu(
    val name: String,
    val price: Int,
) : Parcelable

위와 같은 데이터 타입을 Parcelable 타입으로 생성해주고,

 

 

set, get해주는 타입을 Menu로만 바꿔주면 됩니다.

val data = remember {
	navController.previousBackStackEntry?.savedStateHandle?.get<Menu>("menu")
}
if (data != null) {
	DetailScreen(navController, data)
}

 

 

 

 

---

참고했던 글입니다.. 정말 많은 도움이 되었.. 🥲

https://velog.io/@mraz3068/Compose-Navigation-Argument-%EB%A1%9C-url-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0

Compose Navigation Argument 로 url 전달하기