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

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

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

يمكنك أيضًا ترقية الاعتماد على مكوّنات 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 بدلاً من ذلك.
• تتوفّر الانتقالات التوقّعية للرجوع على الأجهزة التي تعمل بالإصدار Android 14 والإصدارات الأحدث، وهي غير متوافقة مع الإصدارات القديمة.
• تتوفّر أيضًا الانتقالات التي تم إنشاؤها باستخدام مَشاهد 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