Glisser-déposer

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.

Par exemple, pour permettre aux utilisateurs de faire glisser une image dans votre application, créez un composable d'image. et ajoutez le modificateur dragAndDropSource. Pour configurer une cible de dépôt, créez-en une autre composable "image" et ajoutez le modificateur dragAndDropTarget.

Les modificateurs peuvent être appliqués à plusieurs sources et cibles de dépôt.

Les modificateurs permettent aux applications de partager des données entre deux composables ou plus à l'aide de ClipData, qui est interopérable avec les implémentations 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'utilisateur qui lance l'opération de déplacement. 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 tapotements ou des appuis prolongés. Pour en savoir plus, consultez la section Pointeur saisie dans Compose.

L'événement d'entrée du pointeur est généralement un appui prolongé comme suit:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        // Transfer data here.
    })
}
DragAndDropSnippets.kt

Pour démarrer une session de glisser-déposer, appelez la fonction startTransfer(). Dans ce champ d'application, utilisez DragAndDropTransferData pour représenter données transférables. Il peut s'agir d'un URI distant, de données en texte enrichi sur le du presse-papiers, un fichier local, etc.), mais tous doivent être encapsulés ClipData. Fournissez du texte brut, par exemple:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                )
            )
        )
    })
}
DragAndDropSnippets.kt

Pour permettre à l'action de faire glisser de traverser les frontières de l'application, le Le constructeur DragAndDropTransferData accepte un argument flags. Dans l'exemple suivant, la constante DRAG_FLAG_GLOBAL spécifie que les données peuvent d'une application à une autre:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                ),
                flags = View.DRAG_FLAG_GLOBAL
            )
        )
    })
}
DragAndDropSnippets.kt

DragAndDropTransferData accepte les indicateurs compatibles avec le système Android View. Voir la liste des constantes View pour obtenir une liste exhaustive des indicateurs disponibles ;

Recevoir les données de dépôt

Attribuer le modificateur dragAndDropTarget à un composable pour l'activer pour recevoir des événements de type "glisser-déposer". Le modificateur comporte deux paramètres: le premier sert de filtre et spécifie le type de données que le modificateur peut accepter. puis envoie les données dans un rappel.

Notez que l'instance de rappel doit être mémorisée. L'extrait suivant montre comment mémoriser le rappel:

val callback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            // Parse received data
            return true
        }
    }
}
DragAndDropSnippets.kt

L'extrait de code suivant montre comment gérer le texte brut abandonné:

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
    }, target = callback
)
DragAndDropSnippets.kt

La fonction de rappel doit renvoyer true si l'événement est consommé, ou false. Si l'événement est refusé et n'est pas propagé au composant parent.

Gérer les événements de glisser-déposer

Remplacez les rappels dans l'interface DragAndDropTarget pour observer lorsqu'une d'un événement de type glisser-déposer démarre, se termine, apparaît ou quitte un composant pour contrôle de l'interface utilisateur et du 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
}
DragAndDropSnippets.kt

Ressources supplémentaires

Atelier de programmation: Glisser-déposer dans Compose