Android – Drag and Drop (glisser et déposer)

La plateforme de glisser-déposer d’Android permet à vos utilisateurs de déplacer des données d’une Vue à une autre dans la mise en page actuelle en utilisant un geste graphique de glisser-déposer. À partir de l’API 11, la glisser-déposer de la vue sur d’autres vues ou les groupes de vues est pris en charge. La plateforme comprend trois composants importants pour supporter la fonctionnalité de glisser-déposer :

• La classe Drag Event.
• L’écouteur de Drag (Listener).
• Méthodes d’aide et classes .

Le processus de glisser-déposer

Il existe essentiellement quatre étapes ou des états dans le processus de glisser-déplacer :

Démarré (Start)- Cet événement se produit lorsque vous commencez à faire glisser un élément dans une mise en page, votre application appelle la méthode startDrag () pour indiquer au système de démarrer une traînée. Les arguments à l’intérieur de la méthode startDrag () fournissent les données à traîner, les métadonnées pour ces données et un rappel pour dessiner l’ombre de traînée.

Le système répond d’abord en rappelant votre application pour obtenir une ombre de glissée. Il affiche ensuite l’ombre de traînée sur l’appareil.

Ensuite, le système envoie un événement de glissement avec le type d’action ACTION_DRAG_STARTED aux auditeurs d’événements de glisser enregistrés pour tous les objets View dans la mise en page actuelle.

Pour continuer à recevoir des événements de glisser, y compris un événement de suppression éventuel, un auditeur d’événement de glissement doit retourner true. Si l’auditeur d’événement de glissement renvoie faux, il ne recevra pas d’événements de glissement pour l’opération en cours jusqu’à ce que le système envoie un événement de glissement avec un type d’action ACTION_DRAG_ENDED.

Continuer – L’utilisateur continue la traînée. Le système envoie l’action ACTION_DRAG_ENTERED suivie de l’action ACTION_DRAG_LOCATION à l’enregistreur d’événement de glissement enregistré pour la vue où le point de trajectoire entre. L’auditeur peut choisir de modifier l’apparence de l’objet View en réponse à l’événement ou peut réagir en mettant en surbrillance sa vue.

L’auditeur d’événement de glissement reçoit une action ACTION_DRAG_EXITED après que l’utilisateur a déplacé l’ombre de traînée en dehors de la zone de délimitation de la vue.

Dépouillé (dropped)- L’utilisateur libère l’élément entraîné dans la zone de délimitation d’une vue. Le système envoie à l’auditeur de l’objet View un événement de glissement avec le type d’action ACTION_DROP.

Fini (Ended)- Juste après l’action, tapez ACTION_DROP, le système envoie un événement de glissement avec le type d’action ACTION_DRAG_ENDED pour indiquer que l’opération de traînée est terminée.

La classe DragEvent

Le DragEvent représente un événement envoyé par le système à différents moments lors d’une opération de glisser-déposer. Cette classe fournit peu de Constantes et des méthodes importantes que nous utilisons lors du processus Drag / Drop.

Les constantes

Voici toutes les constantes entières disponibles en tant que partie de la classe DragEvent.

Méthodes

Voici quelques méthodes importantes et les plus fréquemment utilisées disponibles dans la classe DragEvent.

Écoute de l’événement Drag

Si vous souhaitez que l’une de vos vues dans une mise en page devrait répondre à l’événement Drag, votre vue implémente View.OnDragListener ou la méthode de rappel d’installation onDragEvent (DragEvent). Lorsque le système appelle la méthode ou l’auditeur, il leur transmet un objet DragEvent expliqué ci-dessus. Vous pouvez avoir à la fois un auditeur et une méthode de rappel pour l’objet View. Si cela se produit, le système appelle d’abord l’auditeur et le rappel défini tant que l’auditeur retourne vrai.

La combinaison de la méthode OnDragEvent (DragEvent) et View.OnDragListener est analogue à la combinaison des onTouchEvent () et View.OnTouchListener utilisés avec des événements tactiles dans les anciennes versions d’Android.

Démarrage d’un événement de glisser

Vous commencez par créer un ClipData et ClipData.Item pour les données en cours de déplacement. Dans le cadre de l’objet ClipData, fournissez des métadonnées qui sont stockées dans un objet ClipDescription dans ClipData. Pour une opération de glisser-déplacer qui ne représente pas le mouvement des données, vous pouvez utiliser null au lieu d’un objet réel.

Ensuite, vous pouvez étendre étendre View.DragShadowBuilder pour créer une ombre de traînée pour faire glisser la vue ou simplement vous pouvez utiliser View.DragShadowBuilder (View) pour créer une ombre de trame par défaut qui a la même taille que l’argument View qui lui a été transmis, avec le toucher Point centré dans l’ombre de traînée.

