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

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

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على إرشادات المطوّرين حول مكونات Material على GitHub.

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

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

مزيد من المعلومات حول كيفية إضافة إمكانية استخدام الإيماءات التنبؤية للرجوع

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

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

إضافة انتقالات مخصّصة باستخدام Progress API

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

نتوقّع أن تستخدم معظم التطبيقات واجهات برمجة التطبيقات AndroidX المتوافقة مع الأنظمة القديمة، ولكن تتوفّر أيضًا واجهات برمجة تطبيقات مشابهة للنظام الأساسي ضمن واجهة OnBackAnimationCallback التي يمكن اختبارها في الإصدار التجريبي الأول من 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.

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

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

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

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

• عند تحديد OVERRIDE_TRANSITION_CLOSE، يكون enterAnim هو تأثير الصور المتحركة عند الدخول إلى النشاط (Activity) أ، ويكون exitAnim هو تأثير الصور المتحركة عند الخروج من النشاط (Activity) ب.

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

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

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

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

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

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

استخدِم ميزة "الرجوع التوقّعي" في الأجزاء المتقاطعة في الحالات التالية:

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

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

استخدام عمليات معاودة الاتصال

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

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

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

المتطلبات

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

مراجع إضافية

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