Jetpack Compose mendukung tarik lalu lepas dengan dua pengubah:
dragAndDropSource
: Menentukan composable sebagai titik awal gestur tarikdragAndDropTarget
: Menentukan composable yang menerima data yang dilepas
Misalnya, untuk memungkinkan pengguna menarik gambar di aplikasi Anda, buat composable gambar
dan tambahkan pengubah dragAndDropSource
. Untuk menyiapkan target lepas, buat
composable gambar lain dan tambahkan pengubah dragAndDropTarget
.
Pengubah dapat diterapkan ke beberapa sumber tarik dan beberapa target lepas.
Pengubah memungkinkan aplikasi berbagi data antara dua atau beberapa composable
menggunakan ClipData
, yang dapat dioperasikan bersama dengan implementasi View
.
Memulai peristiwa tarik
Untuk mengaktifkan peristiwa tarik di dalam komponen, tambahkan pengubah dragAndDropSource
,
yang menggunakan fungsi penangguhan sebagai parameter. Fungsi ini menentukan interaksi
pengguna yang memulai operasi tarik. Pengubah dragAndDropSource
menunggu hingga menerima peristiwa input pointer, lalu mengeksekusi lambda
yang diteruskan ke pengendali peristiwa. Gunakan lambda untuk mendeteksi berbagai peristiwa input,
misalnya, ketukan atau tekan lama. Untuk mengetahui informasi selengkapnya, lihat Input
pointer di Compose.
Peristiwa input pointer biasanya berupa tekan lama yang diimplementasikan sebagai berikut:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { // Transfer data here. }) }
Untuk memulai sesi tarik lalu lepas, panggil fungsi startTransfer()
.
Di dalam cakupan ini, gunakan DragAndDropTransferData
untuk mewakili
data yang dapat ditransfer. Data bisa berupa URI jarak jauh, data rich text di
papan klip, file lokal, atau lainnya, tetapi semuanya harus digabungkan dalam
objek ClipData
. Berikan teks biasa, misalnya, sebagai berikut:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ) ) ) }) }
Untuk memungkinkan tindakan tarik melintasi batas aplikasi, konstruktor
DragAndDropTransferData
menerima argumen flags
. Dalam
contoh berikut, konstanta DRAG_FLAG_GLOBAL
menentukan bahwa data dapat
ditarik dari satu aplikasi ke aplikasi lainnya:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ), flags = View.DRAG_FLAG_GLOBAL ) ) }) }
DragAndDropTransferData
menerima tanda yang didukung oleh sistem Tampilan Android. Lihat
daftar konstanta View untuk melihat daftar lengkap tanda yang tersedia.
Menerima data rilis
Tetapkan pengubah dragAndDropTarget
ke composable untuk memungkinkan composable
menerima peristiwa tarik lalu lepas. Pengubah memiliki dua parameter: yang pertama
berfungsi sebagai filter dan menentukan jenis data yang dapat diterima pengubah, dan
yang kedua mengirimkan data dalam callback.
Perhatikan bahwa instance callback harus diingat. Cuplikan berikut menunjukkan cara mengingat callback:
val callback = remember { object : DragAndDropTarget { override fun onDrop(event: DragAndDropEvent): Boolean { // Parse received data return true } } }
Cuplikan berikutnya menunjukkan cara menangani teks biasa yang dilepas:
Modifier.dragAndDropTarget( shouldStartDragAndDrop = { event -> event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN) }, target = callback )
Fungsi callback akan menampilkan true
jika peristiwa digunakan, atau false
jika peristiwa ditolak dan tidak disebarkan ke komponen induk.
Menangani peristiwa tarik lalu lepas
Ganti callback di antarmuka DragAndDropTarget
untuk mengamati saat
peristiwa tarik lalu lepas dimulai, berakhir, atau memasuki atau keluar dari komponen untuk kontrol
UI dan perilaku aplikasi yang akurat:
object : DragAndDropTarget { override fun onStarted(event: DragAndDropEvent) { // When the drag event starts } override fun onEntered(event: DragAndDropEvent) { // When the dragged object enters the target surface } override fun onEnded(event: DragAndDropEvent) { // When the drag event stops } override fun onExited(event: DragAndDropEvent) { // When the dragged object exits the target surface } override fun onDrop(event: DragAndDropEvent): Boolean = true }
Referensi tambahan
Codelab: Tarik lalu lepas di Compose