¿Necesitas controlar los gestos de tus usuarios dentro de tu app? O, más bien, lo único que quieres es saber cómo controlar los eventos de gestos, cómo el tap o el pitch, y conocer con más detalles alguno de sus campos o funciones ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo puedes, de una manera rápida y sencilla, implementar dicho componente en tu app.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
Gestures Ionic, ¿qué son?
En primer lugar, por si aún no lo sabías, esta es la manera que tiene el usuario de poder interactuar con nuestras apps. Los controlamos mediante funciones que se llaman cuando se dispara un evento de entrada, por ejemplo el onClick(). Y para poder darles forma tendremos que sobre escribir la funcionalidad de este evento por la que nosotros queramos.
En este caso, Ionic y Angular, tienen una manera bastante simple de usarlos. Básicamente se llaman desde el código HTML cómo podemos ver en el siguiente código:
<ion-card (swipe)="onSwipe($event)">
<ion-item>
Swiped: {{swipes}} times
</ion-item>
</ion-card>
Cómo se aprecia, hemos sobrescrito y llamado a la vez al método swipe() del componente "ion-card". En la misma llamada, hemos lanzado nuestro método onSwipe(). No me ha parecido necesario meterlo aquí, pero lo que hace la función, básicamente, es sumar 1 a la variable "swipes".
Y listo, estos son los gestos y cómo podemos usarlos. Ahora vamos a ver los que tenemos a nuestra disposición.
Tipos de gestos / gestures disponibles en Ionic.
- (click)=”onClick($event)” -> Se emite cuando un usuario hacer click/tap.
- (dblclick)=”onDoubleClick($event)” -> Se emite cuando se hace doble click / tap.
- (onPressStart)="pressed($event)" -> Se emite cuando el usuario comienza a mantener presionado el componente.
- (onPressing)="active($event)" -> Se emite mientras en usuario tiene el componente presionado.
- (onPressEnd)="released($event)" -> Se emite cuando el usaurio suelte el componente.
- (swipe)=”onSwipe($event)” -> Se emite cuando el usuario arrastra el dedo por la pantalla de un lado al otro.
- (pan)="onPan($event)" -> Se emite cuando el usuario arrastra el dedo de arriba abajo o viceversa.
- (rotate)="onRotate($event)" -> Se emite cuando el usaurio con 2 dedos rota sobre la pantalla.
- (pinch)="onPinch($event)" -> Se emite cuando el usuario pellizca o estira sobre la pantalla.
Ahora veamos algún adicional:
- on-drag -> directiva -> on-drag=”onDrag($event)” -> Se emite cuando un usuario mantiene pulsado el componente y comienza a mover el dedo.
- on-release -> directiva -> on-release=”onRelease($event)” -> Se emite cuando el usuario suelta el componente.
Bueno, es posible que falte alguno más. Pero no te preocupes, ahora vamos a ver otra manera de tratar con ellas. Aquí va…
import { Component, ViewChild } from '@angular/core';
import { Gesture } from 'ionic-angular';
...
export class Toto {
...
private gesture: Gesture;
@ViewChild('image') element;
...
ionViewDidLoad() {
//Creamos el objeto gesture a partir de una instancia de una vista.
this.gesture = new Gesture(this.element.nativeElement);
//Ponemos al objeto gesto a escuchar los eventos.
this.gesture.listen();
//Se ha ejecutado el vento pinch sobre el componente. Llamamos a nuestro evento pichEvent().
this.gesture.on('pinch', e => this.pinchEvent(e));
}
private pinchEvent(event) {
console.log(event);
}
...
}
Pero si optamos por utilizar este método de escucha activa, tenemos que recordar que el componente que queramos traquear necesita que le agregamos un selector de la siguiente manera:
<div #image></div>En este caso el selector es "#image" y nos servirá para identificarlo desde el código TS.
Los gestos / gestures que tenemos a nuestra disposición serán los siguientes:
- tap
- dblTap
- press
- pan
- swipe
- pinch
- rotate
Si se me ha olvidado alguno, déjamelo en los comentarios y lo agregaré en cuanto lo vea que los he puesto de cabeza :)
¿Cómo se pone en marcha?
Pues esto es bastante sencillito, la verdad que no al ser un componente externo, ni nada similar, basta con usarlo porque ya viene integrado en el sistema.
Pero antes de ponerte manos a la obra, comentar que hay varias librerías que nos permite tomar control de todo esto mucho más fácil y menos engorroso. Por ejemplo, tenemos HammerJS, que la puedes ver aquí, y es genial. No solo para Ionic, si no para WebApp, Angular o lo que queramos que esté hecho en JS.
Tutorial en video por si no te gusta leer
Algo más que quizás te interesa
En el momento que adoptas una estrategia para mejorar tu logo de manera constante con, por ejemplo, test a/b, las descargas de tu app y los ingresos que genera para tu bolsillo aumentan. Esto es así.
Pues bien, para hacer que el trabajo de evaluar, optimizar y mejorar un logo sea más sencillo para ti, hemos creado esta herramienta. Es una IA entrenada con los logos de las apps de Google Play y categorizados en 10 niveles. Y, a parte, te da consejos para salta al siguiente nivel. No te espoile más, entra al enlace.
Y ahora si, me despido ya. Espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!