Los Gestos iOS en iPhone e iPad (Parte 2)

programacion-los-gestos-ios-iphone-ipad-parte

En Los Gestos iOS en iPhone e iPad (Parte 1) se profundizó en los gestos disponibles en iOS, desde un punto de vista como usuario y se creó el contexto para programar estos gestos. Así que, una vez escrita la base para un developer, o como en castellano nos gusta llamar un programador o programadora, aquí empieza la segunda parte que se centrará en el código a escribir. Comprenderás qué código Swift necesitas para habilitar en una bola naranja los gestos de tocar y arrastrar. Para ello, se utilizará Xcode 10 con Swift 4.2 en un Playground, que es la forma más eficaz para aprender el lenguaje de programación Swift.

 

El objetivo por alcanzar es crear una Live View con una bola, como lo que puedes ver en este vídeo:

 

Como has visto, si solo pulsas la bola naranja se vuelve de color verde y aumenta de tamaño, mientras que si la arrastras, aumenta el diámetro de la bola y al soltarla vuelve a tu tamaño original.

 

Paso a paso

 

En este artículo te explicaré línea a línea el código que necesitarás escribir en el Playground.

 

Antes de empezar a escribir, siempre debes tener claro que es lo que vas a hacer y con qué objetivo. En el vídeo anterior has visto la finalidad, y con el siguiente vídeo deseo que visualices la estructura que tendrá el Playground para que así sepas qué clases necesitarás para conseguirlo. Dentro del Playground Gestos habrá dos clases en la carpeta Sources: FondoView y BolaGestosView. Estas dos clases serán utilizadas por el Playground. FondoView es una clase auxiliar que he creado para la visualización de la Live View.

 

En el siguiente enlace puedes descargarte de GitHub el Playground para poder iniciar el ejemplo: gestos-playground-blog-inicio

¡Empieza la acción!

En primer lugar, crea el playground Gestos en Xcode 10, importando los frameworks UIKit y PlaygroundSupport. A continuación, escribe el código para crear un rectángulo blanco para mostrarlo en la Live View del playground, como si fuese el fondo de una pantalla del iPhone.

 

En la carpeta Sources crea el archivo Swift llamado BolaGestosView. Importa el framework UIKit y escribe la clase BolaGestosView que heredará de la clase UIView. Tendrá un nivel de acceso open para que el Playground pueda usarla.

 

En esta clase escribe el código para crear las funciones para escalar y mover. La función escalar se activará cuando pulses sobre la bola o inicies el arrastre. La función mover se iniciará al arrastrar la bola.

 

Escalar recibirá un número para saber el factor de escala. Recuerda que 1.0 deja a la bola en su mismo tamaño, mientras que un número mayor a 1 aumentará el tamaño de la bola. La animación tiene una duración de 0.1 segundos, con un movimiento en la animación de inicio lento y finalización lenta, tal y como especifica curveEaseInOut. En la animación se le asignará a la bola una transformación de escala.

 

Mover recibe el punto de translación en el que se está arrastrando la bola. Ese punto se lo asigna al centro de la bola. De esta forma, hace que se mueva la bola acorde al movimiento de arrastre. Una vez terminado dicho movimiento se reinicia a cero la translación. Esto evitará un valor incremental en los movimientos de arrastre.

 

Ahora llega el momento de crear las funciones que se activarán cuando se inicien los gestos de pulsar y el de arrastrar.

 

Lo primero es añadirle la palabra clave @objc, debido a que será llamada desde una variable que utiliza un selector, que internamente todavía utiliza elementos creados con el lenguaje de programación Objective-C.

 

La función manejarPulsar recibirá el gesto de pulsar para que así se pueda imprimir el punto exacto que se ha pulsado. Como puedes observar, están comentadas las dos primeras líneas para que decidas si quieres que se imprima por consola el punto pulsado. Entonces, las puedes descomentar eliminando las dos barras. Dentro de esta función hay otra animación con una duración de 0.1 segundos y dicha animación será más lenta al terminar. Esta animación cambiará el color de la bola a verde y aumentará su escala al doble de su tamaño. Una vez terminada esta primera acción, empezará la segunda. Le he añadido un pequeño retraso de otro 0.1 para que permanezca el color verde un poco más, y luego volverá la bola a su color naranja y a su tamaño original mediante la escala con valor 1.

 

