Wear OS용 Compose를 사용한 탐색

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

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

설정

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

Kotlin

dependencies {
    def wear_compose_version = "1.4.1"
    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를 AppScaffold의 콘텐츠로 선언합니다. SwipeDismissableNavHost 위의 AppScaffold 객체와 화면 수준의 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")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

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

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