إضافة إمكانية استخدام الصور المتحركة المضمّنة والمخصّصة لإيماءة الرجوع إلى الخلف التنبؤية

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

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

فيديو: صور متحركة تعرض إيماءة الرجوع إلى الخلف التنبؤية

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

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

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

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

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

اطّلِع على مزيد من المعلومات حول إتاحة ميزة "الترجيع التوقّعي".

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

يمكنك إنشاء مؤثرات متحركة وعمليات انتقال مخصّصة داخل التطبيق باستخدام واجهة برمجة التطبيقات Progress API وطريقة مؤثرات متحركة مخصّصة في جميع الأنشطة overrideActivityTransition.

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

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

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