עורך ניווט

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

סקירה כללית

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

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

לוחצים על הכרטיסייה Text (טקסט) כדי לראות את ה-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> כרכיבי צאצא. אם יש לכם תרשימים מוטמעים, הם מופיעים כרכיבי צאצא <navigation>.

הוספת יעדים

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

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

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

ב-Navigation Editor, אפשר לראות ש-Android Studio הוסיף את היעד הזה לתרשים.

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

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

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

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

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

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

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

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

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

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

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

ב-Navigation Editor, אפשר לראות ש-Android Studio הוסיף את היעד הזה לתרשים.

איור 3 מציג דוגמה ליעד ול-placeholder של יעד.

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

המבנה של יעד

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

  • בשדה סוג מצוין אם היעד מיושם כקטע קוד, כפעילות או כמחלקה מותאמת אישית אחרת בקוד המקור.
  • השדה תווית מכיל את השם של היעד שקל למשתמשים לקרוא. יכול להיות שההודעה הזו תוצג בממשק המשתמש – למשל, אם מחברים את NavGraph אל Toolbar באמצעות setupWithNavController(). לכן, צריך להשתמש במחרוזות של משאבים בשביל הערך הזה.
  • השדה 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>

אפשר גם להשתמש בLayout Editor כדי להוסיף NavHostFragment ל-Activity. כך עושים את זה:

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

קישור יעדים

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

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

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

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

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

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

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

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

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

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

    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 serves as a visual representation of a destination. בכלי לעריכת הניווט, אפשר להשתמש בפלייסהולדרים בדיוק כמו בכל יעד אחר.