تنفيذ التنقل بإستخدام مكون بنية الملاحة

الإعلانات

تنفيذ التنقل بإستخدام مكون بنية الملاحة

 

 

تنفيذ التنقل بإستخدام مكون بنية الملاحة

تعمل مكونات بنية جت باك، على تبسيط تنفيذ التنقل، داخل التطبيق. من خلال توفير، مجموعة من مكونات التنقل، التي تتعامل مع معظم التفاصيل من أجلك.

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

الشكل 1 يعرض تمثيلاً مرئياً لمخطط التنقل لتطبيق بسيط يحتوي على 6 وجهات مرتبطة ببعضها بواسطة 5 إجراءات.

 

 

الشكل 1. رسم بياني للتنقل

 

الوجهة هي أي مكان يمكنك الإنتقال إليه في تطبيقك. على الرغم من أن الوجهات عادة ما تكون عبارة عن، شظايا تمثل شاشات معينة، إلا أن الملاحة تدعم أنواع أخرى من الوجهات:

  •  الأنشطة
  •  رسم بياني و رسم بياني ثانوي للتنقل – عندما تكون الوجهة عبارة عن رسم بياني أو رسم بياني ثانوي، تنتقل إلى وجهة البداية لذلك الرسم البياني أو الرسم البياني الثانوي.
  •  أنواع الوجهة المخصصة

 

ملاحظة: يتم تصميم مكون بنية الملاحة للتطبيقات التي لها نشاط رئيسي واحد مع وجهات شظايا متعددة. النشاط الرئيسي “يستضيف” الرسم البياني للتنقل.

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

لمزيد من المعلومات راجع تعديل نشاط لإستضافة التنقل

 

 

 

 

 

تنفيذ التنقل بإستخدام مكون بنية الملاحة

 

إعداد نظام الملاحة لمشروعك


ملاحظة: إذا كنت تريد إستخدام التنقل بإستخدام أندرويد ستوديو، فيجب عليك إستخدام الإصدار 3.3 من أندرويد ستوديو أو إصدار أحدث.

لتضمين دعم التنقل في مشروعك، أضف ما يلي إلى ملف البناء build.gradle الخاص بتطبيقك.

dependencies {
    def nav_version = "1.0.0-beta01"

    implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin
}

 

للحصول على معلومات عن إضافة مكونات بنيه أخرى، إلى مشروعك، راجع إضافة مكونات إلى مشروعك.

 

 

 

 

إنشاء رسم بياني للتنقل


لإضافة رسم بياني للتنقل إلى مشروعك ، قم بما يلي:

1- في نافذة المشروع، أنقر بزر الماوس الأيمن على الدليل res وحدد جديد > ملف مصدر الأندرويد. يظهر مربع الحوار ملف مصدر جديد.

2- أكتب اسم في حقل أسم الملف، مثل “nav_graph”.

3- حدد التنقل من القائمة المنسدلة نوع المصدر.

4- أنقر فوق موافق. سيحدث ما يلي:

أ- يتم إنشاء دليل مصادر التنقل داخل دليل المصادر res.
ب- يتم إنشاء ملف nav_graph.xml بداخل دليل التنقل.
ج- سيتم فتح ملف nav_graph.xml في محرر التنقل. يحتوي ملف xml هذا على مخطط التنقل الخاص بك.

5- أنقر فوق علامة التبويب نص للتبديل إلى عرض نص XML. ملف XML لمخطط تنقل فارغ سيبدو كالتالي: 

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android">
</navigation>

 

6- أنقر على تصميم للرجوع إلى محرر التنقل.

 

 

 

التجول في محرر التنقل

في محرر التنقل، يمكنك بصرياً تعديل الرسوم البيانيه للتنقل، بدلاً من تحرير XML المضمن مباشرة.

 

 

الشكل 2. محرر التنقل

 

1– الوجهات – تسرد مضيف التنقل الخاص بك، وكافة الوجهات الموجودة حالياً في محرر الرسم البياني.
2– محرر الرسم البياني – يحتوي على تمثيل مرئي للرسم البياني للتنقل الخاص بك.
3–  السمات – تظهر السمات للعنصر الذي تم إختياره حالياً، في الرسم البياني للتنقل.

 

 

 

إنشاء الوجهات

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

يمكنك إنشاء وجهات من الشظايا و الأنشطه في مشروع موجود، أو يمكنك إنشاء وجهات مؤقتة، يمكنك إستبدالها لاحقاً بشظية أو نشاط.

