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

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

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

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

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

راجع إرشادات مطوّري مكونات المواد الأساسية على GitHub للحصول على مزيد من المعلومات.

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

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

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

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

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

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

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

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

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

يمكن استخدام "واجهات برمجة تطبيقات التقدم" مع الإصدار 1.5.0-alpha01 من AndroidX أو الإصدارات الأحدث على الإصدار 14 من نظام التشغيل Android والإصدارات الأحدث لإنشاء عمليات انتقال قائم على التوقّعات.

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

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

مراجع إضافية

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