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

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

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

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

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

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

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

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

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

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

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

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

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

نتوقّع أن تستخدم معظم التطبيقات واجهات برمجة تطبيقات 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.

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

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

لتقديم مثال على كيفية عمل ذلك، تخيَّل سيناريو يكون فيه النشاط (ب) في أعلى النشاط (أ) في سجلّ الرجوع. يمكنك التعامل مع الرسوم المتحركة المخصّصة لـ Activity بالطريقة التالية:

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

• عند تحديد OVERRIDE_TRANSITION_CLOSE، يكون enterAnim هو حركة الدخول في النشاط A، ويكون exitAnim هو حركة الخروج في النشاط B.

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

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

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

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

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

• استيرِد الإصدار 1.5.0 من Transitions أو إصدارًا أحدث، والإصدار 1.7.0 من Fragments أو إصدارًا أحدث. تعتمد معظم ميزات الإرجاع التوقّعي في Fragments على إمكانية البحث عن الصور المتحركة في Transitions، ولا يمكن ذلك إلا في الإصدار 1.5.0 أو الإصدارات الأحدث من Transitions.
• استخدِم الفئات 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.

استخدام عمليات إعادة الاستدعاء

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

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

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

المتطلبات

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

مراجع إضافية

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