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

عند استخدام واجهات برمجة التطبيقات (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 هو حركة الخروج من النشاط ب.

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

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

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

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

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

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

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

بعض حركات المواد لدعم التنبؤات مرة أخرى اعتبارًا من 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

مراجع إضافية