Geser untuk menutup

Animasi geser untuk menutup menunjukkan transisi saat pengguna membuka halaman sebelumnya.

Detail animasi geser untuk menutup mirip dengan mekanisme tekan RSB. Jari Anda mengontrol progres animasi hingga 50%.

Ada animasi tambahan di Tampilan Aplikasi yang ditautkan ke gestur tutup. Jumlah gerakan yang ditampilkan pada tampilan aplikasi tidak sama persis dengan jarak yang diperlukan oleh jari untuk bergerak. Tampilan aplikasi tidak boleh keluar dari tepi layar karena akan menampilkan efek seperti tekanan di kedua sisi yang kuat.

Implementasi

Wear memiliki versi Box-nya sendiri, SwipeToDismissBox. Versi ini menambahkan dukungan gestur geser-untuk-menutup yang mirip dengan tombol kembali di perangkat seluler.

SwipeToDismissBox adalah composable yang dapat ditutup dengan menggeser ke kanan.

Untuk menggunakan SwipeToDismissBox, Anda harus terlebih dahulu membuat status. Status berisi informasi arah geser, apakah animasi berjalan atau tidak, nilai saat ini dan target, dan lainnya. Contoh berikut menunjukkan cara mendesain tindakan geser untuk menutup yang sederhana:

val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
    onDismissed = { /* navigateBack */ },
) { isBackground ->
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}

Untuk informasi selengkapnya tentang cara menggunakan SwipeToDismissBox bersama library Navigasi, lihat dokumen referensi untuk library Navigasi Wear Compose.

Desain

Saat mendesain tindakan geser untuk menutup, perhatikan dua prinsip berikut:

Tepi layar

Akun untuk elemen UI lainnya yang dapat digeser, seperti tampilan aplikasi dengan penomoran halaman. Jika geser untuk menutup bisa dilakukan, sisihkan 20% dari tepi layar untuk memicu gerakan tersebut.

Lihat contoh dari codebase Compose Material untuk Wear OS untuk contoh geser tepi saat konten dapat di-scroll secara horizontal.

Nilai minimum untuk kembali atau tetap dalam tampilan aplikasi

Jika pengguna telah menarik jari lebih dari 50% lebar layar, aplikasi harus memicu animasi geser kembali lainnya. Jika lebih kecil dari ukuran tersebut, aplikasi harus kembali ke tampilan aplikasi lengkap.

Jika gesturnya cepat, abaikan aturan nilai minimum 50% dan geser ke belakang.