تحريك الانتقالات بين الوجهات

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

يتضمن التنقل أيضًا العديد من الرسوم المتحركة الافتراضية للبدء. لإضافة رسوم متحركة إلى إجراء ما، قم بما يلي:

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

بعد إضافة الصور المتحركة، انقر على علامة التبويب النص للتبديل إلى طريقة عرض نص XML. يظهر الآن ملف XML الخاص بالصور المتحركة في عنصر <action> المقابل. في المثال التالي، specifyAmountFragment هي وجهة المصدر للإجراء confirmationAction:

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

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

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

يتم توفير العناصر المشتركة آليًا بدلاً من استخدام ملف XML للتنقل. تشتمل كل من وجهات الأنشطة والمجزأة على فئة فرعية من واجهة Navigator.Extras تقبل خيارات إضافية للتنقل، بما في ذلك العناصر المشتركة. يمكنك تمرير Extras عند الاتصال على navigate().

انتقال العنصر الذي تمت مشاركته إلى وجهة جزء

تتيح لك الفئة FragmentNavigator.Extras ربط العناصر المشترَكة من وجهة إلى أخرى حسب اسم عملية النقل، تمامًا مثل استخدام FragmentTransaction.addSharedElement(). يمكنك بعد ذلك تمرير المزايا الإضافية إلى navigate()، كما هو موضح في المثال التالي:

Kotlin

val extras = FragmentNavigatorExtras(view1 to "hero_image")

view.findNavController().navigate(
    R.id.confirmationAction,
    null, // Bundle of args
    null, // NavOptions
    extras)

Java

FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
    .addSharedElement(view1, "hero_image")
    .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(view1, "hero_image"))
val extras = ActivityNavigatorExtras(options)
view.findNavController().navigate(
    R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras)

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "hero_image"));

ActivityNavigatorExtras extras = new ActivityNavigatorExtras.Builder()
    .setActivityOptions(options)
    .build();


Navigation.findNavController(view).navigate(
    R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras);

تطبيق الصور المتحركة المنبثقة على تأثيرات الانتقال بين الأنشطة

عند الانتقال من أو إلى Activity، لا يتم تطبيق الصور المتحركة للنافذة المنبثقة تلقائيًا. بدلاً من ذلك، يجب طلب النطاق ActivityNavigator.applyPopAnimationsToPendingTransition() من وجهة Activity المستهدَفة التي من المفترض أن تظهر فيها الصورة المتحركة:

Kotlin

override fun finish() {
    super.finish()
    ActivityNavigator.applyPopAnimationsToPendingTransition(this)
}

Java

@Override
public void finish() {
    super.finish();
    ActivityNavigator.applyPopAnimationsToPendingTransition(this);
}