עורך ניווט

‫Android Studio כולל ממשק משתמש גרפי שמאפשר ליצור ולערוך תרשים ניווט. זהו למעשה כלי לעריכה של קובץ משאבי ה-XML הבסיסי.

סקירה כללית

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

איור 1. הכלי לעריכת ניווט
  1. חלונית היעדים: מציגה את מארח הניווט ואת כל היעדים בכלי לעריכת גרפים.
  2. עורך הגרפים: כולל ייצוג חזותי של גרף הניווט. אפשר לעבור בין תצוגת Design לבין ייצוג ה-XML הבסיסי בתצוגת Text.
  3. מאפיינים: כאן מוצגים מאפיינים של הפריט שנבחר בתרשים הניווט.

לוחצים על הכרטיסייה טקסט כדי לראות את קובץ ה-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"
            android:id="@+id/nav_graph">

</navigation>

הרכיב <navigation> הוא רכיב הבסיס של תרשים ניווט. כשמוסיפים יעדים ופעולות חיבור לתרשים, אפשר לראות כאן את הרכיבים התואמים <destination> ו-<action> כרכיבי צאצא. אם יש לכם [תרשימים מוטמעים][2], הם מופיעים כרכיבי צאצא <navigation>.

הוספת יעדים

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

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

  1. בכלי לעריכת ניווט, לוחצים על הסמל יעד חדש ואז על יצירת יעד חדש.
  2. בתיבת הדו-שיח New Android Component שמופיעה, יוצרים את ה-fragment. מידע נוסף על פרגמנטים זמין במאמר [סקירה כללית של פרגמנטים][3].

בחזרה בכלי לעריכת ניווט, אפשר לראות ש-Android Studio הוסיף את היעד הזה לתרשים.

תמונה 2 מציגה דוגמה ליעד ול[placeholder של יעד][4].

איור 2. יעד ומשתנה placeholder

במאמר [Additional destinations][5] מוסבר על דרכים נוספות להוספת יעדים לגרף הניווט.

יצירת יעד מקטע או מפעילות קיימים

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

לאחר מכן, לוחצים על היעד המתאים בתפריט הנפתח שמופיע. בתצוגה Design של גרף הניווט, תוכלו לראות תצוגה מקדימה של היעד, ובתצוגה Text תוכלו לראות את קובץ ה-XML התואם.

יצירת יעד חדש של פרגמנט

כדי להוסיף סוג יעד חדש באמצעות הכלי לעריכת ניווט:

  1. בכלי לעריכת ניווט, לוחצים על סמל יעד חדש .

    לאחר מכן לוחצים על יצירת יעד חדש.

  2. בתיבת הדו-שיח New Android Component שמופיעה, יוצרים את ה-fragment.

בחזרה בכלי לעריכת ניווט, אפשר לראות ש-Android Studio הוסיף את היעד הזה לתרשים.

איור 3 מציג דוגמה ליעד ול[יעד placeholder][2].

איור 3. יעד ומשתנה placeholder

המבנה של יעד

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

  • בשדה סוג מצוין אם היעד מיושם כקטע קוד, כפעילות או כמחלקה מותאמת אישית אחרת בקוד המקור.
  • בשדה תווית מופיע השם של היעד שקל למשתמשים לקרוא. יכול להיות שהמידע הזה יוצג בממשק המשתמש – לדוגמה, אם מחברים את [NavGraph][10] אל Toolbar באמצעות [setupWithNavController()][11]. לכן, צריך להשתמש במחרוזות של משאבים בשביל הערך הזה.
  • השדה ID מכיל את מזהה היעד, שמשמש להתייחסות ליעד בקוד.
  • בתפריט הנפתח Class (סיווג) מוצג השם של הסיווג שמשויך ליעד. כדי לשנות את הכיתה המשויכת לסוג יעד אחר, לוחצים על התפריט הנפתח הזה.

לוחצים על הכרטיסייה Text כדי להציג את תצוגת ה-XML של תרשים הניווט. קובץ ה-XML מכיל את אותם מאפיינים של יעד id, name, label ו-layout, כמו בקטע הקוד הבא:

<?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/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

אפשר גם להשתמש ב[כלי לעריכת פריסות][1] כדי להוסיף NavHostFragment לפעילות. כך עושים את זה:

  1. ברשימת קובצי הפרויקט, לוחצים לחיצה כפולה על קובץ ה-XML של הפריסה של ה-Activity כדי לפתוח אותו ב-Layout Editor.
  2. בחלונית Palette, בוחרים בקטגוריה Containers או מחפשים את האפשרות NavHostFragment.
  3. גוררים את התצוגה NavHostFragment לפעילות.
  4. בתיבת הדו-שיח Navigation Graphs שמופיעה, בוחרים את תרשים הניווט המתאים לשיוך ל-NavHostFragment ולוחצים על OK.

חיבור יעדים

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

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

כדי לקשר בין שני יעדים באמצעות כלי העריכה של הניווט:

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

    איור 4. יעד עם חיבור לפעולה עיגול

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

    איור 5. קישור יעדים לפעולה

  3. לוחצים על החץ כדי להדגיש את הפעולה. המאפיינים הבאים מופיעים בחלונית מאפיינים:

    • השדה Type (סוג) מכיל את הערך Action (פעולה).
    • השדה ID מכיל את המזהה של הפעולה.
    • השדה Destination מכיל את המזהה של הפעילות או של קטע היעד.

  4. לוחצים על הכרטיסייה Text כדי לעבור לתצוגת ה-XML. עכשיו נוסף רכיב פעולה ליעד המקור. לפעולה יש מזהה ומאפיין יעד שמכיל את המזהה של היעד הבא, כמו שמוצג בדוגמה הבאה:

    <?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/blankFragment">
   <fragment
       android:id="@+id/blankFragment"
       android:name="com.example.cashdog.cashdog.BlankFragment"
       android:label="@string/label_blank"
       tools:layout="@layout/fragment_blank" >
       <action
           android:id="@+id/action_blankFragment_to_blankFragment2"
           app:destination="@id/blankFragment2" />
   </fragment>
   <fragment
       android:id="@+id/blankFragment2"
       android:name="com.example.cashdog.cashdog.BlankFragment2"
       android:label="@string/label_blank_2"
       tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

בתרשים הניווט, הפעולות מיוצגות על ידי רכיבי <action>. לפחות, פעולה מכילה מזהה משלה ומזהה של היעד שאליו המשתמש אמור להגיע.

יעדים זמניים לשמירת מקום (פלייסהולדרים)

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

‫[1]: /studio/write/layout-editor ‫[2]: /guide/navigation/navigation-nested-graphs ‫[3]: /guide/components/fragments ‫[4]: /guide/navigation/navigation-create-destinations#placeholders ‫[5]: /guide/navigation/navigation-create-destinations ‫[6]: /guide/navigation/navigation-global-action ‫[10]: /reference/androidx/navigation/NavGraph ‫[11]: /reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)