ניווט באמצעות 'כתיבה' ב-Wear OS

רכיב ה-Navigation ב-Android Jetpack מספק תמיכה באפליקציות Jetpack Compose. אתם יכולים לנווט בין קומפוזיציות תוך ניצול התשתית והתכונות של רכיב הניווט.

בדף הזה מוסבר על ההבדלים בין Jetpack Navigation לבין Compose for Wear OS.

הגדרה

משתמשים בתלות הבאה בקובץ build.gradle של מודול האפליקציה:

Kotlin

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

השימוש ב-WearableSupport נעשה במקום ב-androidx.navigation:navigation-compose artifact כי הוא מספק הטמעות חלופיות שספציפיות ל-Wear OS.

יצירה של בקר ניווט, מארח וגרף

כדי להשתמש ב-Compose for Wear OS לניווט, צריך את אותם שלושה רכיבים שנדרשים באפליקציות שלא מיועדות ל-Wear OS: בקר הניווט, המארח והגרף.

משתמשים ב-rememberSwipeDismissableNavController() כדי ליצור מופע של WearNavigator, הטמעה של NavController שמתאימה לאפליקציות Wear OS:‏

val navController = rememberSwipeDismissableNavController()

‫NavController הוא ה-API העיקרי שמשמש לניווט באפליקציות Compose. הוא שולט בניווט בין רכיבי Composable במארח הניווט, שב-Wear OS הוא SwipeDismissableNavHost.

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

בדומה ל-NavHost composable, הוא מקבל הפניה לבקר הניווט, את המסלול ליעד ההתחלה ואת ה-builder לגרף הניווט, שמוצג כאן כ-trailing lambda.

צריך לספק את יעד ההתחלה בכלי ליצירת גרף ניווט, יחד עם כל שאר היעדים שאליהם אפשר לנווט באמצעות בקר הניווט.

באפליקציית Wear OS, צריך להגדיר את SwipeDismissableNavHost כתוכן של AppScaffold כדי לתמוך ברכיבים ברמה העליונה כמו שעה, גלילה או מחוון מיקום ומחוון דף. משתמשים באובייקט AppScaffold מעל SwipeDismissableNavHost ו-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
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...

מידע נוסף על Jetpack Navigation זמין במאמר ניווט באמצעות Compose או ב-Jetpack Compose Navigation code lab.