إتاحة الصور المتحركة القائمة على التوقّعات

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

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

يمكنك أيضًا ترقية الاعتماد على مكوّنات Material Design إلى الإصدار 1.10.0 من MDC Android لتلقّي الرسوم المتحركة لمكوّنات Material Design، مثل ما يلي:

• أوراق البيانات في أسفل الصفحة
• الأوراق الجانبية
• البحث

اطّلِع على إرشادات المطوّرين بشأن مكوّنات المواد على GitHub للحصول على مزيد من المعلومات.

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

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

مزيد من المعلومات حول كيفية إضافة ميزة الإيماءات التوقّعية للرجوع

إضافة انتقالات وصور متحركة مخصّصة داخل التطبيق

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

إضافة انتقالات مخصّصة باستخدام واجهة برمجة التطبيقات Progress API

باستخدام الإصدار 1.8.0-alpha01 من AndroidX Activity أو إصدار أحدث، يمكنك استخدام واجهات برمجة التطبيقات الخاصة بالتقدّم في ميزة "الرجوع التوقّعي" لإنشاء صور متحركة مخصّصة لميزة "الرجوع التوقّعي" في تطبيقك. وتُعدّ واجهات برمجة التطبيقات هذه مفيدة في إضافة صور متحركة إلى طرق العرض، ولكنّها تتضمّن قيودًا عند إضافة صور متحركة إلى عمليات النقل بين الأجزاء. في OnBackPressedCallback ، طرحنا الطريقتَين handleOnBackProgressed و handleOnBackCancelled و handleOnBackStarted لتحريك الكائنات أثناء التمرير سريعًا للخلف. استخدِم هذه الطرق إذا كنت تحتاج إلى تخصيص أكثر من الصور المتحركة التلقائية التي يوفّرها النظام أو الصور المتحركة لمكوّنات Material.

نتوقع أن تستخدم معظم التطبيقات واجهات برمجة تطبيقات AndroidX المتوافقة مع الإصدارات القديمة، ولكن هناك أيضًا واجهات برمجة تطبيقات مماثلة للنظام الأساسي ضمن واجهة OnBackAnimationCallback المتوفّرة للاختبار في الإصدار 1 من الإصدار التجريبي للمطوّرين من Android 14 والإصدارات الأحدث.

استخدام واجهات برمجة تطبيقات Progress مع AndroidX Transitions

يمكن استخدام واجهات برمجة تطبيقات Progress مع الإصدار 1.5.0-alpha01 من AndroidX Transitions أو إصدار أحدث على نظام التشغيل Android 14 والإصدارات الأحدث لإنشاء انتقالات "الرجوع التوقّعي".

1. استخدِم TransitionManager#controlDelayedTransition بدلاً من beginDelayedTransition لتشغيل الانتقالات أثناء تمرير المستخدم سريعًا للخلف.
2. أنشئ عملية النقل في غضون handleOnBackStarted.
3. شغِّل الانتقال مع حدث الرجوع ضمن handleOnBackProgressed من خلال ربط currentFraction بـ BackEvent.progress الذي يعرض مدى تمرير المستخدم للشاشة للخلف.
4. يمكنك إنهاء عملية النقل بعد أن يُجري المستخدم إيماءة الرجوع في handleOnBackPressed.
5. أخيرًا، أعِد ضبط حالة الانتقال خلال handleOnBackCancelled.

يعرض الفيديو التالي ورمز Kotlin وملف XML انتقالًا مخصّصًا بين مربّعَين تم تنفيذهما باستخدام OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  

<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

عند استخدام الانتقالات التوقّعية للرجوع، يُرجى مراعاة ما يلي:

• استخدِم isSeekingSupported للتحقّق مما إذا كان الانتقال يتيح ميزة "الرجوع التوقّعي".
• يمكنك إلغاء isSeekingSupported لعرض قيمة صحيحة للانتقالات المخصّصة.
• أنشئ وحدة تحكّم واحدة لكل صورة متحركة.
• تتوفّر عمليات النقل التوقّعية للخلف مع عمليات النقل في AndroidX، ولكن لا تتوفّر مع عمليات النقل في إطار العمل. توقَّف عن استخدام انتقالات إطار العمل واستخدِم انتقالات Animator وAndroidX بدلاً من ذلك.
• تتوفّر الانتقالات التوقّعية للرجوع على الأجهزة التي تعمل بالإصدار Android 14 والإصدارات الأحدث، وهي غير متوافقة مع الإصدارات القديمة.
• تتوفّر أيضًا الانتقالات التي تم إنشاؤها باستخدام مَشاهد XML. في handleOnBackStarted، اضبط TransitionSeekController على نتيجة TransitionManager.createSeekController بدلاً من نتيجة controlDelayedTransition.

