Kembali prediktif di Compose

Kembali prediktif, fitur navigasi gestur, memungkinkan pengguna melihat pratinjau tempat geser kembali membawa mereka. Kembali prediktif terintegrasi dengan Compose dengan lancar untuk meningkatkan pengalaman navigasi aplikasi Anda. Pengguna menikmati transisi yang lebih lancar dan intuitif saat menavigasi kembali dalam aplikasi Anda. Gambar 1 menunjukkan cara kerjanya di aplikasi contoh SociaLite.

Gambar 1. Animasi kembali ke layar utama di aplikasi contoh SociaLite.

Panduan ini menjelaskan cara melakukan hal berikut dengan kembali prediktif:

  • Memilih untuk menggunakan gestur kembali prediktif
  • Mengaktifkan animasi sistem default
  • Mengaktifkan kembali prediktif dengan Navigation Compose
  • Mengintegrasikan dengan transisi elemen bersama
  • Mendukung kembali prediktif dengan komponen Compose Material
  • Mengakses progres secara manual dengan PredictiveBackHandler
  • Menguji animasi gestur kembali prediktif

Memilih untuk menggunakan gestur kembali prediktif

Untuk mengaktifkan animasi kembali prediktif, Anda harus memilih untuk mendukung gestur kembali prediktif. Untuk mengaktifkan, tambahkan android:enableOnBackInvokedCallback="true" ke tag <application> atau tag <activity> individual dalam file AndroidManifest.xml Anda.

Mengaktifkan animasi sistem default

Animasi sistem kembali ke layar utama, lintas aktivitas, dan lintas tugas tersedia di perangkat Android 15 dan yang lebih baru untuk aplikasi yang telah bermigrasi ke API penanganan kembali yang didukung.

  • Kembali ke layar utama: Mengembalikan pengguna ke layar utama.
  • Lintas aktivitas: Transisi antar-aktivitas dalam aplikasi.
  • Lintas tugas: Transisi antar-tugas.

Animasi ini diaktifkan secara default di Android 15 dan yang lebih tinggi. Di perangkat yang menjalankan Android 13 atau 14, pengguna dapat mengaktifkannya melalui Opsi developer.

Untuk mendapatkan animasi sistem, update dependensi Activity AndroidX ke 1.6.0 atau yang lebih tinggi.

Mengaktifkan kembali prediktif dengan Navigation Compose

Untuk menggunakan kembali prediktif di Navigation Compose, pastikan Anda menggunakan library navigation-compose 2.8.0 atau yang lebih tinggi.

Compose Navigasi secara otomatis melakukan cross-fade antarlayar saat pengguna menggeser kembali:

Gambar 2. Animasi dalam aplikasi crossfade default di SociaLite.

Saat menavigasi, Anda dapat membuat transisi kustom dengan popEnterTransition dan popExitTransition. Saat diterapkan ke NavHost, pengubah ini memungkinkan Anda menentukan cara animasi layar masuk dan keluar. Anda dapat menggunakannya untuk membuat berbagai efek, seperti penskalaan, pengelihatan buram, atau geser.

Dalam contoh ini, scaleOut digunakan dalam popExitTransition untuk menskalakan layar keluar saat pengguna menavigasi kembali. Selain itu, parameter transformOrigin menentukan titik tempat animasi penskalaan terjadi. Secara default, titik ini adalah bagian tengah layar (0.5f, 0.5f). Anda dapat menyesuaikan nilai ini agar penskalaan berasal dari titik yang berbeda.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Kode ini menghasilkan hasil berikut:

Gambar 3. Animasi dalam aplikasi kustom di SociaLite.

popEnterTransition dan popExitTransition secara khusus mengontrol animasi saat memunculkan data sebelumnya, misalnya dengan gestur kembali. Anda juga dapat menggunakan enterTransition dan exitTransition untuk menentukan animasi untuk masuk dan keluar dari composable secara umum, bukan hanya untuk kembali prediktif. Jika Anda hanya menetapkan enterTransition dan exitTransition, keduanya akan digunakan untuk navigasi reguler dan memunculkan data sebelumnya. Namun, penggunaan popEnterTransition dan popExitTransition memungkinkan Anda membuat animasi yang berbeda untuk navigasi kembali.

Mengintegrasikan dengan transisi elemen bersama

Transisi elemen bersama memberikan koneksi visual yang lancar antara composable dengan konten bersama, yang sering digunakan untuk navigasi.

Gambar 4. Transisi elemen bersama dengan kembali prediktif di Navigation Compose.

Untuk menggunakan elemen bersama dengan Navigation Compose, lihat Kembali prediktif dengan elemen bersama.

Mendukung kembali prediktif dengan komponen Compose Material

Banyak komponen di library Material Compose dirancang agar berfungsi dengan lancar dengan gestur kembali prediktif. Untuk mengaktifkan animasi kembali prediktif dalam komponen ini, sertakan dependensi Material3 terbaru (androidx.compose.material3:material3-*:1.3.0 atau yang lebih tinggi) dalam project Anda.

Komponen Material yang mendukung animasi kembali prediktif meliputi:

SearchBar dan ModalBottomSheet secara otomatis menganimasikan dengan gestur kembali prediktif. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet, dan DismissibleNavigationDrawer mengharuskan Anda meneruskan drawerState ke composable konten sheet masing-masing.

Mengakses progres secara manual dengan PredictiveBackHandler

Composable PredictiveBackHandler[5] di Jetpack Compose memungkinkan Anda mencegat gestur kembali dan mengakses progresnya. Anda dapat bereaksi terhadap gestur kembali pengguna secara real time, membuat animasi atau perilaku kustom berdasarkan jarak geser pengguna.

Untuk menggunakan PredictiveBackHandler, pastikan Anda menggunakan androidx.activity:activity:1.6.0 atau yang lebih tinggi.

PredictiveBackHandler menyediakan Flow<BackEventCompat> yang memunculkan peristiwa yang mewakili progres gestur kembali. Setiap peristiwa berisi informasi seperti:

  • progress: Nilai float antara 0 dan 1 yang menunjukkan progres gestur kembali (0 = gestur dimulai, 1 = gestur selesai).
  • touchX dan touchY: Koordinat X dan Y peristiwa sentuh.

Cuplikan berikut menunjukkan penggunaan dasar PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Contoh: Mengintegrasikan dengan panel navigasi

Contoh ini menunjukkan cara menerapkan animasi dalam aplikasi kustom menggunakan PredictiveBackHandler untuk membuat interaksi yang lancar dengan panel samping navigasi sebagai respons terhadap gestur kembali di JetLagged:

Gambar 5. Panel navigasi dengan dukungan kembali prediktif.

Dalam contoh ini, PredictiveBackHandler digunakan untuk:

  • Melacak progres gestur kembali.
  • Perbarui translationX panel samping berdasarkan progres gestur.
  • Gunakan velocityTracker untuk membuka atau menutup panel samping dengan lancar berdasarkan kecepatan gestur saat gestur selesai atau dibatalkan.

Menguji animasi gestur kembali prediktif

Jika masih menggunakan Android 13 atau Android 14, Anda dapat menguji animasi kembali ke layar utama.

Untuk menguji animasi ini, ikuti langkah-langkah berikut:

  1. Di perangkat, buka Setelan > Sistem > Opsi developer.
  2. Pilih Animasi kembali prediktif.
  3. Luncurkan aplikasi yang telah diupdate, dan gunakan gestur kembali untuk melihat cara kerjanya.

Di Android 15 dan yang lebih baru, fitur ini diaktifkan secara default.

Referensi lainnya