Wear OS 向け Compose での Navigation

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"
}

これは、Wear OS 固有の代替実装を実現するため、androidx.navigation:navigation-compose アーティファクトの代わりに使用されます。

ナビゲーション コントローラ、ホスト、グラフを作成する

Wear OS 向け Compose を使用して移動するには、Wear OS 以外のアプリに必要な 3 つのコンポーネント（ナビゲーション コントローラ、ホスト、グラフ）が必要です。

rememberSwipeDismissableNavController() を使用して WearNavigator のインスタンスを作成します。これは、Wear OS アプリに適した NavController の実装です。

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 アプリで、時間、スクロール/位置インジケーター、ページ インジケーターなどの最上位コンポーネントをサポートするように、Scaffold のコンテンツとして SwipeDismissableNavHost を宣言します。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 のナビゲーションの Codelab を受講してください。