Menambahkan dukungan untuk animasi kembali prediktif

Saat menggunakan API kembali sistem, Anda dapat memilih untuk menerima animasi dalam aplikasi dan mendukung transisi kustom.

Video 1: Animasi kembali prediktif

Setelah mengaktifkan, aplikasi Anda akan menampilkan animasi untuk "kembali ke layar utama", lintas aktivitas, dan lintas tugas.

Video tersebut menampilkan contoh singkat animasi "kembali prediktif" untuk lintas aktivitas dan "kembali ke layar utama" menggunakan aplikasi Setelan Android.

  1. Pada animasi, pengguna menggeser kembali untuk kembali ke layar setelan sebelumnya—contoh animasi lintas aktivitas.
  2. Sekarang pada layar sebelumnya, pengguna mulai menggeser kembali untuk kedua kalinya, menampilkan pratinjau layar utama dengan wallpapernya—contoh animasi "kembali ke layar utama".
  3. Pengguna terus menggeser ke kanan, menampilkan animasi jendela yang mengecil ke ikon di layar utama.
  4. Pengguna kini telah kembali sepenuhnya ke layar utama.

Pelajari lebih lanjut cara Menambahkan dukungan untuk gestur kembali prediktif.

Menambahkan transisi dan animasi kustom dalam aplikasi

Anda dapat membuat animasi dan transisi properti kustom dalam aplikasi, animasi lintas aktivitas kustom, dan animasi lintas fragmen kustom dengan gestur kembali prediktif.

Menambahkan transisi kustom di Jetpack Compose

Anda dapat menggunakan PredictiveBackHandler untuk menangani gestur kembali prediktif di Jetpack Compose untuk membuat transisi dalam aplikasi kustom. Fitur ini tersedia di androidx.activity:activity-compose:1.8.0-alpha01 atau yang lebih baru.

PredictiveBackHandler menyediakan lambda callback yang mengekspos Flow<BackEventCompat> yang memancarkan peristiwa saat pengguna menggeser kembali dari tepi. Peristiwa ini memberikan informasi tentang posisi sentuhan pengguna, tepi geser, dan yang paling penting progress, yang dapat digunakan untuk menganimasikan komponen saat menangani gestur kembali.

Cuplikan berikut menunjukkan contoh penggunaan PredictiveBackHandler untuk menganimasikan Surface yang diperkecil dan bergerak menjauh dengan progres gestur:

@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(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}