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

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

الفيديو 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
        ) {}
    }
}