إضافة انتقالات مخصّصة للأنشطة على الإصدار 14 من نظام التشغيل Android والإصدارات الأحدث

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

لتوفير مثال على كيفية عمل ذلك، تخيل سيناريو يليه النشاط "ب" فوق النشاط "أ" في الحزمة الخلفية. يمكنك التعامل مع ملفات رسوم متحركة مخصّصة لنشاطات بالطريقة التالية:

• استخدِم الانتقالات الافتتاحية أو الانتقالات الإغلاقية ضمن onCreate طريقة النشاط "ب".
• عندما ينتقل المستخدِم إلى "النشاط (ب)"، استخدِم OVERRIDE_TRANSITION_OPEN. عندما يمرّر المستخدم سريعًا للانتقال مرة أخرى إلى "النشاط (أ)"، استخدِم OVERRIDE_TRANSITION_CLOSE.

• عند تحديد OVERRIDE_TRANSITION_CLOSE، يكون enterAnim هو الحركة المخصّصة للدخول في النشاط "أ" وexitAnim هو الحركة المخصّصة للخروج من النشاط "ب".

إتاحة استخدام ميزة "إيماءة إظهار شاشة الرجوع" مع الأجزاء

عند تنفيذ ميزة "الرجوع التوقّعي" مع الأجزاء، هناك طريقتان.

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

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

يُرجى مراعاة العوامل التالية:

• استورِد الإصدار 1.5.0 من أداة "الانتقالات" أو إصدارًا أحدث والإصدار 1.7.0 من أداة "المقاطع" أو إصدارًا أحدث. تعتمد الكثير من ميزات التنقل التلقائي للخلف في "المقاطع" على قدرة مكتبة Transitions على التقديم أو الإيقاف في الصور المتحركة، وهو ما لا يمكن تنفيذه إلا في مكتبة Transitions 1.5.0 أو الإصدارات الأحدث.
• استخدِم "المقاطع" مع FragmentManager أو مكوّن التنقّل لمعالجة الحزمة المُرجعة. لا تتوفّر ميزة "الرجوع التوقّعي" إذا كنت تدير حزمة الرجوع الخاصة بك. نقل بياناتك بعيدًا عن الحِزم القديمة التي لا يعرف عنها FragmentManager
• تتضمّن بعض المكتبات ميزة "الرجوع التوقّعي". يُرجى مراجعة المستندات للتأكّد من ذلك.
• يمكن استخدام فئة Animator ومكتبة AndroidX Transition.
• لا تتوفّر فئة Animation ومكتبة إطار العمل Transition.
• لا تعمل الرسوم المتحرّكة القائمة على التوقّعات إلا على الأجهزة التي تعمل بالإصدار 14 من نظام التشغيل Android أو إصدار أحدث.

استخدِم المقاطع المتداخلة اللاحقة القائمة على التوقّعات في الحالات التالية:

• أضِف تأثيرًا متحركًا إلى مكوّن التنقّل.
• أضِف تأثيرات متحركة باستخدام setCustomAnimations.
• أضِف تأثيرًا متحركًا للتأثيرات الانتقالية للدخول والخروج باستخدام setEnterTransition، setExitTransition، وsetReenterTransition، setReturnTransition.
• أضِف تأثيرًا متحركًا إلى تأثيرات انتقال العناصر المشترَكة باستخدام رمزَي setSharedElementEnterTransition و setSharedElementReturnTransition.

تتيح بعض الحركات المادية الرجوع التوقّعي اعتبارًا من الإصدار 1.12.02-alpha02 أو الإصدارات الأحدث، بما في ذلك MaterialFadeThrough وMaterialSharedAxis و MaterialFade. لا يتيح تطبيق MaterialContainerTransform ميزة "التذكير التوقّعي".

استخدام طلبات إعادة الاتصال

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

أنشئ OnBackPressedCallback. ضمن handleOnBackProgressed، وسِّع المقتطف وازحِفه. بعد ذلك، اخرج من الحزمة الخلفية. بعد ذلك، شغِّل انتقال العنصر المشترَك باستخدام setSharedElementReturnTransition خارج دالة الاستدعاء.

لمزيد من المعلومات، يُرجى الاطّلاع على نموذج الرمز البرمجي على GitHub.

المتطلبات

استخدِم الجدول التالي للتعرّف على ما يتم التحكّم فيه من خلالtargetSdkVersion وcompileSdkVersion، وإصدار الجهاز، والتبعيات، وعلامات البيان، وعلامات المقاطع. يشير هذا الجدول إلى متطلبات الرموز.

مراجع إضافية

• عيّنات من رموز "الرجوع التلقائي"
• أساسيات فيديو "الخلفية للنظام"
• الاستعداد لمستقبل فيديوهات Android