ميزة "الرجوع إلى الخلف التنبؤي" في ميزة "الكتابة"

"إيماءة إظهار شاشة الرجوع" هي ميزة تنقّل باستخدام الإيماءات تتيح للمستخدمين معاينة الصفحات التي سينقلهم إليها التمرير السريع للرجوع. إنّ ميزة "الرجوع التوقّعي" مدمجة بسلاسة مع ميزة "الإنشاء" لتحسين تجربة التنقّل في تطبيقك. يستفيد المستخدمون من عمليات انتقال سلسة وأكثر سهولة عند التنقّل للخلف داخل تطبيقك. يوضّح الشكل 1 كيفية عمل ذلك في نموذج تطبيق SociaLite.

يوضّح هذا الدليل كيفية تنفيذ ما يلي باستخدام الترجيع التوقّعي:

• تفعيل إيماءة إظهار شاشة الرجوع التوقّعية
• تفعيل الصور المتحركة التلقائية للنظام
• تفعيل ميزة "الرجوع إلى الخلف التنبؤي" باستخدام ميزة "إنشاء التنقّل"
• الدمج مع عمليات انتقال العناصر المشتركة
• إتاحة ميزة "الرجوع التوقّعي" باستخدام مكوّنات Material Compose
• الوصول إلى مستوى التقدّم يدويًا باستخدام PredictiveBackHandler
• اختبار الصور المتحركة لإيماءة الرجوع إلى الخلف التنبؤية

تفعيل إيماءة إظهار شاشة الرجوع التوقّعية

لتفعيل الصور المتحركة التي تعرض إيماءة الرجوع إلى الخلف التنبؤية، عليك تفعيل ميزة استخدام إيماءة الرجوع إلى الخلف التنبؤية. للموافقة، أضِف android:enableOnBackInvokedCallback="true" إلى علامة <application> أو علامات <activity> الفردية ضمن ملف AndroidManifest.xml.

تفعيل الصور المتحركة التلقائية للنظام

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

• الرجوع إلى الشاشة الرئيسية: ينقل المستخدم إلى الشاشة الرئيسية.
• عمليات النقل بين الأنشطة: عمليات النقل بين الأنشطة داخل التطبيق
• عمليات الانتقال بين المهام: عمليات الانتقال بين المهام

يتم تفعيل هذه الصور المتحركة تلقائيًا على الإصدار 15 من نظام التشغيل Android والإصدارات الأحدث. على الأجهزة التي تعمل بنظام التشغيل Android 13 أو 14، يمكن للمستخدمين تفعيلها من خلال خيارات المطوّرين.

للحصول على الرسومات المتحرّكة للنظام، عليك تحديث الإصدار Activity من AndroidX إلى 1.6.0 أو إصدار أحدث.

تفعيل ميزة "الرجوع إلى الخلف التنبؤي" باستخدام ميزة "إنشاء التنقّل"

لاستخدام ميزة "الرجوع التوقّعي" في ميزة "التنقّل والإنشاء"، تأكَّد من استخدام مكتبة navigation-compose 2.8.0 أو إصدار أحدث.

يُظهر وضع التنقّل والإنشاء انتقالًا مموّهًا تلقائيًا بين الشاشات عندما يُمرِّر المستخدم سريعًا للخلف:

عند التنقّل، يمكنك إنشاء انتقالات مخصّصة باستخدام رمزَي popEnterTransition وpopExitTransition. عند تطبيق هذه المُعدِّلات على NavHost، تتيح لك تحديد كيفية تحريك شاشتَي الدخول والخروج. ويمكنك استخدامها لإنشاء مجموعة متنوعة من التأثيرات، مثل التكبير أو التمويه أو التمرير.

في هذا المثال، يتم استخدام scaleOut ضمن popExitTransition لتصغير الشاشة التي يتم الخروج منها أثناء تنقّل المستخدم للخلف. بالإضافة إلى ذلك، تحدّد المَعلمة transformOrigin النقطة التي يحدث حولها التكبير/التصغير الرسوم المتحركة. النقطة التلقائية هي مركز الشاشة (0.5f, 0.5f). يمكنك ضبط هذه القيمة لبدء التصغير أو التكبير من نقطة مختلفة.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

تؤدي هذه التعليمة البرمجية إلى النتيجة التالية:

