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.

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

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
Eventos

La Experiencia CodecampSDQ

El sábado pasado, 1 de junio, tuve el privilegio de participar como miembro del personal y orador en el CodecampSDQ. Se llevó a cabo en las instalaciones de la Universidad INTEC aquí en Santo Domingo. Este evento ha estado ocurriendo durante muchos años y se ha convertido en una especie

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos
Xamarin

Almacenamiento en caché de imágenes en Xamarin Forms

Alguien me preguntó sobre un problema que estaba teniendo al mostrar un ListView que tenía una imagen para cada celda. Cuando el usuario se movía por la lista, las imágenes parpadeaban y la interfaz de usuario se comportaba un poco lento. Las imágenes se estaban cargando desde internet. El problema

Leer más »
Xamarin

Agregando autenticación con huellas digitales en Xamarin Forms

Agregar una autenticación de huella digital para proyectos multiplataforma nunca ha sido tan fácil como con el paquete de NuGet Plugin.Fingerprint. Pero primero… Algunas cosas para aclarar acerca de la autenticación biométrica o por huella digital. Estas son limitaciones de implementación por la tecnología en sí y no están introducidas

Leer más »