محرر التنقل

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

ربط الوجهات

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

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

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

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

   

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

   

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

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

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

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

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