La función manejarArrastrar recibe el gesto de arrastrar. De esta forma se puede obtener los diferentes estados del gesto mediante los casos del switch. El primero se produce cuando se inicia el arrastre, aumentando un poco la bola. A continuación, cuando el estado cambia, inicia el movimiento de la bola. Finalmente, cuando termina, se le asigna la escala a 1 para que vuelva la bola a su tamaño inicial.

 

En la parte superior de esta clase se crearán las propiedades que le asignan la función a ejecutar cuando se activa el gesto de pulsar o Tap Gesture, así como el gesto de arrastrar o Pan Gesture. Puedes observar como cada variable, usando los selectores, llama a las funciones que has escrito anteriormente. Estas variables vienen precedidas por lazy, debido a que no se inicializarán hasta que no sean llamadas por el código en tiempo de ejecución.

 

El siguiente diagrama muestra la estructura de estas variables:

 

La variable gesto pulsar mediante el selector activará las acciones que se producirán en la función manejarPulsar(sender:), que a su vez iniciará la función de escalar la bola.

 

Por otra parte, la variable gesto arrastrar iniciará la acción del selector llamando la función manejarArrastrar(sender:). Y como recordarás, los casos del switch llamarán las funciones escalar o mover, según corresponda.

 

Ha llegado la hora de escribir los inicializadores de la clase.

 

El primer init será público para poder usarlo en el Playground. Dentro de él se creará un array constante con las variables de los gestos que creaste antes. A continuación, se realizarán iteraciones sobre el array gestos para añadirlos a la vista, o sea, a la bola.

 

Luego viene un init de conveniencia para poder crear la bola con las dimensiones de un rectángulo. La primera línea establecerá el tamaño recibido para asignárselo a la vista de la bola. En la segunda línea crea un radio del rectángulo, o en este playground un cuadrado. El radio será la mitad del ancho del cuadrado, de esta forma se convertirá en un círculo. La tercera línea activa el radio en la vista.

 

Finalmente se declarará el init requerido para que así se cumpla con los requisitos de los inicializadores de esta clase.

 

A continuación, escribe el código en el Playground para crear la instancia de la bola. Crearás una constante conforme a la clase BolaGestosView.

 

Al ir entre llaves, la inicialización de la bola puede personalizar la creación de la vista. En la primera línea estableces que será un cuadrado de 100 puntos, en la segunda línea defines que el punto sobre el que se aplicarán las transformaciones está en el centro geométrico de la bola. Luego le asignas el color naranja. Finalmente, mediante el return asignas la vista creada a la bola.

 

Seguidamente en la inicialización de la bola, para simplificar, se mostrará el centro de la bola en el centro de la vista blanca del fondo. Por esa razón, la última línea añade la bola al fondo para que sea visible en la Live View.

 

En el siguiente enlace puedes descargarte el Playground terminado desde GitHub, por si deseas compararlo con el tuyo: gestos-playground-blog-terminado

Tutorial completo en: https://theemotionapps.com/tutorial-gesture-recognizer-en-ios-swift-4-2/

 

¿Quieres aprender más?

TITULO DE EXPERTO UNIVERSITARIO. Innovación usando la tecnología iOS con programación Swift: Proyectos Europeos.

 

TITULO DE EXPERTO PROFESIONAL. Desarrollo Profesional de Aplicaciones iOS con Swift para Dispositivos Móviles.

 

PROGRAMACIÓN SWIFT Y SUS NUEVOS PARADIGMAS. Certificado de Enseñanza Abierta.

 

DESARROLLADOR DE ELEMENTOS iOS. Certificado de Enseñanza Abierta.

 

CREACIÓN PROFESIONAL DE APLICACIONES DESDE LA IDEA HASTA EL APP STORE. Certificado de Enseñanza Abierta.

Inicia Sesión con tu Usuario y Contraseña

¿Olvidó sus datos?