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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

نتوقع أن تستخدم معظم التطبيقات واجهات برمجة تطبيقات 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 بدلاً منها.
• تتوفّر انتقالات "ظهر القائمة على التوقّعات" على الأجهزة التي تعمل بالإصدار 14 من نظام التشغيل Android والإصدارات الأحدث وغير المتوافقة مع الإصدارات القديمة.
• تتوفّر أيضًا الانتقالات التي تم إنشاؤها باستخدام مَشاهد XML. في handleOnBackStarted، اضبط TransitionSeekController على نتيجة TransitionManager.createSeekController بدلاً من نتيجة controlDelayedTransition.

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

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

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

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

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

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

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

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

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

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

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