עיצוב תרשים הניווט

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

סוגי יעדים

יש שלושה סוגים כלליים של יעדים: מתארח, תיבת דו-שיח ופעילות. בטבלה הבאה מתוארים שלושת סוגי היעדים והמטרות שלהם.

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

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

• יעדים לתיבות דו-שיח
• יעדי הפעילות

מסגרות

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

• פיתוח נייטיב: משתמשים בתוכן הקומפוזבילי NavHost. להוסיף אליו NavGraph באמצעות Kotlin DSL: אפשר ליצור את התרשים בשתי דרכים:
  • כחלק מ-NavHost: בונים את תרשים הניווט ישירות בתור חלק מהוספת NavHost.
  • באופן פרוגרמטי: משתמשים בשיטה NavController.createGraph() כדי ליצור NavGraph ולהעביר אותו ישירות אל NavHost.
• מקטעים: כשמשתמשים במקטעים עם ה-framework של ממשק המשתמש של התצוגות, צריך להשתמש NavHostFragment כמארח. יש כמה דרכים ליצור ניווט תרשים:
  • באופן פרוגרמטי: השתמשו ב-DSL של Kotlin כדי ליצור NavGraph להחיל אותו ישירות על NavHostFragment.
    • הפונקציה createGraph() שמשמשת עם Kotlin DSL 'מקטעים' ו'כתיבה' זהים.
  • XML: כתבו את מארח הניווט והתרשים ישירות ב-XML.
  • עורך Android Studio: משתמשים בעורך ה-GUI ב-Android Studio כדי ליצור ולהתאים את התרשים כקובץ משאבים בפורמט XML.

פיתוח נייטיב

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

@Serializable
object Profile
@Serializable
object FriendsList

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
    // Add more destinations similarly.
}

1. אובייקט שניתן לבצע בו סריאליזציה מייצג כל אחד משני המסלולים, Profile ו- FriendsList.
2. הקריאה לתוכן הקומפוזבילי NavHost עוברת NavController ומסלול בתור יעד ההתחלה.
3. ה-lambda שמועברת אל NavHost קורא בסופו של דבר הפונקציה NavController.createGraph() ומחזירה את הערך NavGraph.
4. כל נתיב מסופק כארגומנט מסוג הפקודה NavGraphBuilder.composable<T>() שמוסיפה את היעד התוצאה NavGraph.
5. ה-lambda שהועברה אל composable היא מה שמוצג ב-NavHost היעד.

הבנת הלמבדה

כדי להבין טוב יותר את ה-lambda שיוצרת את ה-NavGraph, את אותו התרשים כמו בקטע הקוד הקודם, אפשר ליצור את NavGraph בנפרד באמצעות הפרמטר NavController.createGraph() ומעבירים אותו אל NavHost ישירות:

val navGraph by remember(navController) {
  navController.createGraph(startDestination = Profile)) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
  }
}
NavHost(navController, navGraph)

ארגומנטים 'עבור'

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

@Serializable
data class Profile(val name: String)

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

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

@Serializable
data class Profile(val nickname: String? = null)

קבלת מופע של מסלול

אפשר להשיג את המופע של המסלול באמצעות NavBackStackEntry.toRoute() או SavedStateHandle.toRoute(). כשיוצרים יעד באמצעות composable(), NavBackStackEntry זמין כפרמטר.

@Serializable
data class Profile(val name: String)

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(name = profile.name) }
}

שימו לב לקטעים הבאים בקטע הקוד:

• המסלול Profile מציין את יעד ההתחלה בניווט עם "John Smith" כארגומנט של name.
• היעד עצמו הוא הבלוק composable<Profile>{}.
• התוכן הקומפוזבילי ProfileScreen מקבל את הערך של profile.name בפני עצמו ארגומנט name.
• לכן, הערך "John Smith" מועבר אל ProfileScreen.

דוגמה מינימלית

דוגמה מלאה ל-NavController ול-NavHost שעובדים יחד:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
    profile: Profile
    onNavigateToFriendsList: () -> Unit,
  ) {
  Text("Profile for ${profile.name}")
  Button(onClick = { onNavigateToFriendsList() }) {
    Text("Go to Friends List")
  }
}

// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(onNavigateToProfile: () -> Unit) {
  Text("Friends List")
  Button(onClick = { onNavigateToProfile() }) {
    Text("Go to Profile")
  }
}

// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
  val navController = rememberNavController()
  NavHost(navController, startDestination = Profile(name = "John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(
            profile = profile,
            onNavigateToFriendsList = {
                navController.navigate(route = FriendsList)
            }
        )
    }
    composable<FriendsList> {
      FriendsListScreen(
        onNavigateToProfile = {
          navController.navigate(
            route = Profile(name = "Aisha Devi")
          )
        }
      )
    }
  }
}

כמו שקטע הקוד מדגים, במקום להעביר את NavController תכנים קומפוזביליים, חושפים אירוע לNavHost. כלומר, התכנים הקומפוזביליים יש פרמטר מסוג () -> Unit שעבורו NavHost מעביר lambda שנקרא NavController.navigate().

מקטעים

כמו שמתואר בקטעים הקודמים, כשמשתמשים במקטעים, יש אפשרות ליצור תרשים ניווט באופן פרוגרמטי באמצעות Kotlin DSL, XML או עריכה ב-Android Studio.

בקטעים הבאים מפורטות הגישות השונות האלה.

באופן פרוגרמטי

Kotlin DSL מספק דרך פרוגרמטית ליצירת תרשים ניווט עם של קטעים שונים. בהרבה מובנים, התהליך הזה יותר ומודרני מאשר שימוש ב-XML משאב.

עיינו בדוגמה הבאה, להטמעת תרשים ניווט עם שני מסכים.

קודם כול צריך ליצור את NavHostFragment, שלא צריך לכלול רכיב app:navGraph:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

לאחר מכן, מעבירים את id של NavHostFragment אל NavController.findNavController. הפעולה הזו משייכת את NavController אל NavHostFragment.

לאחר מכן, הקריאה אל NavController.createGraph() מקשרת את הגרף אל את NavController וכתוצאה מכך גם אל NavHostFragment:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = Profile(name = "John Smith")
) {
    // Associate each destination with one of the route constants.
    fragment<ProfileFragment, Profile> {
        label = "Profile"
    }

    fragment<FriendsListFragment, FriendsList>() {
        label = "Friends List"
    }

    // Add other fragment destinations similarly.
}

השימוש ב-DSL בצורה הזו דומה מאוד לתהליך העבודה שמתואר בקטע הקודם על אימייל חדש. לדוגמה, גם שם וגם כאן, הפונקציה NavController.createGraph() יוצרת את NavGraph. באופן דומה, בעוד כאן מתווספים יעדים קומפוזביליים לתרשים של NavGraphBuilder.composable() הפונקציה NavGraphBuilder.fragment() מוסיפה יעד למקטעים.

למידע נוסף על אופן השימוש ב-Kotlin DSL, אפשר לעיין במאמר בניית תרשים באמצעות NavGraphBuilder DSL.

XML

אתם יכולים לכתוב את ה-XML ישירות בעצמכם. הדוגמה הבאה משקפת את שמקבילה לדוגמה של שני המסכים מהקטע הקודם.

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

הטמעה מינימלית של NavHostFragment:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_graph" />

</FrameLayout>

השדה NavHostFragment מכיל את המאפיין app:navGraph. שימוש במאפיין הזה כדי לחבר את תרשים הניווט למארח הניווט. זוהי דוגמה דוגמה לאופן שבו אפשר להטמיע את התרשים:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/profile">

    <fragment
        android:id="@+id/profile"
        android:name="com.example.ProfileFragment"
        android:label="Profile">

        <!-- Action to navigate from Profile to Friends List. -->
        <action
            android:id="@+id/action_profile_to_friendslist"
            app:destination="@id/friendslist" />
    </fragment>

    <fragment
        android:id="@+id/friendslist"
        android:name="com.example.FriendsListFragment"
        android:label="Friends List" />

    <!-- Add other fragment destinations similarly. -->
</navigation>

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

עריכה

אפשר לנהל את תרשים הניווט של האפליקציה באמצעות עורך הניווט בקטע ב-Android Studio. זו בעצם ממשק GUI שאפשר להשתמש בו כדי ליצור ולערוך NavigationFragment XML, כמו שאפשר לראות בקטע הקודם.

מידע נוסף זמין בעורך הניווט.

גרפים מקוננים

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

קריאה נוספת

במדריכים הבאים יש עוד מושגי ניווט מרכזיים:

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