محرر التنقل

يحتوي "استوديو Android" على واجهة مستخدم رسومية تتيح لك إنشاء رسم بياني للتنقّل وتعديله. وهو في الأساس محرِّر لملف موارد XML الأساسي.

نظرة عامة

بعد إضافة رسم بياني XML إلى تطبيقك، يفتح "استوديو Android" الرسم البياني في أداة "محرّر التنقّل". في "أداة تعديل التنقّل"، يمكنك تعديل رسومات التنقّل بشكل مرئي أو تعديل ملف XML الأساسي مباشرةً.

الشكل 1. أداة تعديل التنقّل
  1. لوحة الوجهات: تعرض هذه اللوحة مضيف التنقّل وجميع الوجهات في محرّر الرسوم البيانية.
  2. محرّر الرسوم البيانية: يحتوي على تمثيل مرئي لرسم التنقّل. يمكنك التبديل بين عرض التصميم وتمثيل XML الأساسي في عرض النص.
  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> فرعية.

إضافة وجهات

يمكنك إنشاء وجهة من جزء أو نشاط حالي. يمكنك أيضًا استخدام &quot;أداة تعديل التنقّل&quot; لإنشاء وجهة جديدة أو إنشاء عنصر نائب يمكنك استبداله لاحقًا بشظية أو نشاط.

يوضّح هذا المثال كيفية إنشاء وجهة جديدة. لإضافة وجهة جديدة باستخدام "أداة تعديل التنقّل"، اتّبِع الخطوات التالية:

  1. في "محرّر التنقّل"، انقر على رمز وجهة جديدة ، ثمّ انقر على إنشاء وجهة جديدة.
  2. في مربّع الحوار مكوّن Android جديد الذي يظهر، أنشئ الجزء. لمزيد من المعلومات حول الرموز المجزأة، يُرجى الاطّلاع على [نظرة عامة على الرموز المجزأة][3].

بالعودة إلى "أداة تعديل التنقّل"، لاحظ أنّ "استوديو Android" أضاف وجهة التنقّل هذه إلى الرسم البياني.

تعرض "الشكل 2" مثالاً على وجهة و[وجهة عنصر نائب][4].

الشكل 2. وجهة وعنصر نائب

للاطّلاع على طرق أخرى لإضافة وجهات إلى الرسم البياني للتنقّل، راجِع [وجهات إضافية][5].

إنشاء وجهة من جزء أو نشاط حالي

في "محرّر التنقّل" (Navigation Editor)، إذا كان لديك نوع وجهة حالي تريد إضافته إلى الرسم البياني للتنقّل، انقر على وجهة جديدة (New Destination) .

بعد ذلك، انقر على الوجهة المناسبة في القائمة المنسدلة التي تظهر. يمكنك الآن الاطّلاع على معاينة للوجهة في طريقة العرض التصميم بالإضافة إلى رمز XML المقابل في طريقة العرض النص في الرسم البياني للتنقّل.

إنشاء وجهة جديدة للجزء

لإضافة نوع وجهة جديد باستخدام "أداة تعديل التنقّل"، اتّبِع الخطوات التالية:

  1. في "أداة تعديل شريط التنقّل"، انقر على رمز وجهة جديدة .

    بعد ذلك، انقر على إنشاء وجهة جديدة.

  2. في مربّع الحوار مكوّن Android جديد الذي يظهر، أنشئ الجزء.

بالعودة إلى "أداة تعديل التنقّل"، لاحظ أنّ "استوديو Android" أضاف وجهة التنقّل هذه إلى الرسم البياني.

يعرض الشكل 3 مثالاً على وجهة و[وجهة عنصر نائب][2].

الشكل 3. وجهة وعنصر نائب

بنية الوجهة

انقر على وجهة لاختيارها، ولاحِظ السمات التالية في لوحة السمات:

  • يشير حقل النوع إلى ما إذا تم تنفيذ الوجهة كجزء أو نشاط أو فئة مخصّصة أخرى في الرمز المصدر.
  • يحتوي حقل التصنيف على الاسم القابل للقراءة من قِبل المستخدم للوجهة. قد يتم عرض هذا المعرّف في واجهة المستخدم، مثلاً عند ربط [NavGraph][10] بـ Toolbar باستخدام [setupWithNavController()][11]. لهذا السبب، استخدِم سلاسل موارد لهذه القيمة.
  • يحتوي حقل المعرّف على معرّف جهة الربط، ويُستخدَم للإشارة إلى جهة الربط في الرمز البرمجي.
  • تعرض القائمة المنسدلة الفئة اسم الفئة المرتبطة بالوجهة. انقر على هذه القائمة المنسدلة لتغيير الفئة المرتبطة إلى نوع وجهة آخر.

انقر على علامة التبويب النص لعرض طريقة عرض 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 الخاص بتصميم النشاط لفتحه في "أداة تعديل التصميم".
  2. في لوحة لوحة الألوان، اختَر فئة الحاويات، أو ابحث عن "NavHostFragment".
  3. اسحب العرض NavHostFragment إلى نشاطك.
  4. في مربّع الحوار الرسومات البيانية للتنقّل الذي يظهر، اختَر الرسم البياني المناسب للتنقّل الذي تريد ربطه بهذا NavHostFragment، ثم انقر على حسنًا.

ربط الوجهات

الإجراء هو ربط منطقي بين الوجهات. يتم تمثيل الإجراءات في الرسم البياني للتنقّل على شكل أسهم. تربط الإجراءات عادةً وجهة بأخرى، ولكن يمكنك أيضًا إنشاء [إجراءات عامة][6] تنقلك إلى وجهة معيّنة من أي مكان في تطبيقك.

باستخدام الإجراءات، يمكنك تمثيل المسارات المختلفة التي يمكن للمستخدمين اتّخاذها في تطبيقك. يُرجى العِلم أنّه للانتقال إلى الوجهات، عليك كتابة الرمز البرمجي اللازم لتنفيذ عملية التنقّل.

يمكنك استخدام "أداة تعديل التنقّل" لربط وجهتَين من خلال تنفيذ ما يلي:

  1. في علامة التبويب التصميم، مرِّر مؤشر الماوس فوق الجانب الأيسر من الوجهة التي تريد أن ينتقل المستخدمون منها. تظهر دائرة على الجانب الأيسر من الوجهة، كما هو موضّح في الشكل 4.

    الشكل 4. وجهة تتضمّن دائرة ربط إجراء

  2. اسحب المؤشر فوق الوجهة التي تريد أن ينتقل إليها المستخدمون، ثم حرِّره. يمثّل الخط الناتج بين الوجهتين إجراءً، كما هو موضّح في الشكل 5.

    الشكل 5. ربط الوجهات بإجراء

  3. انقر على السهم لتمييز الإجراء. تظهر السمات التالية في لوحة السمات:

    • يحتوي حقل النوع على "إجراء".
    • يحتوي الحقل المعرّف على معرّف الإجراء.
    • يحتوي الحقل الوجهة على رقم تعريف الجزء أو النشاط الخاص بالوجهة.

  4. انقر على علامة التبويب نص للتبديل إلى عرض 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>. يحتوي الإجراء على الأقل على معرّفه الخاص ومعرّف الوجهة التي يجب أن ينتقل إليها المستخدم.

الوجهات النائبة

يمكنك استخدام العناصر النائبة لتمثيل الوجهات التي لم يتم تنفيذها. يعمل العنصر النائب كتمثيل مرئي للوجهة. في &quot;أداة تعديل التنقّل&quot;، يمكنك استخدام العناصر النائبة كما تفعل مع أي وجهة أخرى.

[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)