Récemment, j'ai eu l'idée de développer un jeu Android. Pour commencer, j'ai décidé d'écrire les échecs. je pensais que la technologie Glisser déposer parfait pour mettre en œuvre le mécanisme de déplacement des formes. Pour les non initiés, je précise que méthode glisser déposer la goutte est dans la possibilité de faire glisser certains objets graphiques sur d'autres et d'effectuer l'une ou l'autre action après avoir relâché. L'exemple le plus simple- supprimez le raccourci du bureau de votre PC en le faisant glisser vers la corbeille. En "jetant" l'étiquette à la poubelle, on indique au système qu'on veut faire interagir ces deux objets. Le système reçoit notre signal et décide de l'action à entreprendre. Le glisser-déposer s'est généralisé en raison de sa clarté intuitive. Cette approche est soutenue par notre expérience d'interaction avec des objets du monde réel et fonctionne très bien dans un environnement virtuel. Comme pour les échecs, en utilisant le glisser-déposer, il est technologiquement plus facile de déterminer la cellule où l'utilisateur a fait glisser la pièce, car il n'est pas nécessaire de calculer le numéro de cellule à partir des coordonnées du point de chute. Ce travail sera pris en charge par la machine virtuelle.

Objectifs de l'utilisation de la technologie Drag n Drop

L'utilisation de la technologie glisser-déposer me permet de résoudre trois problèmes avec peu de sang :

1. Visualisation du mouvement. Lorsque l'utilisateur touche une forme et commence à la déplacer sur l'écran, la forme est remplacée par un dessin plus petit. Ainsi, l'utilisateur comprend que le chiffre est capturé.
2. J'ai limité la zone de mouvement de la figure aux dimensions du plateau.
3. Si l'utilisateur relâche la forme au mauvais endroit, elle doit revenir à sa position d'origine.

Les tâches sont définies, commençons leur mise en œuvre.

Remplacer ImageView au toucher

Toutes mes formes sont des objets ImageView. Malheureusement, il s'est avéré que l'implémentation du Drag & Drop dans Android ne permet pas "dès la sortie de la boîte" de remplacer l'image d'un objet lorsqu'il est touché. Néanmoins, cette tâche est tout à fait résoluble au moyen de l'API. Nous devons effectuer un certain nombre d'étapes simples :

1. Créez un objet DragShadowBuilder.
2. Appelez la méthode startDrag.
3. Masquez notre ImageView qui affiche la forme en appelant la méthode setVisibility avec le paramètre View.INVISIBLE. En conséquence, seul l'objet DragShadowBuilder restera à l'écran, ce qui signalera à l'utilisateur que la forme a été capturée.

Ces actions doivent être implémentées dans le gestionnaire OnTouchListner de l'objet ImageView. Pour ce faire, nous allons remplacer la méthode onTouch :

@Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; return true ; ) else ( return false ; ) )

Tout est très simple. Donc, avec la substitution de l'image comprise, passons à la tâche suivante.

Limitation de la zone de glissement pour la fonction glisser-déposer

La restriction de la zone de traînée est liée à un problème. Le fait est que si vous relâchez la forme en dehors du tableau, l'événement de dépôt ne se produira pas, car l'utilisateur a déposé l'objet dans un endroit vide et l'objet n'a rien avec quoi interagir. En conséquence, la figure ne reviendra pas à son état d'origine l'état original et il restera à jamais caché. J'ai passé beaucoup de temps à lire la documentation, mais je n'ai pas trouvé de moyen de limiter la zone de glissement des objets. La révélation est venue d'un coup. Je n'ai pas du tout besoin de limiter la zone, j'ai besoin de savoir si l'utilisateur a correctement publié la figure ou non.

Déterminer la bonne version
J'ai trouvé des réponses à mes questions dans la section "gestion des événements de fin de glisser" sur le site des développeurs Android. Voici quelques points clés :

