Bienvenidos sean a este post, hoy hablaremos sobre la pantalla tactil. Los dispositivos moviles al dia de hoy contienen esta forma de ingreso en los mismos y haciendo una equivalencia estos serian el mouse de nuestro dispositivo, ya que permiten seleccionar, arrastrar, activar, en fin todas las mismas funciones al mitico dispositivo de las PC. Como pueden imaginarse a su vez se utiliza para reemplazar el teclado, en caso de carecer de uno, o como mando para los videojuegos pero eso lo veremos mas adelante.
Para poder utilizar las pantallas tactiles se debe pasar a un metodo onTouchEvent en las clase View, tambien se puede usar onTouchListener en otras clases, este evento nos enviara en un parametro un objeto de la clase MotionEvent con informacion sobre el evento, estos son algunos de los metodos de la clase MotionEvent:

Metodo Descripcion
getAction() Tipo de accion realizada
getX(), getY() Posicion de la pulsacion
getDownTime() Tiempo en milisegundos de cuando el usuario presiona por primera vez una cadena de eventos
getEventTime() Tiempo en milisegundos del evento actual
getPressure() Estima la presion de la pulsacion
getSize() Estima el tamaño de la pulsacion

Para entender esto un poco mejor veamos un ejemplo:

Para ello abramos Android Studio y seleccionemos Start a new Android Studio project, en el siguiente cuadro modificaremos el campo Application Name por PantallaTactil, en Company domain modifiquenlo por example.org, el resto debe quedar como aparece y pulsan Next, en la siguiente pantalla eligen Phone and Tablet y seleccionen la API mas baja que dispongan, una vez seleccionado pulsen Next, en nuestro siguiente cuadro seleccionen Empty Activity, pulsen Next para pasar al siguiente cuadro y en el ultimo cuadro si no aparece por defecto deben modificar a Application Name por MainActivity y Layout Name por activity_main y las opciones Generate Layout y Backwards compatibility (AppCompat) deben estar tildadas, por ultimo pulsan Finish para cerrar el cuadro y generar nuestra app. Una vez dentro del Android Studio, vamos a modificar el codigo de activity_main.xml por el siguiente codigo:

< ?xml version="1.0" encoding="utf-8"? >
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >
    < TextView
         android:id="@+id/textoEntrada"
         android:layout_width="wrap_content"
         android:layout_height="0dp"
         android:text="Pulsa sobre esta vista"
         android:layout_weight="1"
         android:gravity="center"
         android:background="#0000FF"
         android:layout_margin="2mm"
         android:textSize="10pt" / >
    < ScrollView
         android:id="@+id/scrollView1"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1" >
        < TextView
             android:id="@+id/textoSalida"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Pulsaciones: "  / >
    < /ScrollView >
< /LinearLayout >

Como pueden ver en este caso vamos a generar un LinearLayout, luego un TextView para pulsar sobre ella, en nuestro siguiente elemento usamos un ScrollView para contener otro TextView que nos servira de salida, con todas estas modificaciones realizadas pasemos a modificar la clase MainActivity, primero modificaremos de la siguiente manera a nuestra clase:

public class MainActivity extends Activity implements View.OnTouchListener

Y en nuestro metodo onCreate() agregaremos las siguientes lineas:

TextView entrada = (TextView) findViewById(R.id.textoEntrada);
entrada.setOnTouchListener(this);

Nuestro siguiente paso sera agregar el siguiente metodo dentro de la clase:

public boolean onTouch(View vista, MotionEvent evento){
    TextView salida = (TextView) findViewById(R.id.textoSalida);
    salida.append(evento.toString() + "\n");
    return false;
}

Este metodo sera el encargado de interpretar nuestro evento de touch, para esto le enviaremos dos atributos, uno para la vista y otro para el evento en si, luego crearemos un enlace entre el elemento textoSalida y nuestro codigo Java por medio de esta linea:

TextView salida = (TextView) findViewById(R.id.textoSalida);

Y con la siguiente linea mostraremos el evento ocurrido al enlace creado en la linea anterior, por ultimo utilizaremos un return false para seguir en la app y poder recibir otros eventos veamos como funciona nuestra app a traves del siguiente video:

