Jetpack Compose permet le glisser-déposer avec deux modificateurs:
dragAndDropSource
: spécifie un composable comme point de départ du geste de déplacement.dragAndDropTarget
: spécifie un composable qui accepte les données supprimées.
Les modificateurs permettent aux applications de partager des données entre plusieurs composables à l'aide de ClipData
, qui est interopérable avec les implémentations de View
.
Démarrer un événement de déplacement
Pour activer les événements de déplacement dans un composant, ajoutez le modificateur dragAndDropSource
, qui utilise une fonction de suspension comme paramètre. La fonction définit l'interaction utilisateur qui lance l'opération de déplacement. Le modificateur dragAndDropSource
attend de recevoir un événement d'entrée de pointeur, puis exécute le lambda transmis au gestionnaire d'événements. Utilisez le lambda pour détecter divers événements d'entrée, par exemple des appuis ou des appuis de manière prolongée. Pour en savoir plus, consultez Entrée de pointeur dans Compose.
L'événement d'entrée du pointeur est généralement un appui prolongé, implémenté comme suit:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { // Transfer data here. }) }
Pour démarrer une session de glisser-déposer, appelez la fonction startTransfer()
.
Dans ce champ d'application, utilisez DragAndDropTransferData
pour représenter les données transférables. Il peut s'agir d'un URI distant, de données en texte enrichi figurant dans le presse-papiers, d'un fichier local ou autres, mais elles doivent toutes être encapsulées dans un objet ClipData
. Fournissez du texte brut, par exemple, comme suit:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ) ) ) }) }
Pour permettre à l'action de déplacement de traverser les frontières de l'application, le constructeur DragAndDropTransferData
accepte un argument flags
. Dans l'exemple suivant, la constante DRAG_FLAG_GLOBAL
spécifie que les données peuvent être déplacées d'une application à une autre:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ), flags = View.DRAG_FLAG_GLOBAL ) ) }) }
DragAndDropTransferData
accepte les indicateurs compatibles avec le système Android View. Consultez la liste des constantes View pour obtenir la liste complète des indicateurs disponibles.
Recevoir les données supprimées
Attribuez le modificateur dragAndDropTarget
à un composable pour lui permettre de recevoir des événements de glisser-déposer. Le modificateur comporte deux paramètres: le premier sert de filtre et spécifie le type de données qu'il peut accepter, et le second envoie les données dans un rappel.
Notez que l'instance de rappel doit être mémorisée. L'extrait de code suivant montre comment mémoriser le rappel:
val callback = remember { object : DragAndDropTarget { override fun onDrop(event: DragAndDropEvent): Boolean { // Parse received data return true } } }
L'extrait de code suivant montre comment gérer le texte brut supprimé:
Modifier.dragAndDropTarget( shouldStartDragAndDrop = { event -> event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN) }, target = callback )
La fonction de rappel doit renvoyer true
si l'événement est consommé, ou false
si l'événement est refusé et ne se propage pas au composant parent.
Gérer les événements de glisser-déposer
Remplacez les rappels dans l'interface DragAndDropTarget
pour observer quand un événement de glisser-déposer démarre, se termine, ou pénètre dans un composant ou en sort, afin de contrôler précisément l'UI et le comportement de l'application:
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 }
Ressources supplémentaires
Atelier de programmation: Glisser-déposer dans Compose