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

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

فيديو: رسوم متحركة توقّعية تظهر في الخلف

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

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

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

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

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

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

تعرَّف على مزيد من المعلومات حول كيفية إتاحة إيماءات الرجوع التنبؤية.

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

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

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

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

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

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

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

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

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

لضمان أنّ عمليات انتقال قسم "النشاط" المخصّصة تتوافق مع ميزة "إيماءة إظهار شاشة الرجوع" على نظام التشغيل 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)	هدف Sdk	android:enableOnBackInvokedCallback	التبعية
الصور المتحركة للنظام	العودة إلى الصفحة الرئيسية	33	هل لديك	TRUE	بدون تحديد نمط
	النشاط المتبادل	34	هل لديك	TRUE	بدون تحديد نمط
	تعدد المهام	34	هل لديك	TRUE	بدون تحديد نمط
النظام الأساسي	النشاط المتبادل المخصّص	34	هل لديك	TRUE	بدون تحديد نمط
	منصة Progress API	34	هل لديك	TRUE	بدون تحديد نمط
مكونات مادية	بطاقة سفلية	34	هل لديك	TRUE	المكوّن المتعدد الأبعاد 1.10.0
	ورقة جانبية	34	هل لديك	TRUE	المكوّن المتعدد الأبعاد 1.10.0
	لائحة التنقّل	34	هل لديك	TRUE	المكوّن المتعدد الأبعاد 1.10.0
	بحث	34	هل لديك	TRUE	المكوّن المتعدد الأبعاد 1.10.0
الصور المتحركة في Jetpack	التجزئة المتقاطعة المخصّصة لنظام AndroidX	34	هل لديك	TRUE	جزء AndroidX 1.7
	عمليات نقل مخصّصة من AndroidX	34	هل لديك	TRUE	AndroidX Transition 1.5
	Progress API Jetpack	34	هل لديك	TRUE	النشاط على AndroidX 1.8

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

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

مراجع إضافية

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