Tutorial Android: Drag and Drop (Arrastrar y soltar)

Buenos días, hoy vamos a aprender como hacer el efecto de Drag and Drop ( arrastrar y soltar ) un objeto, en este caso una imagen, sobre una superficie en Android.

Este tutorial es bastante simple, consta de un RelativeLayout que hemos llamado 'marco' el cual ocupa toda la pantalla y un ImageView que es el objeto que arrastraremos con el dedo. El marco se podría hacer más pequeño y la imagen solo se arrastraría sobre esa superficie. También se podrían añadir las objetos y mover el deseado. En mi caso trabajo con un Samsung Galaxy S3 y podría mover hasta 5 objetos a la vez ya que reconoce 5 puntos táctiles a la vez. Sin embargo podríamos poner tantos objetos como quisiéramos aunque habría que mover los de uno en uno o en grupos pequeños.




Primerpo os presento como sería el código .XML como veis solo consta de un objeto, RelativeLayout:

<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"
    tools:context=".MainActivity" 
    android:id="@+id/marco">
</RelativeLayout>

Una vez tengamos este archivo listo vamos al código Java como siempre totalmente comentado. Si hubiera alguna duda, no olvidéis en preguntar en el apartado de Comentarios:

//Implementamos directamente el Listener a la clase
public class MainActivity extends Activity implements View.OnTouchListener{
 //Definimos el marco por el cual podemos arrastrar la imagen
 private ViewGroup marco;
 //Definimos la imagen que vasmo arrastrar
 private ImageView imagen;
 //Variables para centrar la imagen bajo el dedo
 private int xDelta;
 private int yDelta;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //Relacionamos
  marco = (ViewGroup)findViewById(R.id.marco);
  //Creamos la imagen
  imagen = new ImageView(this);
  //Señalamos la imagen a mostrar
  imagen.setImageResource(R.drawable.ic_launcher);
  //Añadimos el Listener de la clase
  imagen.setOnTouchListener(this);
  //Añadimos la imagen al marco
  marco.addView(imagen);
 }
 //Al tocar la pantalla...
 public boolean onTouch(View view, MotionEvent event) {
  //Recogemos las coordenadas del dedo
  final int X = (int) event.getRawX();
  final int Y = (int) event.getRawY();
  //Dependiendo de la accion recogida..
  switch (event.getAction() & MotionEvent.ACTION_MASK) {
      //Al tocar la pantalla
     case MotionEvent.ACTION_DOWN:
         //Recogemos los parametros de la imagen que hemo tocado
         RelativeLayout.LayoutParams Params = 
            (RelativeLayout.LayoutParams) view.getLayoutParams();
         xDelta = X - Params.leftMargin;
         yDelta = Y - Params.topMargin;
         break;
     case MotionEvent.ACTION_UP:
         //Al levantar el dedo simplemento mostramos un mensaje
         Toast.makeText(this, "Soltamos", Toast.LENGTH_LONG).show();
         break;
     case MotionEvent.ACTION_POINTER_DOWN:
      //No hace falta utilizarlo
         break;
      case MotionEvent.ACTION_POINTER_UP:
       //No hace falta utilizarlo
          break;
      case MotionEvent.ACTION_MOVE:
       //Al mover el dedo vamos actualizando 
                        //los margenes de la imagen para
       //crear efecto de arrastrado
          RelativeLayout.LayoutParams layoutParams = 
             (RelativeLayout.LayoutParams) view.getLayoutParams();
          layoutParams.leftMargin = X - xDelta;
          layoutParams.topMargin = Y - yDelta;
          //Qutamos un poco de margen para 
                        //que la imagen no se deforme
          //al llegar al final de la pantalla y pueda ir más allá
          //probar también el codigo omitiendo estas dos líneas
          layoutParams.rightMargin = -50;
          layoutParams.bottomMargin = -50;
          //le añadimos los nuevos 
                        //parametros para mover la imagen
          view.setLayoutParams(layoutParams);
          break;
      }
   //Se podría decir que 'dibujamos' 
                        //la posición de la imagen en el marco.
      marco.invalidate();
      return true;
  }}

Publico este vídeo para que podáis ver el resultado:

Muchas gracias por todo! no olvidéis comentar!