Wear OS용 Compose를 사용한 탐색

Android Jetpack의 Navigation 구성요소는 Jetpack Compose 애플리케이션을 지원합니다. Navigation 구성요소의 인프라와 기능을 활용하면서 컴포저블 간에 이동할 수 있습니다.

이 페이지에서는 Wear OS용 Compose의 Jetpack Navigation과의 차이점을 설명합니다.

설정

앱 모듈의 build.gradle 파일에서 다음 종속 항목을 사용합니다.

Kotlin

dependencies {
    def wear_compose_version = "1.4.0"
    implementation "androidx.wear.compose:compose-navigation:$wear_compose_version"
}

이는 androidx.navigation:navigation-compose 아티팩트 대신 사용됩니다. Wear OS와 관련된 대체 구현을 제공하기 때문입니다.

탐색 컨트롤러, 호스트, 그래프 만들기

Wear OS용 Compose로 탐색하려면 Wear OS가 아닌 앱에서 필요한 동일한 세 가지 구성요소인 탐색 컨트롤러, 호스트, 그래프가 필요합니다.

rememberSwipeDismissableNavController()를 사용하여 Wear OS 애플리케이션에 적합한 NavController의 구현인 WearNavigator의 인스턴스를 만듭니다.

Kotlin

val navController = rememberSwipeDismissableNavController()

NavController는 Compose 애플리케이션에서 탐색하는 데 사용되는 기본 API입니다. Wear OS에서 SwipeDismissableNavHost인 탐색 호스트의 컴포저블 간 탐색을 제어합니다.

Kotlin

val navController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
    navController = navController,
    startDestination = "message_list"
) {
    // TODO: build navigation graph
}

NavHost 컴포저블과 마찬가지로 탐색 컨트롤러, 시작 대상의 경로, 여기서 후행 람다로 표시되는 탐색 그래프의 빌더를 참조합니다.

시작 대상은 탐색 컨트롤러로 탐색할 수 있어야 하는 다른 모든 대상과 함께 탐색 그래프 빌더에 제공되어야 합니다.

Wear OS 앱에서 시간, 스크롤/위치 표시기, 페이지 표시기와 같은 최상위 구성요소를 지원하도록 SwipeDismissableNavHost를 Scaffold의 콘텐츠로 선언합니다. 화면 수준에서 SwipeDismissableNavHost 위에 있는 Horologist AppScaffold 객체를 사용하고 화면 수준에서 Horologist ScreenScaffold를 사용하여 기본적으로 TimeText 객체를 화면에 추가하고 화면 간에 이동할 때 올바르게 애니메이션되도록 합니다. 또한 ScreenScaffold는 스크롤해야 하는 콘텐츠를 위해 PositionIndicator를 추가합니다. 

AppScaffold {
    val navController = rememberSwipeDismissableNavController()
    SwipeDismissableNavHost(
        navController = navController,
        startDestination = "message_list"
    ) {
        composable("message_list") {
            MessageList(onMessageClick = { id ->
                navController.navigate("message_detail/$id")
            })
        }
        composable("message_detail/{id}") {
            MessageDetail(id = it.arguments?.getString("id")!!)
        }
    }
}
// ...
// .. Screen level content goes here
val scrollState = rememberScrollState()

ScreenScaffold(scrollState = scrollState) {
    // Screen content goes here
Navigation.kt

Jetpack Navigation에 관한 자세한 내용은 Compose로 탐색을 참고하거나 Jetpack Compose Navigation Codelab을 진행하세요.