1. Lorsque l'utilisateur a terminé de faire glisser, l'événement ACTION_DRAG_ENDED est déclenché dans le gestionnaire DragListeners.
2. Dans DragListener, vous pouvez obtenir plus des informations détaillées sur l'opération de glissement en appelant la méthode DragEvent.getResult().
3. Si DragListener renvoie true en réponse à un événement ACTION_DROP, l'appel getResult renverra également true, sinon il renverra false.

J'ai donc besoin d'attraper l'événement ACTION_DRAG_ENDED et d'appeler la méthode getResult. S'il renvoie false, l'utilisateur a fait glisser la forme hors du tableau et je dois rendre l'ImageView visible.

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent . ) ; )

Maintenant, l'utilisateur peut libérer la figure n'importe où, et rien de terrible ne se produira.

Détermination des coups autorisés

La dernière partie de l'article est consacrée à la vérification de la validité du coup que l'utilisateur tente d'effectuer. Avant d'aborder ce sujet en détail, je ferai une petite remarque expliquant la structure de mon application. Le damier est représenté sous la forme d'un TableLayout, et chaque cellule est un descendant d'un LinearLayout et possède un OnDragListener.

De plus, chaque OnDragListener fait référence à un objet "médiateur", qui s'occupe de l'interaction des objets du jeu et se souvient de la position de la cellule actuelle.

Lorsque l'utilisateur fait glisser une forme sur une cellule, les actions suivantes sont possibles :

1. Utilisation de l'événement ACTION_DRAG_ENTERED pour définir la variable 'containsDraggable' sur true.
2. Utilisation de l'événement ACTION_DRAG_EXITED pour définir la variable 'containsDraggable' sur false.
3. Utilisation de l'événement ACTION_DROP pour interroger le middleware si une forme est autorisée à être placée dans cette cellule.

Ci-dessous le code qui implémente la logique décrite

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& amp; containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Comme vous pouvez le voir, que le déplacement soit valide ou non, ImageView est défini sur l'état visible. Je voulais que l'utilisateur voie la forme bouger. Plus tôt, j'ai mentionné que la cellule est un enfant de LayoutView. Ceci est fait pour faciliter le déplacement de ImageView d'une cellule à l'autre. Vous trouverez ci-dessous le code de la méthode checkForValidMove, qui montre comment ImageView est déplacé.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

J'espère que cet article vous aidera à développer vos propres projets.

En parlant de l'interface utilisateur graphique, on ne peut que parler de la technologie Glisser déposer(au sens propre: Tirez et lancez).

Cette technologie est basée sur des éléments de glisser-déposer interface graphique de la source au récepteur. L'interface est accessible uniquement avec une souris (touchpad, trackball) ou un écran tactile.

Un élément déplaçable est saisi et maintenu avec la souris tout en étant déplacé vers un autre emplacement en même temps. Lorsque la souris est dans la bonne position, le bouton de la souris est relâché, libérant l'objet.

Cependant, l'interface Drag'n Drop doit être distinguée des contrôles d'interface qui ont des méthodes dans leurs méthodes qui sont responsables du déplacement, implémentées de la même manière. Par exemple, une fenêtre (formulaire) a la possibilité de se déplacer sur l'écran (en faisant glisser la zone de titre). ScrollBox a un curseur de défilement. Mais dans les deux exemples, le glissement est une action (événement) interne (pour le composant) et n'affecte en aucune façon les autres objets du système.

L'interface glisser-déposer n'est applicable que pour déplacer un objet d'un conteneur à l'autre, même si les conteneurs sont hétérogènes. Par exemple, faire glisser un fichier d'un dossier vers un e-mail.

Interface glisser-déposer dans les technologies Web