إذا كان لديك شظيه أو نشاط بالفعل، و ترغب في إضافته إلى الرسم البياني للملاحة، أو إذا كنت ترغب في إضافة عنصر مؤقت..

فأنقر فوق وجهة جديدة ، ثم أنقر فوق وجهة الشظيه أو النشاط المقابل، أو وجهة العنصر المؤقت في القائمة المنسدلة الظاهره.

يمكنك الآن مشاهدة معاينة للوجهة، في طريقة العرض Design ، مع XML المطابق، في عرض النص، الخاص بالرسم البياني للتنقل.

 

لإنشاء نوع واجهة جديد قم بما يلي:

1- من محرر التنقل، أنقر فوق وجهة جديدة ، ثم أنقر فوق إنشاء وجهة فارغة.

2- في مربع الحوار New Android Component الذي يظهر، أدخل أسم الشظيه

  Fragment Name. هذا هو أسم فئة الشظيه.

3- لكي ينشئ أندرويد ستوديو، ملف مصدر مخطط مناسب للشظيه، حدد المربع المجاور لـ إنشاء مخطط XML، وأدخل أسم المصدر في حقل أسم مخطط الشظيه.

4- في القائمة المنسدلة اللغة المصدر، أختر إما Kotlin أو Java للملف المصدر للفئة.

5- أنقر فوق إنهاء.

 

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

يوضح الشكل 3 مثالاً للوجهة والعنصر المؤقت.

الشكل 3. الوجهة والعنصر المؤقت

 

يمكنك النقر على أي وجهة لتحديدها. عند تحديد وجهة، تظهر السمات التالية في لوحة السمات:

  • يشير حقل النوع إلى ما إذا تم تنفيذ الوجهة، كشظيه أو نشاط في الكود المصدر الخاص بك.
  • يحتوي حقل التصنيف “المسمى” على أسم ملف مخطط XML للوجهة.
  • حقل المعرف يحتوي على معرف الوجهة، التي يتم إستخدامها للإشارة إلى الوجهة في الكود.
  • تعرض القائمة المنسدلة للفئه، أسم الفئة المرتبطة بالوجهة. يمكنك النقر فوق هذه القائمة المنسدلة، لتغيير الفئة المرتبطة إلى نوع وجهة آخر.

 

ملاحظة: لا ترتبط العناصر المؤقته بفئة. تأكد من تغيير قيمة الفئه قبل تشغيل تطبيقك.

 

أنقر فوق علامة التبويب 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="Blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

 

 

 

 

 

تنفيذ التنقل بإستخدام مكون بنية الملاحة

 

ربط الوجهات


يجب أن يكون لديك أكثر من وجهة واحدة لربط الوجهات ببعضها. فيما يلي ملف 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="fragment_blank"
        tools:layout="@layout/fragment_blank" />
    <fragment
        android:id="@+id/blankFragment2"
        android:name="com.example.cashdog.cashdog.BlankFragment2"
        android:label="Blank2"
        tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

 

 

يتم توصيل الوجهات بإستخدام الإجراءات. لربط وجهتين، قم بما يلي:

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

الشكل 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="fragment_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="fragment_blank_fragment2"
        tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

 

 

 

 

 

تعيين شاشة كوجهة البدايه

يستخدم محرر التنقل أيقونة منزل  للإشارة إلى أول شاشة يراها المستخدمون عند فتح تطبيقك.

والتي تُعرف أيضاً بأسم، وجهة البدء “البدايه”.

لاختيار وجهة بدء مختلفة، قم بما يلي:

1- في علامة التبويب تصميم، أنقر فوق وجهة البدء الجديدة لتمييزها “تظليلها”.

2- أنقر فوق الزر تعيين وجهة البدء . بدلاً من ذلك، يمكنك النقر بزر الماوس الأيمن على الوجهة وإختيار Set as Start Destination.

 

 

 

 

تنفيذ التنقل بإستخدام مكون بنية الملاحة

 

تعديل نشاط لإستضافة التنقل


يستضيف النشاط التنقل الخاص بأحد التطبيقات، من خلال NavHost .

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

التنفيذ الإفتراضي NavHost لمكون بنية الملاحة هو NavHostFragment.

 

 

 

إضافة NavHostFragment بإستخدام محرر المخطط

يمكنك إستخدام محرر المخطط لإضافة NavHostFragment إلى نشاط بإتباع الخطوات التالية:

1- قم بإنشاء مصدر مخطط “رسم بياني” تنقل، إذا لم يكن لديك واحد بالفعل.