Exemple

L’exemple suivant montre la fonctionnalité d’un simple glisser-déposer en utilisant View.setOnLongClickListener (), View.setOnTouchListener () et View.OnDragEventListener ().

Voici le contenu du fichier d’activité principal modifié src / MainActivity.java. Ce fichier peut inclure chacune des méthodes fondamentales du cycle de vie.

package com.example.saira_000.myapplication;

import android.app.Activity;

import android.content.ClipData;
import android.content.ClipDescription;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Log;

import android.view.DragEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;

import android.widget.ImageView;
import android.widget.RelativeLayout;


public class MainActivity extends Activity {
   ImageView img;
   String msg;
   private android.widget.RelativeLayout.LayoutParams layoutParams;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      img=(ImageView)findViewById(R.id.imageView);
      
      img.setOnLongClickListener(new View.OnLongClickListener() {
         @Override
         public boolean onLongClick(View v) {
            ClipData.Item item = new ClipData.Item((CharSequence)v.getTag());
            String[] mimeTypes = {ClipDescription.MIMETYPE_TEXT_PLAIN};
            
            ClipData dragData = new ClipData(v.getTag().toString(),mimeTypes, item);
            View.DragShadowBuilder myShadow = new View.DragShadowBuilder(img);
            
            v.startDrag(dragData,myShadow,null,0);
            return true;
         }
      });
      
      img.setOnDragListener(new View.OnDragListener() {
         @Override
         public boolean onDrag(View v, DragEvent event) {
            switch(event.getAction()) {
               case DragEvent.ACTION_DRAG_STARTED:
               layoutParams = (RelativeLayout.LayoutParams)v.getLayoutParams();
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_STARTED");
               
               // Do nothing
               break;
               
               case DragEvent.ACTION_DRAG_ENTERED:
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENTERED");
               int x_cord = (int) event.getX();
               int y_cord = (int) event.getY();
               break;
               
               case DragEvent.ACTION_DRAG_EXITED :
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_EXITED");
               x_cord = (int) event.getX();
               y_cord = (int) event.getY();
               layoutParams.leftMargin = x_cord;
               layoutParams.topMargin = y_cord;
               v.setLayoutParams(layoutParams);
               break;
               
               case DragEvent.ACTION_DRAG_LOCATION  :
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_LOCATION");
               x_cord = (int) event.getX();
               y_cord = (int) event.getY();
               break;
               
               case DragEvent.ACTION_DRAG_ENDED   :
               Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENDED");
               
               // Do nothing
               break;
               
               case DragEvent.ACTION_DROP:
               Log.d(msg, "ACTION_DROP event");
               
               // Do nothing
               break;
               default: break;
            }
            return true;
         }
      });
      
      img.setOnTouchListener(new View.OnTouchListener() {
         @Override
         public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
               ClipData data = ClipData.newPlainText("", "");
               View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(img);
               
               img.startDrag(data, shadowBuilder, img, 0);
               img.setVisibility(View.INVISIBLE);
               return true;
            } else {
               return false;
            }
         }
      });
   }
}

Voici le contenu du fichier res / layout / activity_main.xml

Dans le code suivant, abc indique le logo de astuces-informatique.com

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" 
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" 
   tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Drag and Drop Example"
      android:id="@+id/textView"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:textSize="30dp" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Astuces Informatique"
      android:id="@+id/textView2"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true"
      android:textSize="30dp"
      android:textColor="#ff14be3c" />>
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView2"
      android:layout_alignStart="@+id/textView2" />

</RelativeLayout>

Voici le contenu de res / values / strings.xml pour définir deux nouvelles constantes

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">My Application</string>
</resources>

Voici le contenu par défaut de AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.saira_000.myapplication" >
      
   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
      
   </application>
</manifest>

Essayons d’exécuter votre application My Application. Je suppose que vous avez créé votre AVD tout en effectuant l’installation de l’environnement. Pour exécuter l’application depuis Android Studio, ouvrez l’un des fichiers d’activité de votre projet et cliquez sur Exécuter l’icône Eclipse Run Icon dans la barre d’outils. Studio Android installe l’application sur votre AVD et démarre et si tout va bien avec votre configuration et votre application, il affichera la fenêtre suivante de Emulator.

Maintenant, cliquez longuement sur l’image de carré blanc affiché et vous verrez que l’image se déplace un peu après 1 seconde de long à partir de sa place, c’est l’heure où vous devez commencer à faire glisser l’image. Vous pouvez le faire glisser dans l’écran et le déposer dans un nouvel emplacement.