Utilisation des interfaces Glisser déposer dans les technologies Web a été une percée dans . Il existe des éditeurs de glisser-déposer hors ligne (par exemple, DreamWeaver) et en ligne (par exemple, tout constructeur de site Web moderne.

Pour la bibliothèque VCL, Borland a implémenté sa propre version de l'interface Drag&Drop (traduit par "glisser"). Cette interface est interne - vous pouvez envoyer et recevoir tous les contrôles Delphi à l'intérieur du formulaire "(à l'exception du formulaire lui-même). Elle est implémentée sans utiliser les fonctions API Windows correspondantes - elles doivent être utilisées lors de l'organisation de la communication avec d'autres tâches par glisser-déposer .

En cliquant bouton gauche passez la souris sur le contrôle, nous pouvons le "faire glisser" vers n'importe quel autre élément. Du point de vue du programmeur, cela signifie qu'au moment de faire glisser et de relâcher la touche, certains événements sont générés qui transmettent toutes les informations nécessaires - un pointeur vers l'objet glissé, les coordonnées actuelles du curseur, etc. Le récepteur d'événement est l'élément sur lequel le ce moment le curseur se trouve. Le gestionnaire d'un tel événement doit indiquer au système si le contrôle donné accepte ou non "l'envoi". Lorsque le bouton est relâché sur la commande du récepteur, un ou deux événements supplémentaires sont déclenchés, selon l'état de préparation du récepteur.

AnnulerFaire glisser Annule l'opération de glisser-déposer ou de glisser-ancrer en cours.

Fonction FindDragTarget (const Pos : TPoint ;AllowDisabled : Boolean ): TControl ;

La fonction renvoie un objet de la classe de base TControl , qui fait référence à la position de l'écran avec les coordonnées spécifiées par le paramètre Pos. Cette fonction permet de déterminer le destinataire potentiel d'une opération de glisser-déposer ou de glisser-ancrer. Si aucun contrôle de fenêtre n'existe pour la position spécifiée, la fonction renvoie néant . Le paramètre AllowDisabled détermine si les objets désactivés seront pris en compte.

Function IsDragObject(Sender: TObject ): Boolean ;

La fonction détermine si l'objet spécifié dans le paramètre Sender est un descendant de la classe TDragObject . Cette fonction peut être utilisé comme paramètre Source dans les gestionnaires d'événements OnDragOver et OnDockOver pour déterminer si l'objet déplacé sera accepté. Fonctionne également IsDragObjectpeut être utilisé comme paramètre Source dans les gestionnaires d'événements OnDragDrop et OnDockDrop afin d'interpréter correctement l'objet glissé.

DragMode, propriétés DragCursor, méthodes BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, paramètre Accept

Le processus consistant à faire glisser des informations d'un objet à un autre avec la souris est largement utilisé dans les veuves. Vous pouvez déplacer des fichiers entre des dossiers, déplacer des dossiers eux-mêmes, etc.

Toutes les propriétés, méthodes et événements associés au processus de glisser-déposer sont définis dans la classe TControl, qui est le parent de tous les composants visuels Delphi. Ils sont donc communs à tous les composants.

Le début du glissement est déterminé par la propriété DragMode, qui peut être définie au moment du design ou par programmation égale à dmManual ou dmAutomatic. La valeur de dmAutomatic (automatique) détermine le démarrage automatique du processus de glissement lorsque l'utilisateur clique avec le bouton de la souris sur le composant. Cependant, dans ce cas, l'événement OnMouseDown associé à l'utilisateur qui appuie sur le bouton de la souris ne se produit pas du tout pour ce composant.

L'interface de transfert et de réception des composants est apparue il y a longtemps. Il fournit une interaction entre deux contrôles lors de l'exécution de l'application. Dans ce cas, toutes les opérations nécessaires peuvent être effectuées. Malgré la simplicité de mise en œuvre et l'âge du développement, de nombreux programmeurs (surtout débutants) considèrent ce mécanisme obscur et exotique. Cependant, l'utilisation du glisser-déposer peut être très utile et facile à mettre en œuvre. Nous allons maintenant vérifier cela.

Pour que le mécanisme fonctionne, deux contrôles doivent être configurés en conséquence. L'un doit être la source (Source), le second - le récepteur (Target). Dans ce cas, la source ne se déplace nulle part, mais est seulement enregistrée comme telle dans le mécanisme.

Croyez-moi, c'est assez facile à transformer Coordonnées X,Y, passées dans les paramètres des événements OnDragOver et OnDragDrop, en coordonnées de formulaire.

Travaillez avec les propriétés Left et Top du composant survolé par le curseur. Je vais donner un exemple simple. Placez un composant Memo sur le formulaire et définissez sa propriété Align sur alTop. Placez un panneau sur le formulaire, définissez également la propriété Align sur alTop et définissez la propriété Height sur une petite valeur, disons 6 ou 7 pixels. Définissez DragMode sur dmAutomatica et DragCursor sur crVSplit. Placez un autre composant Memo et définissez Aligner sur alClient. Sélectionnez les deux mémos en même temps, le panneau, et créez un gestionnaire d'événements OnDragOver commun comme indiqué ci-dessous :

Glisser-déposer HTML Les interfaces permettent aux applications d'utiliser les fonctionnalités de glisser-déposer dans les navigateurs. L'utilisateur peut sélectionner déplaçableéléments avec une souris, faites glisser ces éléments vers un largableélément, et déposez-les en relâchant le bouton de la souris. Une représentation translucide de la déplaçableéléments suit le pointeur pendant l'opération de glissement.

Pour les sites Web, les extensions et les applications XUL, vous pouvez personnaliser les éléments qui peuvent devenir déplaçable, le type de rétroaction déplaçable les éléments produisent, et les largableéléments.

Cette présentation du glisser-déposer HTML comprend une description des interfaces, les étapes de base pour ajouter la prise en charge du glisser-déposer à une application et un résumé de l'interopérabilité des interfaces.

Faire glisser des événements

un événement	Sur le gestionnaire d'événements	Se déclenche quand…
glisser	ondrag	…un élément déplacé(sélection d'éléments ou de texte) est glissé.
traîner	ondragend	…une opération de glissement se termine (telle que relâcher un bouton de la souris ou appuyer sur la touche Échap ; voir Terminer un Drag.)
dragenter	ondragenter	…un élément déplacé entre dans une cible de dépôt valide. (Voir Spécification des cibles de dépôt.)
dragexit	ondrageexit	…un élément n'est plus la cible de sélection immédiate de l'opération de glissement.
glisser-déposer	ondragleave	…un élément déplacé laisse une cible de dépôt valide.
trainer	ondragover	… un élément déplacé est déplacé sur une cible de dépôt valide, toutes les quelques centaines de millisecondes.
glisser-démarrer	ondragstart	…l'utilisateur commence à faire glisser un élément. (Voir Démarrage d'une opération de glissement.)
goutte	goutte	… un élément est déposé sur une cible de dépôt valide. (Voir Effectuer un drop.)

Noter: Ni les événements dragstart ni dragend ne sont déclenchés lorsque vous faites glisser un fichier dans le navigateur à partir du système d'exploitation.

Interfaces

Les bases

Cette section est un résumé des étapes de base pour ajouter la fonctionnalité de glisser-déposer à une application.

identifier ce qui est déplaçable

Fabriquer un élément déplaçable nécessite d'ajouter le déplaçable attribut et le ondragstart gestionnaire d'événements global, comme illustré dans l'exemple de code suivant :

Cet élément est déplaçable.

Pour plus d'informations, consultez :

gérer la chute effet

Le gestionnaire pour le goutte event est libre de traiter les données de glissement d'une manière spécifique à l'application.

Généralement, une application utilise le getData() méthode pour récupérer les éléments de glissement, puis les traiter en conséquence. De plus, la sémantique de l'application peut différer selon la valeur du