2- في قائمة ملفات المشروع الخاص بك، أنقر نقراً مزدوجاً على ملف XML الخاص بمخطط نشاطك، لفتحه في محرر المخطط.

3- ضمن لوحة Palette، أختر التصنيف “حاويه” Containers، أو بدلاً من ذلك أبحث عن “NavHostFragment”.

4- أسحب طريقة عرض NavHostFragment إلى نشاطك.

5- بعد ذلك، في مربع حوار مخطط التنقل الذي يظهر، أختر مخطط التنقل المتوافق لربطه مع NavHostFragment ثم أنقر فوق موافق.

بالعودة إلى عرض النص، ستلاحظ أن أندرويد ستوديو أضاف XML مشابهاً لما يلي:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation" />

</android.support.constraint.ConstraintLayout>

 

 

السمه "app:defaultNavHost="true تضمن أن NavHostFragment الخاصة بك، تعترض زر “الرجوع” الخاص بالنظام.

يمكنك تنفيذ هذا السلوك أيضاً، من خلال الكتابة فوق ()AppCompatActivity.onSupportNavigateUp

ومن ثم إستدعاء NavController.navigateUp كما هو موضح في المثال التالي: 

KOTLIN

override fun onSupportNavigateUp()
        = findNavController(R.id.nav_host_fragment).navigateUp()

JAVA

@Override
public boolean onSupportNavigateUp() {
    return Navigation.findNavController(this, R.id.nav_host_fragment).navigateUp();
}

 

 

 

 

إنشاء NavHostFragment برمجياً

يمكنك أيضاً إستخدام ()NavHostFragment.create  لإنشاء NavHostFragment برمجياً بمصدر مخطط معين، كما هو موضح في المثال أدناه:

KOTLIN

val finalHost = NavHostFragment.create(R.navigation.example_graph)
supportFragmentManager.beginTransaction()
    .replace(R.id.nav_host, finalHost)
    .setPrimaryNavigationFragment(finalHost) // this is the equivalent to app:defaultNavHost="true"
    .commit()

JAVA

NavHostFragment finalHost = NavHostFragment.create(R.navigation.example_graph);
getSupportFragmentManager().beginTransaction()
    .replace(R.id.nav_host, finalHost)
    .setPrimaryNavigationFragment(finalHost) // this is the equivalent to app:defaultNavHost="true"
    .commit();

 

 

 

 

 

 

ربط الوجهات بودجت واجهة المستخدم


يتم إنجاز التنقل إلى وجهة بإستخدام فئة NavController. يمكن إسترجاع NavController بإستخدام أحد الدوال الثابتة التالية:

  •  (NavHostFragment.findNavController(Fragment
  •  (Navigation.findNavController(Activity, @IdRes int viewId
  • (Navigation.findNavController(View

 

بعد إسترجاعك لـ NavController، إستخدم دالة ()navigate الخاصة به للتنقل إلى وجهة ما.

دالة ()navigate تقبل معرف المصدر. يمكن أن يكون المعرّف، هو معرف لوجهة معينة، في مخطط التنقل أو لأحد الإجراءات.

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

لمزيد من المعلومات حول الإنتقالات، راجع إنشاء إنتقال بين الوجهات.

يعرض مقتطف الكود التالي كيفية التنقل إلى ViewTransactionsFragment:

KOTLIN

viewTransactionsButton.setOnClickListener { view ->
   view.findNavController().navigate(R.id.viewTransactionsAction)
}

JAVA

viewTransactionsButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Navigation.findNavController(view).navigate(R.id.viewTransactionsAction);
    }
});

 

يحافظ نظام الأندرويد على الكومة الخلفيه، لتحتوي على آخر وجهة تمت زيارتها. يتم وضع الوجهة الأولى لتطبيقك، في الكومه عند فتح المستخدم للتطبيق.

كل إستدعاء لدالة ()navigate يضع وجهة أخرى في أعلى الكومه. وبالعكس، فإن الضغط على الزر “أعلى” أو “الرجوع”..

يستدعي دالتي ()NavController.navigateUp و ()NavController.popBackStack ، على التوالي، لإخراج الوجهة العليا من الكومه.

 

بالنسبة إلى الأزرار، يمكنك أيضاً إستخدام دالة فئة التنقل الملائمة ()createNavigateOnClickListener للتنقل إلى الوجهة:

KOTLIN

button.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.next_fragment, null))

JAVA

button.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.next_fragment, null));

 

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

 

 

 

 

