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

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

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

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

يمكنك أيضًا ترقية اعتمادية مكوّنات المواد إلى الإصدار 1.10.0 من MDC. في جهاز Android لتلقّي الصور المتحركة لمكوّنات المواد، على النحو التالي:

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

راجِع إرشادات مطوّري المكوّنات المادية على GitHub للتعرّف على مزيد من المعلومات.

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

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

مزيد من المعلومات حول كيفية إتاحة إيماءات الرجوع التنبئية

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

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

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

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

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

ملاحظة: تعرَّف على كيفية تصميم صور متحركة وصور متحركة مخصصة داخل التطبيق..

استخدام واجهات برمجة التطبيقات Progress API مع ميزة "الانتقالات في AndroidX"

يمكن استخدام "واجهات برمجة تطبيقات التقدم" مع الإصدار 1.5.0-alpha01 من AndroidX أو الإصدارات الأحدث في نظام التشغيل 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، ولكن ليس مع انتقالات أطر العمل. ننصحك بالخروج من إطار العمل الانتقالات.
• تتوفّر انتقالات "الرجوع القائمة على التوقّعات" على الأجهزة التي تعمل بنظام التشغيل 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 هو حركة الخروج من النشاط ب.

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

إضافة توافق مع ميزة "الرجوع القائمة على التوقّعات" مع أجزاء

عند تنفيذ نمط الرجوع التنبؤي مع الأجزاء، هناك أسلوبان.

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

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

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

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

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

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

بعض حركات المواد لدعم التنبؤات مرة أخرى اعتبارًا من 1.12.02-alpha02 أو أعلى، بما في ذلك MaterialFadeThrough وMaterialSharedAxis MaterialFade ملاحظة: لا تتوفّر ميزة "التوقّعات" في MaterialContainerTransform. رجوع.

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

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

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

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

المتطلبات

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

الفئة	Animation	مجمعSdk	البلد المستهدف	android:enableOnBackInvokedCallback	التبعية
الصور المتحركة للنظام	العودة إلى الصفحة الرئيسية	33	هل لديك	صواب	بدون تحديد نمط
	نشاط متبادل	34	هل لديك	صواب	بدون تحديد نمط
	تعدد المهام	34	هل لديك	صواب	بدون تحديد نمط
النظام الأساسي	نشاط مشترَك مخصّص	34	هل لديك	صواب	بدون تحديد نمط
	منصة Progress API	34	هل لديك	صواب	بدون تحديد نمط
المكونات المادية	بطاقة سفلية	34	هل لديك	صواب	المكوِّن 1.10.0 من Material
	ورقة جانبية	34	هل لديك	صواب	المكوِّن 1.10.0 من Material
	لائحة التنقّل	34	هل لديك	صواب	المكوِّن 1.10.0 من Material
	بحث	34	هل لديك	صواب	المكوِّن 1.10.0 من Material
الصور المتحركة في Jetpack	أجزاء متشابكة مخصّصة في AndroidX	34	هل لديك	صواب	جزء من AndroidX 1.7
	انتقالات AndroidX المخصّصة	34	هل لديك	صواب	الإصدار 1.5 من AndroidX Transit
	حزمة Jetpack API من واجهة برمجة التطبيقات	34	هل لديك	صواب	النشاط على AndroidX 1.8

يشير الجدول التالي إلى المتطلبات التي تسمح للمستخدمين بمشاهدة الرسوم المتحركة.

الفئة	Animation	تم تفعيل خيار المطوّرين.	إصدار الجهاز
الصور المتحركة للنظام	العودة إلى الصفحة الرئيسية	صواب	33
	نشاط متبادل	صواب	34
	تعدد المهام	صواب	34
النظام الأساسي	نشاط مشترَك مخصّص	صواب	34
	منصة Progress API	خطأ	34
المكونات المادية	بطاقة سفلية	خطأ	34
	ورقة جانبية	خطأ	34
	لائحة التنقّل	خطأ	34
	بحث	خطأ	34
الصور المتحركة في Jetpack	أجزاء متشابكة مخصّصة في AndroidX	خطأ	34
	انتقالات AndroidX المخصّصة	خطأ	34
	حزمة Jetpack API من واجهة برمجة التطبيقات	خطأ	34

مراجع إضافية

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