Ketuk dan tekan

Banyak composable memiliki dukungan bawaan untuk ketukan atau klik dan menyertakan lambda onClick. Misalnya, Anda dapat membuat Surface yang dapat diklik yang mencakup semua perilaku Desain Material yang sesuai untuk interaksi dengan platform:

Surface(onClick = { /* handle click */ }) {
    Text("Click me!", Modifier.padding(24.dp))
}
TapAndPress.kt

Namun, klik bukanlah satu-satunya cara pengguna dapat berinteraksi dengan composable. Halaman ini berfokus pada gestur yang melibatkan satu pointer, dengan posisi pointer tersebut tidak signifikan untuk penanganan peristiwa tersebut. Tabel berikut mencantumkan jenis gestur ini:

Gestur	Deskripsi
Ketuk (atau klik)	Penunjuk turun, lalu naik
Ketuk dua kali	Penunjuk turun, naik, turun, naik
Tekan lama	Kursor turun, dan ditahan lebih lama
Pers	Pointer turun

Merespons ketukan atau klik

clickable adalah pengubah yang umum digunakan yang membuat composable bereaksi terhadap ketukan atau klik. Pengubah ini juga menambahkan fitur tambahan, seperti dukungan untuk fokus, pengarahan kursor mouse dan stilus, serta indikasi visual yang dapat disesuaikan saat ditekan. Pengubah merespons "klik" dalam arti kata yang paling luas-- tidak hanya dengan mouse atau jari, tetapi juga peristiwa klik melalui input keyboard atau saat menggunakan layanan aksesibilitas.

Bayangkan petak gambar, yang menampilkan gambar dalam layar penuh saat pengguna mengkliknya:

Anda dapat menambahkan pengubah clickable ke setiap item dalam petak untuk menerapkan perilaku ini:

@Composable
private fun ImageGrid(photos: List<Photo>) {
    var activePhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
    LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
        items(photos, { it.id }) { photo ->
            ImageItem(
                photo,
                Modifier.clickable { activePhotoId = photo.id }
            )
        }
    }
    if (activePhotoId != null) {
        FullScreenImage(
            photo = photos.first { it.id == activePhotoId },
            onDismiss = { activePhotoId = null }
        )
    }
}
TapAndPress.kt

Pengubah clickable juga menambahkan perilaku tambahan:

• interactionSource dan indication, yang menggambar ripple secara default saat pengguna mengetuk composable. Pelajari cara menyesuaikannya di halaman Menangani interaksi pengguna.
• Memungkinkan layanan aksesibilitas berinteraksi dengan elemen dengan menetapkan informasi semantik.
• Mendukung interaksi keyboard atau joystick dengan memungkinkan fokus dan menekan Enter atau bagian tengah d-pad untuk berinteraksi.
• Buat elemen dapat di-hover, sehingga merespons mouse atau stilus yang diarahkan ke atasnya.

Tekan lama untuk menampilkan menu konteks kontekstual

combinedClickable memungkinkan Anda menambahkan perilaku ketuk dua kali atau tekan lama selain perilaku klik normal. Anda dapat menggunakan combinedClickable untuk menampilkan menu konteks saat pengguna menyentuh lama gambar petak:

var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
val haptics = LocalHapticFeedback.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
    items(photos, { it.id }) { photo ->
        ImageItem(
            photo,
            Modifier
                .combinedClickable(
                    onClick = { activePhotoId = photo.id },
                    onLongClick = {
                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
                        contextMenuPhotoId = photo.id
                    },
                    onLongClickLabel = stringResource(R.string.open_context_menu)
                )
        )
    }
}
if (contextMenuPhotoId != null) {
    PhotoActionsSheet(
        photo = photos.first { it.id == contextMenuPhotoId },
        onDismissSheet = { contextMenuPhotoId = null }
    )
}
TapAndPress.kt

Sebagai praktik terbaik, Anda harus menyertakan respons haptik saat pengguna menekan lama elemen, itulah sebabnya cuplikan menyertakan pemanggilan performHapticFeedback.

Menutup composable dengan mengetuk scrim

Dalam contoh di atas, clickable dan combinedClickable menambahkan fungsi yang berguna ke composable Anda. Tombol ini menampilkan indikasi visual saat interaksi, merespons pengarahan kursor, serta menyertakan dukungan fokus, keyboard, dan aksesibilitas. Namun, perilaku tambahan ini tidak selalu diinginkan.

Mari kita lihat layar detail gambar. Latar belakang harus semi-transparan dan pengguna harus dapat mengetuk latar belakang tersebut untuk menutup layar detail:

Dalam hal ini, latar belakang tersebut tidak boleh memiliki indikasi visual apa pun pada interaksi, tidak boleh merespons pengarahan kursor, tidak boleh dapat difokuskan, dan responsnya terhadap peristiwa keyboard dan aksesibilitas berbeda dengan composable biasa. Daripada mencoba menyesuaikan perilaku clickable, Anda dapat turun ke tingkat abstraksi yang lebih rendah dan langsung menggunakan pengubah pointerInput yang dikombinasikan dengan metode detectTapGestures:

@Composable
private fun Scrim(onClose: () -> Unit, modifier: Modifier = Modifier) {
    val strClose = stringResource(R.string.close)
    Box(
        modifier
            // handle pointer input
            .pointerInput(onClose) { detectTapGestures { onClose() } }
            // handle accessibility services
            .semantics(mergeDescendants = true) {
                contentDescription = strClose
                onClick {
                    onClose()
                    true
                }
            }
            // handle physical keyboard input
            .onKeyEvent {
                if (it.key == Key.Escape) {
                    onClose()
                    true
                } else {
                    false
                }
            }
            // draw scrim
            .background(Color.DarkGray.copy(alpha = 0.75f))
    )
}
TapAndPress.kt

Sebagai kunci pengubah pointerInput, Anda meneruskan lambda onClose. Tindakan ini akan otomatis mengeksekusi ulang lambda, sehingga memastikan callback yang tepat dipanggil saat pengguna mengetuk scrim.

Ketuk dua kali untuk memperbesar

Terkadang clickable dan combinedClickable tidak menyertakan informasi yang cukup untuk merespons interaksi dengan cara yang benar. Misalnya, composable mungkin memerlukan akses ke posisi dalam batas composable tempat interaksi terjadi.

Mari kita lihat layar detail gambar lagi. Praktik terbaiknya adalah memungkinkan gambar diperbesar dengan mengetuk dua kali:

Seperti yang dapat Anda lihat dalam video, zoom in terjadi di sekitar posisi peristiwa ketukan. Hasilnya berbeda saat kita memperbesar bagian kiri gambar dibandingkan dengan bagian kanan. Kita dapat menggunakan pengubah pointerInput yang dikombinasikan dengan detectTapGestures untuk menggabungkan posisi ketukan ke dalam penghitungan:

var zoomed by remember { mutableStateOf(false) }
var zoomOffset by remember { mutableStateOf(Offset.Zero) }
Image(
    painter = rememberAsyncImagePainter(model = photo.highResUrl),
    contentDescription = null,
    modifier = modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onDoubleTap = { tapOffset ->
                    zoomOffset = if (zoomed) Offset.Zero else
                        calculateOffset(tapOffset, size)
                    zoomed = !zoomed
                }
            )
        }
        .graphicsLayer {
            scaleX = if (zoomed) 2f else 1f
            scaleY = if (zoomed) 2f else 1f
            translationX = zoomOffset.x
            translationY = zoomOffset.y
        }
)
TapAndPress.kt