إنشاء إنتقال بين الوجهات


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

1- قم بإنشاء ملفات مصادر الرسوميات المتحركة الخاصة بك. التنقل يدعم خواص وعرض الرسوم المتحركة. لمزيد من المعلومات، راجع مصادر الرسوميات المتحركة.

2- في علامة التبويب تصميم من محرر التنقل، أنقر فوق الإجراء حيث يجب أن يحدث الإنتقال.

3- في قسم الإنتقالات من لوحة السمات، أنقر على السهم المشير إلى الأسفل بجوار دخول. ستظهر قائمة بالإنتقالات المتاحه في مشروعك.

4- حدد إنتقالاً ليحدث، عندما يدخل المستخدم إلى الوجهة.

5- إرجع إلى قسم الإنتقالات، أنقر فوق السهم المشير لأسفل بجوار خروج. ومن ثم حدد الإنتقال ليحدث عندما يخرج المستخدم من الوجهة.

6 – أنقر فوق علامة التبويب نص للتبديل إلى عرض نص XML. يظهر XML الخاص بالإنتقال في عنصر الإجراء <action> للإجراء المحدد.

يتم تضمين الإجراء في XML، للوجهة النشطة قبل حدوث الإنتقال.

في المثال التالي، تعتبر specifAmountFragment هي الوجهة النشطة، لذا، تحتوي على الإجراء والحركات الإنتقالية: 

<fragment
    android:id="@+id/specifyAmountFragment"
    android:name="com.example.buybuddy.buybuddy.SpecifyAmountFragment"
    android:label="fragment_specify_amount"
    tools:layout="@layout/fragment_specify_amount">
    <action
        android:id="@+id/confirmationAction"
        app:destination="@id/confirmationFragment"
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right" />
 </fragment>

 

في هذا المثال، لدينا إنتقالات تحدث عند الإنتقال إلى وجهة (enterAnim و exitAnim وعند الخروج من تلك الوجهة (popEnterAnim و popExitAnim).

 

 

 

إضافة إنتقال العناصر المشتركة بين الوجهات

بالإضافة إلى الحركات الإنتقالية، يدعم “التنقل” الملاحة، إضافة عمليات نقل العناصر المشتركة بين الوجهات.

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

يقوم كل نوع من الوجهات، بتنفيذ واجهة برمجة التطبيقات البرمجية هذه، من خلال فئة فرعية لواجهة Navigator.Extras.

يتم تمرير الإضافات Extras إلى إستدعاء التنقل ()navigate.

 

 

 

 

إنتقالات العنصر المشترك لوجهة الشظيه

تتيح لك فئة FragmentNavigator.Extras إرفاق عناصر مشتركة للإستدعاء ()navigate لوجهة الشظيه، كما هو موضح في المثال أدناه:

KOTLIN

val extras = FragmentNavigatorExtras(
    imageView to "header_image",
    titleView to "header_title")
view.findNavController().navigate(R.id.confirmationAction,
    null, // Bundle of args
    null, // NavOptions
    extras)

JAVA

FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
    .addSharedElement(imageView, "header_image")
    .addSharedElement(titleView, "header_title")
    .build();
Navigation.findNavController(view).navigate(R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras);

 

 

 

 

إنتقالات العنصر المشترك لوجهة النشاط

تعتمد الأنشطة على ActivityOptionsCompat للتحكم في إنتقالات العنصر المشترك..

كما هو مشروح بالتفصيل في وثيقة، بداية النشاط مع العنصر المشترك وكما هو موضح في المثال أدناه: 

KOTLIN

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
        UtilPair.create(imageView, "header_image"),
        UtilPair.create(titleView, "header_title"))
val extras = ActivityNavigator.Extras(options)
view.findNavController().navigate(R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras)

JAVA

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(imageView, "header_image"),
        Pair.create(titleView, "header_title"));

ActivityNavigator.Extras extras = new ActivityNavigator.Extras.Builder()
    .setActivityOptions(options)
    .build();
Navigation.findNavController(view).navigate(R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras);

 

 

 

 

الإبلاغ عن مشكلة


إذا واجهت أي مشكلة في محرر التنقل، فيرجى تقديم تقرير في “مُتتبع المشاكل“.

للحصول على معلومات حول كيفية تقديم معلومات أكثر فائدة في تقارير المشكلات، راجع الإبلاغ عن خطأ.

 

 

 

ما التالي


لمزيد من المعلومات عن الملاحه، راجع المواضيع التاليه:

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

 

 

الإعلانات