Bueno, pues aquí estamos otra vez. En esta ocasión vamos a hablar del evento OnTouchListener en Android para elementos tales como una imagen. Drag and Drop significa arrastra y soltar.

Este evento nos puede servir para, por ejemplo, mover elementos por una pantalla, que es el caso que vamos a tratar en este post.

Vamos a crear una sencilla aplicación en la que se mueve un cuadrado por una pantalla. A partir de este ejemplo, debe ser fácil poder extenderlo a varios elementos, guardar las posiciones en la base de datos para que se muestren en la posición dónde los hemos movido la próxima vez que entremos y todo lo que se nos pueda ocurrir hacer usando el evento OnTouchListener.

¿Cómo usar el evento OnTouchListener en Android?

Primeramente, hay que crear un proyecto.

A continuación en el xml activity_main.xml, crearemos la estructura para crear un frame dónde mover el elemento. Quedaría tal que así:

Si nos fijamos, hemos creado un LinearLayout contenedor y dentro hemos incorporado un RelativeLayout para que el elemento ImageView pueda moverse.

No es necesario el primer contenedor LinearLayout, pero lo dejo puesto porque así da juego para añadir más elementos fuera del frame de movimiento, como por ejemplo un botón para añadir un nuevo cuadrado o para eliminarlo.

A continuación vamos a pasar al MainActivity que es dónde se produce la magia. En primer lugar hemos creado 3 variables:

• cuadrado: es la ImageView que vamos a mover
• modificarX: es un valor que asignamos para que el elemento quede centrado con respecto a nuestro dedo en el eje X.
• modificarY: idem a lo anterior pero para el ejeY. Se entenderá mejor cuando se vea en la función dónde se utiliza.

En segundo lugar, vemos las siguientes acciones:

• Asignamos el content view a el xml creado anteriormente.
• Asignamos la variable cuadrado al elemento ImageView añadido en el xml.
• Le decimos que la función que tiene que ejecutar cuando se toque ese elemento es handleMover.

Lo vemos mejor en la siguiente imagen.

Vale, ya le hemos dicho que cuando toquemos que ejecute la función handleMover. Pero, ¿qué hace esa función?.

3 tipos de eventos

Antes de nada, debemos de explicar los distintos eventos que se pueden producir cuando tocas un elemento. Vamos a explicar los tres más relevantes para este caso.

• ACTION_DOWN: este evento se lanza cuando tocamos el elemento.
• ACTION_MOVE: después de haber tocado el elemento, movemos el dedo por la pantalla.
• ACTION_UP: cuando levantamos el dedo.

Estas funciones nos van a servir para identificar el elemento que estamos tocando y saber su posición inicial, para ver el desplazamiento y para un posible almacenamiento en base de datos del nuevo valor.

Vemos el código en la siguiente imagen.

Ahora voy a explicar qué hacemos en cada parte.

¿Qué debemos hacer ahora?

Primero creo dos variables, DownPT y StartPT, que almacenarán la posición inicial del elemento y la posición actual respectivamente.

Como hemos comentado anteriormente, el evento ACTION_MOVE se produce después del ACTION_DOWN, por ello es más lógico empezar explicando éste último, pasar a explicar el ACTION_MOVE y terminar con el ACTION_UP.

ACTION_DOWN:

• Guardamos la posición inicial en la variable DownPT, haciendo uso de las funciones getX() y getY().

ACTION_MOVE:

Ya hemos pasado por el ACTION_DOWN, ahora vamos a ver dónde nos movemos y movemos el elemento a dicha posición.

• Primeramente obtenemos la posición actual del dedo.
• Posteriormente calculamos el desplazamiento que es el resultado de en cada coordenada hacer el calculo de la posición actual menos la inicial asignada en el evento ACTION_DOWN.
• Por último, asignamos la nueva posición al elemento (nuestro cuadrado) que es el resultado de sumar la posición actual del elemento más el movimiento calculado con respecto a la posición inicial menos ese valor que dijimos que era para centrar el elemento con respecto a nuestro dedo.

Por último nos quedaría hacer la parte del ACTION_UP, que es cuando levantamos el dedo del elemento.

En este caso, ya que es un ejemplo bastante sencillo, no es necesario implementar nada. Pero podría servirnos como comento en el código para guardar la posición en una base de datos del elemento y que la próxima vez que se abra la aplicación o se actualice la vista el elemento se muestre en la posición en la que la dejemos.

Quizás si miráis otras soluciones que hay en otros blogs o artículos veréis que modificando los márgenes de la imagen simulan el movimiento, pero claro cuando quieres que ese movimiento se almacene ya no puedes simular, y es por eso que ofrecemos esta solución con la cuál podrás para todos los elementos que quieras hacer uso del Drag and Drop y además mover sin simular.

Podéis encontrar el proyecto completo pulsando aquí.

Podéis ver el resultado en el siguiente vídeo:

¿Has utilizado el evento OnTouchListener en Android alguna vez? Cuéntanos en los comentarios.

Si tienes en mente hacer un modelo de negocio online o app móvil, nosotros te ayudamos a crear tu nuevo proyecto.