Drag & drop

Déplacement des éléments sur l'écran

Ce site ne sera plus alimenté de contenu après août 2014. Tous les nouveaux articles seront redigés pour www.waitingforcode.com

La technologie tactile des smartphones et des tablettes change l'utilisation par rapport au souris d'ordinateur. Certaines actions que l'utilisateur peut effectuer sont les mêmes à l'aide de ces deux supports. L'une d'elles est glisser-déposer, connue plutôt sous le nom Drag&Drop. Le principe est de toucher un élément et le déplacer ailleurs sur l'interface. Android permet le faire aussi. On verra cela sur l'exemple de l'écran où l'on peut personnaliser l'affichage du livre (placer le titre dans le pied de page, les liens dans l'en-tête etc.).

Drag & Drop sous Android

Pour être plus précis, drag & drop sous Android permet à l'utilisateur de déplacer un élément d'un View à l'autre. Le processus de déplacement est basé sur 3 axes :
- gestion d'événements pour l'action de glisser
- écouteurs pour l'action de glisser
- les helpers et des classes supplémentaires

Le processus du drag & drop est composé de 4 étapes :

  1. Début : quand l'utilisateur touche l'écran et commence à glisser son élément, l'application appelle la méthode startDrag(). Ensuite tous les éléments de vue qui possèdent un listener chargé de surveiller cette action, reçoivent l'événement avec ACTION_DRAG_STARTED comme type d'action.
  2. Suite : les écouteurs peuvent changer l'apparence à cette étape. Par exemple quand l'utilisateur déplacer l'élément à un View, ce dernier peut devenir transparent pour signaler un dépôt possible.
  3. Dépôt : l'utilisateur relache l'élément glissé sur un View. Si ce dernier peut accepter l'élément, le système lui envoie un événement du type ACTION_DROP. L'événement contient toutes les informations initialisées lors de la première phase du processus. Cette action a lieu uniquement si le View recevant l'élément possède un écouteur qui réceptionne les événements "drag" enregistré.
  4. Fin : système envoie l'action du type ACTION_DRAG_ENDED pour signaler la fin de l'opération drag & drop. Cet envoi est destiné à tous les éléments qui ont déclaré les écouteurs pour recevoir les événements du processus. Il a lieu même si dans l'étape 3 on n'envoie pas l'action ACTION_DROP.

Voici une liste des types d'actions du DragEvent qui sont utilisés dans l'opération du drag & drop :
- ACTION_DRAG_STARTED : l'action appelée quand on commence l'opération
- ACTION_DRAG_ENTERED : l'action appelée quand on place l'élément draggable (celui qu'on déplace) dans la zone droppable (celle qui peut accepter les éléments déplaçables)
- ACTION_DRAG_LOCATION : l'action envoyée aux écouteurs quand l'utilisateur laisse l'élément draggable dans la zone droppable pendant un certain temps; cette action est appelée après ACTION_DRAG_ENTERED
- ACTION_DRAG_EXITED : l'action qu'on appelle quand on quitte la zone du drop
- ACTION_DROP : l'action invoquée quand on lache l'élément draggable dans la zone droppable
- ACTION_DRAG_ENDED : l'action appelée à chaque fois quand l'opération est terminée

Implémenter drag & drop sous Android

Comme on a pu le voir dans le paragraphe précédent, l'implémentation du drag & drop se base sur le jeu entre les événements et les écouteurs. Dans notre cas pratique, regardons d'abord le layout utilisé :

afficher le code

L'organisation de l'écran ne contient pas d'éléments mysterieux. Tout simplement, on liste 4 lignes avec le contenu à la suite et à la fin on place le bouton qui permet de sauvegarder les modifications. Un seul élément qui peut paraître nouveau est <com.example.library.view.PlacementTextView />. Son nom correspond à une classe de notre application qui hérite du TextView pour pouvoir gérer plus facilement l'opération drag & drop. Elle contient des champs supplémentaires : le placement, la méthode, l'identifiant du texte dans les ressources et l'identifiant du layout. Voici la classe en question :

afficher le code

Passons maintenant au code de notre activité. La méthode onCreate() s'occupe de préparer l'écran. D'abord elle charge les éléments draggables. Ensuite elle leur attribue les informations en fonction de la langue. Alors, les éléments reçoivent aussi 2 écouteurs : un pour l'action de touche (touch) et l'autre pour l'action de glisser (drag).

L'écouteur de touche (OnTouchListener), permet à l'application de détecter quand l'utilisateur touche un View particulier. Cette touche est alors considérée comme le point de départ de l'opération drag. L'appel view.startDrag(data, shadowBuilder, view, 0) déclenche la réception des événements par l'écouteur de glisser.

En ce qui concerne ce second écouteur, OnDragListener, il est invoqué à chaque fois où une réponse à l'événement du drag est nécessaire. Certaines actions ne font rien (ACTION_DRAG_STARTED). Les autres ne font que changer la couleur de l'image de fond (ACTION_DRAG_ENTERED, ACTION_DRAG_EXITED, ACTION_DRAG_ENDED). C'est seulement un type d'action (ACTION_DROP) qui introduit des changements dans notre layout. Dans cette action, les deux éléments (actuellement déplacé et celui qui était déjà placé dans la zone droppable) échangents leurs propriétés.

La méthode submitCustomize() s'occupe de valider les changements et de les sauvegarder dans la base de données pour l'utilisation future.

Bartosz KONIECZNY Evénements UI

Une question ? Une remarque ?

*

*

Un conseil MySQL

Comment sommer les champs du type TIME ?

La requête suivante devrait être utile :
SELECT SEC_TO_TIME(SUM(TIME_TO_SEC(maColonne))) AS somme FROM nomTableau;