Como pueden ver cada vez que presionamos la vista de entrada se nos muestra el evento en la vista de salida, tan simple como eso ahora pasemos al multi-touch. Las pantallas multi-touch fueron incorporadas a partir de la API 2.0 y hoy es lo mas comun, al igual que vimos antes un puntero (pointer) estara activo mientras se pulsa hasta que se deja de presionar, cada puntero tiene un id de identificacion que se asigna a la primera pulsacion, pasemos a ver una lista de constantes disponibles:

Constantes Descripcion
ACTION_DOWN Pulsacion en pantalla sin ningun otro puntero acrivo
ACTION_UP Se deja de presionar el puntero activo
ACTION_MOVE Cualquier puntero activo se desplaza
ACTION_CANCEL Se cancela un gesture
ACTION_OUTSIDE El puntero sale de la vista
ACTION_POINTER_DOWN Se pulsa un nuevo puntero distinto al activo
ACTION_POINTER_UP Se deja de presionar un puntero pero no es el ultimo

Podemos probar nuestra app creada pero no obtendremos ningun resultado, para ello debeomos hacer una serie de modificaciones para ello deberemos reemplazar la siguiente linea:

salida.append(evento.toString() + "\n");

Por las siguientes instrucciones:

String acciones[] = {"ACTION_DOWN", "ACTION_UP", "ACTION_MOVE",
        "ACTION_CANCEL","ACTION_OUTSIDE","ACTION_POINTER_DOWN",
        "ACTION_POINTER_UP"};
int accion = evento.getAction();
int codigoAccion = accion & MotionEvent.ACTION_MASK;
salida.append(acciones[codigoAccion]);
for(int i = 0; i < evento.getPointerCount(); i++){
    salida.append(" puntero: " + evento.getPointerId(i) +
            " x: " + evento.getX(i) + " y: " + evento.getY(i));
}
salida.append("\n");

En este bloque hemos creado un array llamado acciones para almacenar algunas de las constantes antes mencionadas, luego crearemos una variable llamada accion donde se almacenara el evento del metodo getAction(), despues tenemos otra variable llamado codigoAccion donde haremos una union logica de tipo AND entre la variable accion y ACTION_MASK, Máscara de bits de las partes del código de acción que son la acción en sí misma, en la siguiente linea agregaremos al elemento textoSalida por medio del array acciones y si coincide algun elemento de los mismos y el obtenido en codigoAccion.
Nuestro siguiente paso sera un bucle for, donde obtendremos los punteros en la pantalla y agregaremos a textoSalida el id del puntero, y sus ejes X e Y y por ultimo le agregamos el indicador de nueva linea, si lo probamos obtendremos una salida como se ve en el siguiente video

Antes de comentar el video veamos el codigo final de MainActivity:

package org.example.pantallatactil;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends Activity implements View.OnTouchListener{

    /* boolean multiTouch = getPackageManager().hasSystemFeature(
            PackageManager.FEATURE_TOUCHSCREEN_MULTITOUCH); */

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView entrada = (TextView) findViewById(R.id.textoEntrada);
        entrada.setOnTouchListener(this);
    }


    public boolean onTouch(View vista, MotionEvent evento){
        TextView salida = (TextView) findViewById(R.id.textoSalida);
        String acciones[] = {"ACTION_DOWN", "ACTION_UP", "ACTION_MOVE",
                "ACTION_CANCEL","ACTION_OUTSIDE","ACTION_POINTER_DOWN",
                "ACTION_POINTER_UP"};
        int accion = evento.getAction();
        int codigoAccion = accion & MotionEvent.ACTION_MASK;
        int iPuntero = (accion & MotionEvent.ACTION_POINTER_INDEX_MASK
                >> MotionEvent.ACTION_POINTER_INDEX_SHIFT);
        salida.append(acciones[codigoAccion]);
        for(int i = 0; i < evento.getPointerCount(); i++){
            salida.append(" puntero: " + evento.getPointerId(i) +
                    " x: " + evento.getX(i) + " y: " + evento.getY(i));
        }
        salida.append("\n");
        return false;
    }
}

En el video se ve como pulsamos dos veces en la pantalla, en el equipo virtual si esta corriendo sobre Windows/Linux deberan tener apretado la tecla Ctrl para que aparezca la segunda marca, en el video no se ve pero si lo prueban se veran las dos marcas y si las van rotando se notara en el id del puntero que se ve en textoSalida.
En resumen, hoy hemos visto como trabaja la pantalla tactil, como se establece, como son algunos de los eventos para interceptarlo, tanto para un toque simple como un multiple, espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios