بدء نشاط باستخدام صورة متحركة

تجربة طريقة Compose
‫Jetpack Compose هي مجموعة أدوات واجهة المستخدِم المقترَحة لنظام Android. تعرَّف على كيفية استخدام الصور المتحركة في Compose.
تحريك المحتوى بين أنواع مختلفة في Compose ←

توفّر عمليات نقل الأنشطة في تطبيقات التصميم المتعدد الأبعاد روابط مرئية بين حالات مختلفة من خلال الحركة والتحويلات بين العناصر الشائعة. يمكنك تحديد صور متحركة مخصّصة لعمليات النقل عند الدخول والخروج ولعمليات نقل العناصر المشترَكة بين الأنشطة.

الشكل 1: عملية نقل تتضمّن عناصر مشترَكة

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

يتيح Android عمليات النقل عند الدخول والخروج التالية:

  • ‫explode: تنقل طرق العرض إلى مركز المشهد أو خارجه.
  • ‫slide: تنقل طرق العرض إلى أحد جوانب المشهد أو خارجه.
  • ‫fade: تضيف طريقة عرض إلى المشهد أو تزيلها منه من خلال تغيير مستوى عتامة طريقة العرض.

تتوفّر أي عملية نقل توسّع نطاق فئة Visibility كعملية نقل عند الدخول أو الخروج. لمزيد من المعلومات، اطّلِع على مرجع واجهة برمجة التطبيقات لفئة Transition.

يتيح Android أيضًا عمليات نقل العناصر المشترَكة التالية:

  • ‫changeBounds: تحرّك التغييرات في حدود التنسيق لطرق العرض المستهدَفة.
  • ‫changeClipBounds: تحرّك التغييرات في حدود القص لطرق العرض المستهدَفة.
  • ‫changeTransform: تحرّك التغييرات في حجم وطريقة عرض طرق العرض المستهدَفة.
  • ‫changeImageTransform: تحرّك التغييرات في حجم وطريقة عرض الصور المستهدَفة.

عند تفعيل عمليات نقل الأنشطة في تطبيقك، يتم تفعيل عملية النقل التلقائية للتلاشي التدريجي بين النشاطَين اللذَين يتم الدخول إليهما والخروج منهما.

الشكل 2: عملية نقل مشهد تتضمّن عنصرًا مشترَكًا واحدًا

للاطّلاع على نموذج رمز برمجي يحرّك المحتوى بين الأنشطة باستخدام عناصر مشترَكة، يُرجى الانتقال إلى ActivitySceneTransitionBasic.

التحقّق من إصدار النظام

تتوفّر واجهات برمجة تطبيقات نقل الأنشطة على Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث. للحفاظ على التوافق مع الإصدارات السابقة من Android، تحقَّق من النظام version في وقت التشغيل قبل استدعاء واجهات برمجة التطبيقات لأي من هذه الميزات:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

تحديد عمليات نقل مخصّصة

أولاً، فعِّل عمليات نقل محتوى النافذة باستخدام السمة android:windowActivityTransitions عند تحديد نمط يرث من مظهر Material. يمكنك أيضًا تحديد عمليات النقل عند الدخول والخروج وعمليات نقل العناصر المشترَكة في تعريف النمط:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

تم تعريف عملية النقل change_image_transform في هذا المثال على النحو التالي:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

يتوافق العنصر changeImageTransform مع فئة ChangeImageTransform. لمزيد من المعلومات، اطّلِع على مرجع واجهة برمجة التطبيقات لـ Transition.

لتفعيل عمليات نقل محتوى النافذة في الرمز البرمجي بدلاً من ذلك، استدعِ الدالة Window.requestFeature():

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

لتحديد عمليات النقل في الرمز البرمجي، استدعِ هذه الدوال باستخدام كائن Transition:

تحدّد الدالتان setExitTransition() وsetSharedElementExitTransition() عملية النقل عند الخروج للنشاط الذي يستدعيها. تحدّد الدالتان setEnterTransition() وsetSharedElementEnterTransition() عملية النقل عند الدخول للنشاط الذي يتم استدعاؤه.

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

لبدء عملية النقل عند الدخول في أقرب وقت ممكن، استخدِم الدالة Window.setAllowEnterTransitionOverlap() في النشاط الذي يتم استدعاؤه. يسمح لك ذلك بتنفيذ عمليات نقل أكثر تأثيرًا عند الدخول.

بدء نشاط باستخدام عمليات النقل

إذا فعّلت عمليات النقل وضبطت عملية نقل عند الخروج لأحد الأنشطة، يتم تفعيل عملية النقل عند تشغيل نشاط آخر، على النحو التالي:

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

إذا ضبطت عملية نقل عند الدخول للنشاط الثاني، يتم تفعيل عملية النقل هذه أيضًا عند بدء النشاط. لإيقاف عمليات النقل عند بدء نشاط آخر، قدِّم حزمة خيارات null.

بدء نشاط يتضمّن عنصرًا مشترَكًا

لإنشاء صورة متحركة لنقل الشاشة بين نشاطَين يتضمّنان عنصرًا مشترَكًا، اتّبِع الخطوات التالية:

  1. فعِّل عمليات نقل محتوى النافذة في مظهرك.
  2. حدِّد عملية نقل العناصر المشترَكة في نمطك.
  3. حدِّد عملية النقل كمورد XML.
  4. عيِّن اسمًا شائعًا للعناصر المشترَكة في كلا التنسيقَين باستخدام السمة android:transitionName.
  5. استخدِم الدالة ActivityOptions.makeSceneTransitionAnimation().

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

بالنسبة إلى طرق العرض الديناميكية المشترَكة التي تنشئها في الرمز البرمجي، استخدِم الدالة View.setTransitionName() لتحديد اسم عنصر شائع في كلا النشاطَين.

لعكس الصورة المتحركة لنقل المشهد عند الانتهاء من النشاط الثاني، استدعِ الدالة Activity.finishAfterTransition() بدلاً من Activity.finish().

بدء نشاط يتضمّن عدة عناصر مشترَكة

لإنشاء صورة متحركة لنقل المشهد بين نشاطَين يتضمّنان أكثر من عنصر مشترَك واحد، حدِّد العناصر المشترَكة في كلا التنسيقَين باستخدام السمة android:transitionName أو استخدِم الدالة View.setTransitionName() في كلا النشاطَين، وأنشئ كائن ActivityOptions على النحو التالي:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));