Desarrollador y especialista en tecnologías .Net

Extendiendo controles usando Gesture Recognizers (parte 1)

Screen Shot 2019-02-16 at 6.34.13 PM
Share on facebook
Share on twitter
Share on linkedin

En esta serie de artículos vamos a ver como extender controles en Xamarin.Forms utilizando Reconocedores de Gestos, como los objetos están nombrados en inglés usaré el termino Gesture Recognizer de ahora en adelante. Este artículo en particular se enfocará en el reconocedor de gestos de toque (Tap Gesture Recognizer) y para cuando terminemos vas a poder convertir una imagen estática en un botón interactivo.

Vamos a comenzar por un poco de infomación general…

¿Qué es un Gesture Recognizer?

Xamarin.Forms nos permite extender la manera en que interactuamos con algunos elementos visuales utilizando Gesture Recognizers.

Un Gesture Recognizer es un objeto que se mantiene esperando por un estímulo externo y en respuesta hace un llamado a una función. El estímulo se conoce como un gesto y la función en respuesta puede ser un evento o un comando.

Un Gesto o Gesture es cualquier acción física que el usuario pueda aplicar al dispositivo. Esto puede ir desde tocar la superficie de la pantalla hasta sacudir el dispositivo. En esta serie nos enfocaremos en cuadro gestos: Toque (Tap), Pellizco (Pinch), Arrastre (Pan) y Desliz (Swipe).

  • Un toque sucede cuando el usuario toca el control o la pantalla en un solo punto. De ahora en adelante usaré los términos tocar y hacer clic indistintamente.
  • Un pellizco ocurre cuando el usuario coloca dos dedos en el control o la pantalla y los mueve uno hacia el otro o en sentido contrario. Normalmente se utiliza para hacer zoom dinámico.
  • Un arrastre es cuando el usuario mueve un dedo por la pantalla.
  • Un deslizamiento es cuando el usuario mueve su dedo a través del control en una línea recta, horizontal, vertical o diagonalmente.

La mayoría, si no todos los controles de Xamarin Forms tienen una propiedad llamada GestureRecognizers que define una colección de objetos. Podemos definir múltiples Reconocedores de gestos en el mismo control y también podemos tener múltiples instancias del mismo Reconocedor de gestos.

¿Recuerdas la imagen que mencioné al principio?

Para poder hacer clic en una imagen, tenemos que agregarle un TapGestureRecognizer y definir el código que queremos ejecutar al hacer clic en ella. Aquí hay un ejemplo en XAML:

Aquí está el código que ejecutaremos cuando pulsemos la imagen:

Y este es el resultado final:

Explicando el código

We are using the NumberOfTapsRequired property to define how many times the user has to tap the control before the Gesture Recognizer launches the event. The Tapped property is used to specify the event handler that will take the task of responding to the gesture. In this case the OnTapGestureRecognizerTapped method.

We can also specify a Command instead of an event handler but that’s for another time.

Estamos utilizando la propiedad NumberOfTapsRequired (Número de toques requeridos) para definir cuántas veces el usuario tiene que tocar el control antes de que el reconocedor de gestos lance el evento. La propiedad Tapped se utiliza para especificar al controlador de eventos que tarea realizará para responder al gesto. En este caso, el método OnTapGestureRecognizerTapped.

También podemos especificar un comando en lugar de un controlador de eventos, pero eso es para otro momento.

Pensamientos finales

Aquí hay algunas cosas divertidas con las que puedes probar y experimentar:

  • Puede agregar múltiples TapGestureRecognizers al mismo control, digamos uno para doble toque y otro para un solo toque:
Dos eventos diferentes se lanzan, uno cuando hacemos un solo clic otro cuando hacemos doble clic

En mi experiencia, agregar varios TapGestureRecognizers al mismo control puede producir algunos comportamientos inesperados e incluso desagradables, como que se active el controlador de eventos incorrecto para iniciar.

  • Puedes agregar múltiples eventos para la misma cantidad de toques:
Un solo toque lanza varios eventos

Espero que hayas encontrado esto útil o por lo menos interesante. Manténte atento a la próxima entrada de la serie y ten un buen día.

¿quieres recibir mis artículos en tu correo?

Suscribete a mi boletín de correos y enterate desde que se publiquen los artículos

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Otros artículos

Xamarin

Extendiendo controles usando Gesture Recognizers (parte 1)

En esta serie de artículos vamos a ver como extender controles en Xamarin.Forms utilizando Reconocedores de Gestos, como los objetos están nombrados en inglés usaré el termino Gesture Recognizer de ahora en adelante. Este artículo en particular se enfocará en el reconocedor de gestos de toque (Tap Gesture Recognizer) y

Leer más »
Cinco preguntas

Cinco preguntas sobre ser un Microsoft Certified Trainer (MCT)

Recientemente he obtenido mi certificación de MCT y quería compartir un resumen de qué es, cómo funciona y por qué quisieras obtener esta certificación. Nunca he creído que las certificaciones sean 100% necesarias. Creo que la mejor prueba de conocimiento es la experiencia, pero tener una validación de tus aptitudes

Leer más »