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

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

בנוסף, ניתן לעשות שימוש חוזר בתרשימים בתוך גרפים. הן גם מספקות רמה אנקפסולציה – ליעדים מחוץ לתרשים בתוך התרשים אין גישה ישירה לכל אחד מהיעדים בתוך התרשים בתוך התרשים. במקום זאת, navigate() לתרשים הפנימי עצמו, שבו הלוגיקה הפנימית יכולה בלי להשפיע על שאר התרשים.

דוגמה

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

איור 1. תרשים ניווט ברמה העליונה.

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

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

איור 2. תרשים הניווט ברמה העליונה מכיל עכשיו תרשים מקונן.

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

מידע נוסף על תרחישים של ניווט מותנה זמין במאמר ניהול מותנה ניווט.

פיתוח נייטיב

כדי ליצור תרשים ניווט מקונן באמצעות 'כתיבה', משתמשים ב NavGraphBuilder.navigation(). השימוש שלך ב-navigation() זהה לשימוש NavGraphBuilder.composable() ו-NavGraphBuilder.dialog() משתנה בעת הוספת יעדים לתרשים.

ההבדל העיקרי הוא ש-navigation יוצר תרשים מקונן ולא יעד חדש. לאחר מכן צריך להתקשר אל composable() ואל dialog() תוך ה-lambda של navigation() כדי להוסיף יעדים לתרשים בתוך התרשים.

נסו לחשוב איך קטע הקוד הבא מיישם את התרשים בתרשים 2 באמצעות כתיבה:

// Routes
@Serializable object Title
@Serializable object Register

// Route for nested graph
@Serializable object Game

// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver

NavHost(navController, startDestination = Title) {
   composable<Title> {
       TitleScreen(
           onPlayClicked = { navController.navigate(route = Register) },
           onLeaderboardsClicked = { /* Navigate to leaderboards */ }
       )
   }
   composable<Register> {
       RegisterScreen(
           onSignUpComplete = { navController.navigate(route = Game) }
       )
   }
   navigation<Game>(startDestination = Match) {
       composable<Match> {
           MatchScreen(
               onStartGame = { navController.navigate(route = InGame) }
           )
       }
       composable<InGame> {
           InGameScreen(
               onGameWin = { navController.navigate(route = ResultsWinner) },
               onGameLose = { navController.navigate(route = GameOver) }
           )
       }
       composable<ResultsWinner> {
           ResultsWinnerScreen(
               onNextMatchClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               },
               onLeaderboardsClicked = { /* Navigate to leaderboards */ }
           )
       }
       composable<GameOver> {
           GameOverScreen(
               onTryAgainClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               }
           )
       }
   }
}

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

navController.navigate(route = Match)
.

XML

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

  1. בעורך הניווט, לוחצים לחיצה ארוכה על המקש Shift ולאחר מכן לוחצים על יעדים שרוצים לכלול בתרשים.

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

    איור 2. תרשים מקונן בעורך הניווט

  3. לוחצים על התרשים בתוך התרשים. המאפיינים הבאים מופיעים החלונית מאפיינים:

    • סוג, שמכיל את 'תרשים מקונן'
    • ID, שמכיל מזהה שהוקצה על ידי המערכת עבור התרשים בתוך התרשים. הזה המזהה משמש להפניה אל התרשים המקונן מתוך הקוד.

  4. לוחצים לחיצה כפולה על התרשים בתוך התרשים כדי להציג את היעדים שלו.

  5. לוחצים על הכרטיסייה טקסט כדי לעבור לתצוגת XML. תרשים ניווט בתוך תרשים נוסף לתרשים. לתרשים הניווט הזה יש navigation משלו וגם מזהה משלו ומאפיין startDestination שמצביע על היעד הראשון בתרשים המוצב:

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/mainFragment">
   <fragment
       android:id="@+id/mainFragment"
       android:name="com.example.cashdog.cashdog.MainFragment"
       android:label="fragment_main"
       tools:layout="@layout/fragment_main" >
       <action
           android:id="@+id/action_mainFragment_to_sendMoneyGraph"
           app:destination="@id/sendMoneyGraph" />
       <action
           android:id="@+id/action_mainFragment_to_viewBalanceFragment"
           app:destination="@id/viewBalanceFragment" />
   </fragment>
   <fragment
       android:id="@+id/viewBalanceFragment"
       android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
       android:label="fragment_view_balance"
       tools:layout="@layout/fragment_view_balance" />
   <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
       <fragment
           android:id="@+id/chooseRecipient"
           android:name="com.example.cashdog.cashdog.ChooseRecipient"
           android:label="fragment_choose_recipient"
           tools:layout="@layout/fragment_choose_recipient">
           <action
               android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
               app:destination="@id/chooseAmountFragment" />
       </fragment>
       <fragment
           android:id="@+id/chooseAmountFragment"
           android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
           android:label="fragment_choose_amount"
           tools:layout="@layout/fragment_choose_amount" />
   </navigation>
</navigation>

  6. בקוד, מעבירים את מזהה המשאב של הפעולה שמקשרת את תרשים הבסיס לתרשים המקונן:

Kotlin

view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
  1. בחזרה לכרטיסייה עיצוב, וחזרו לתרשים השורש בלחיצה על Root.

התייחסו לתרשימי ניווט אחרים עם האפשרות Include

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

קטע הקוד הבא מדגים איך אפשר להשתמש ב-<include>:

<!-- (root) nav_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

    <strong><include app:graph="@navigation/included_graph" /></strong>

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <strong><action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" /></strong>
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/second_graph"</strong>
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

מקורות מידע נוספים

מידע נוסף על הניווט זמין במקורות המידע הנוספים הבאים.

דוגמיות

שיעורי Lab

סרטונים