يتحكّم العنصران popEnterTransition وpopExitTransition تحديدًا في الصور المتحركة عند عرض الحزمة الخلفية، باستخدام إيماءة الرجوع مثلاً. يمكنك أيضًا استخدام enterTransition وexitTransition لتحديد الرسوم المتحركة للانتقال إلى العناصر القابلة للتجميع والخروج منها بشكل عام، وليس فقط للرجوع التوقّعي. في حال ضبط enterTransition وexitTransition فقط، سيتم استخدامهما لكل من التنقّل العادي وإزالة الحزمة الخلفية. ومع ذلك، يتيح لك استخدام popEnterTransition وpopExitTransition إنشاء صور متحركة مختلفة للتنقّل للخلف.

الدمج مع عمليات انتقال العناصر المشتركة

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

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

إتاحة ميزة "الرجوع التوقّعي" باستخدام مكوّنات Material Compose

تم تصميم العديد من المكوّنات في مكتبة Material Compose للعمل بسلاسة مع إيماءات الرجوع التوقّعية. لتفعيل الصور المتحركة التوقّعية للرجوع في هذه المكوّنات، أدرِج أحدث تبعية Material3 (androidx.compose.material3:material3-*:1.3.0 أو إصدار أحدث) في مشروعك.

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

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

تظهر SearchBar وModalBottomSheet تلقائيًا مع إيماءات الرجوع التنبؤية. تتطلّب ModalNavigationDrawer و ModalDrawerSheet وDismissibleDrawerSheet و DismissibleNavigationDrawer تمرير drawerState إلى عناصر تركيب محتوى جداول البيانات ذات الصلة.

الوصول إلى مستوى التقدّم يدويًا باستخدام PredictiveBackHandler

تتيح لك العنصر القابل للتجميع PredictiveBackHandler[5] في Jetpack Compose اعتراض إيماءة الرجوع والاطّلاع على مستوى تقدّمها. يمكنك التفاعل مع لفتة التنقّل للخلف التي ينفّذها المستخدم في الوقت الفعلي، وإنشاء رسوم متحركة أو سلوكيات مخصّصة استنادًا إلى مدى بُعد التمرير السريع الذي ينفّذه المستخدم.

لاستخدام PredictiveBackHandler، تأكَّد من استخدام androidx.activity:activity:1.6.0 أو إصدار أحدث.

يوفّر تطبيق PredictiveBackHandler Flow<BackEventCompat> يُرسِل أحداثًا تمثّل مستوى تقدّم إيماءة الرجوع. يحتوي كلّ حدث على معلومات مثل:

• ‫progress: قيمة عائمة بين 0 و1 تشير إلى مستوى تقدّم لفتة الالتفاف للخلف (0 = بدء اللفتة، 1 = اكتمال اللفتة)
• ‫touchX وtouchY: الإحداثيات X وY لحدث اللمس

يعرض المقتطف التالي الاستخدام الأساسي PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

مثال: الدمج مع قائمة تنقل

يوضّح هذا المثال كيفية تنفيذ صورة متحركة مخصّصة داخل التطبيق باستخدام PredictiveBackHandler لإنشاء تفاعل سلس مع ملف ملتفٍ للتنقّل استجابةً للإيماءات للرجوع في JetLagged:

في هذا المثال، يتم استخدام PredictiveBackHandler لإجراء ما يلي:

• تتبُّع مستوى تقدُّم إيماءة الرجوع
• عدِّل translationX للدرج استنادًا إلى مستوى تقدُّم الإيماءة.
• استخدِم velocityTracker لفتح الدرج أو إغلاقه بسلاسة استنادًا إلى سرعة الإيماءة عند إكمالها أو إلغائها.

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

إذا كنت لا تزال تستخدم Android 13 أو Android 14، يمكنك اختبار الميمَج المتحرّك للرجوع إلى الشاشة الرئيسية.

لاختبار هذا المقطع المتحركة، اتّبِع الخطوات التالية:

1. على جهازك، انتقِل إلى الإعدادات > النظام > خيارات المطوّرين.
2. اختَر صور متحركة تعرض إيماءة الرجوع إلى الخلف التنبؤية.
3. افتح تطبيقك المُحدَّث واستخدِم إيماءة الرجوع لتجربة هذه الميزة.

تكون هذه الميزة مفعّلة تلقائيًا على نظام التشغيل Android 15 والإصدارات الأحدث.

مصادر إضافية

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