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

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

الفيديو 1: صور متحركة تعرض إيماءة إظهار شاشة الرجوع

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

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

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

مزيد من المعلومات حول كيفية إضافة إيماءات إظهار شاشة الرجوع

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

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

إضافة انتقالات مخصّصة في Jetpack Compose

يمكنك استخدام PredictiveBackHandler للتعامل مع إيماءات إظهار شاشة الرجوع في Jetpack Compose لإنشاء انتقالات مخصّصة داخل التطبيق. تتوفّر هذه الميزة في الإصدار androidx.activity:activity-compose:1.8.0-alpha01 أو الإصدارات الأحدث.

يوفّر PredictiveBackHandler دالة lambda لردّ الاتصال تعرض Flow<BackEventCompat> الذي يُصدر أحداثًا عندما يمرّر المستخدم سريعًا من الحافة. توفّر هذه الأحداث معلومات عن موضع لمس المستخدم وحافة التمرير السريع، والأهم من ذلك progress، والتي يمكن استخدامها لتحريك المكوّنات بعيدًا كجزء من معالجة إيماءة الرجوع.

يوضّح المقتطف التالي مثالاً على استخدام PredictiveBackHandler لتحريك Surface وتصغير حجمه وإبعاده مع تقدّم الإيماءة:

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture.
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture.
            // Animate scale and xOffset back to 1f and 0f respectively.
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}