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 ini dari Compose Material untuk codebase Wear OS misalnya 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.