محرر التنقل

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

نظرة عامة

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

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> المقابلَين هنا كعناصر فرعية. إذا كانت لديك رسومات بيانية متداخلة، ستظهر كعناصر <navigation> ثانوية.

إضافة وجهات

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

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

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

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

يوضِّح الشكل 2 مثالاً على وجهة ووجهة نائبة.

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

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

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

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

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

لإضافة نوع وجهة جديد باستخدام محرر التنقل، قم بما يلي:

1. في محرر التنقل، انقر على رمز وجهة جديدة .

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

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

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

يوضِّح الشكل 3 مثالاً على وجهة ووجهة نائبة.

بنية الوجهة

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

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

انقر على علامة التبويب النص لإظهار طريقة عرض 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>

NavHostFragment

يمكنك أيضًا استخدام محرر التنسيق لإضافة NavHostFragment إلى نشاط عن طريق تنفيذ ما يلي:

1. في قائمة ملفات المشروع، انقر نقرًا مزدوجًا على ملف XML لتنسيق نشاطك لفتحه في "محرِّر التنسيق".
2. ضمن لوحة Palette (لوحة الألوان)، اختر الفئة Containers (حاويات)، وابحث عن "NavHostFragment" بدلاً من ذلك.
3. اسحب طريقة العرض "NavHostFragment" إلى نشاطك.
4. في مربع الحوار الرسوم البيانية للتنقل الذي يظهر، اختر الرسم البياني المقابل للتنقّل لربطه بميزة NavHostFragment هذه، ثم انقر على حسنًا.

ربط الوجهات

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

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

يمكنك استخدام محرر التنقل لربط وجهتين عن طريق تنفيذ ما يلي:

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

   

2. اسحب المؤشر فوق الوجهة التي تريد أن ينتقل إليها المستخدمون، وأحررها. يمثل الخط الناتج بين الوجهتين إجراءً كما هو موضح في الشكل 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>. وكحدٍ أدنى، يشتمل الإجراء على معرّفه الخاص ومعرّف الوجهة التي يجب نقل المستخدم إليها.

وجهات العناصر النائبة

يمكنك استخدام العناصر النائبة لتمثيل الوجهات غير المُنفَّذة. يعمل العنصر النائب كتمثيل مرئي للوجهة. داخل محرر التنقل، يمكنك استخدام العناصر النائبة تمامًا كما تفعل مع أي وجهة أخرى.