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

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

الفيديو 1: إيماءة إظهار شاشة الرجوع التنبؤي

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

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

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

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

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

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

إضافة انتقالات مخصّصة في 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
        ) {}
    }
}