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 menggunakan Compose atau View. Untuk mempelajari cara membuat transisi menggunakan View, lihat Menambahkan dukungan untuk animasi kembali prediktif di View.

Menambahkan transisi kustom di Jetpack Compose

Anda dapat menggunakan PredictiveBackHandler untuk menangani gestur kembali prediktif di Jetpack Compose guna membuat transisi kustom dalam aplikasi. 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 memunculkan peristiwa saat pengguna menggeser kembali dari tepi. Peristiwa ini memberikan informasi tentang posisi sentuh pengguna, tepi geser, dan yang paling penting progress, yang dapat digunakan untuk menganimasikan komponen sebagai bagian dari penanganan gestur kembali.

Cuplikan berikut menunjukkan contoh penggunaan PredictiveBackHandler untuk menganimasikan Surface yang memperkecil skala dan 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 { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}