Desarrollo de Aplicaciones Mviles

iOS

Introduccin

El objetivo de esta gua es analizar mediante un ejemplo concreto las posibilidades que ofrece iOS para reaccionar a la interaccin del usuario, en particular frente al uso de gestos como arrastrar, pellizcar, tocar, rotar, etc. La misma es una versin adaptada y reducida de un muy buen artculo de Ray Wanderlich disponible en la web (http://www.raywenderlich.com/6567/uigesturerecognizer- tutorial-in-ios-5-pinches-pans-and-more)

Proyecto y recursos
Vamos comenzar nuestra gua creando una aplicacin del tipo Single View Application:

Luego agregaremos unas imgenes que utilizaremos en un rato al proyecto, arrastrndolas sobre la carpeta Gua de Gastos:

Desarrollo de Aplicaciones Mviles

iOS

Vista
Abrimos la storyboard y agregamos tres Image View. A cada una le estableceremos como imagen una de las imgenes agregadas en el paso anterior, y a todas les daremos el tamao justo para mostrar las imgenes. Para esto seleccionaremos cada una y utilizaremos la opcin del men Editor\Size To Fit Content. Nuestra vista debera quedar ms o menos as:

Desarrollo de Aplicaciones Mviles

iOS

Detectando los Gestos

Las clases que extienden UIGestureRecognizer proveen una implementacin por defecto para detectar gestos comunes como toques , rotaciones, pellizcos, golpes, etc. (touches, rotations, pinches, swipes, pans, etc.) Para nuestro ejemplo utilizaremos un UIPanGestureRecognizer, el que agregaremos a nuestra vista. Luego definiremos un mtodo de callback en nuestro controlador. Cada vez que el Gesture Recognizer detecte el gesto invocar el mtodo de callback y podremos actualizar la vista. Estas tareas pueden realizarse mediante cdigo o utilizando las herramientas grficas de XCode. Por ahora vamos a seguir el segundo camino. Vamos a abrir nuestro storyboard y a agregar un Pan Gesture Recognizer desde la Object Library. Lo haremos arrastrndolo sobre la primera de las imges

Para estar seguros de que lo hicimos bien mirando el Connections Inspector para la imagen:

Como ya tenemos el Gesture Recognizer y lo asociamos a la imagen, el siguiente paso ser escribir el mtodo que este utilizar como callback para avisarnos de los cambios. En el archivo DMViewController.h agregaremos la siguiente definicin:

Desarrollo de Aplicaciones Mviles

iOS

y en DMViewController.m su implementacin:

Este mtodo se ejecutar cuando el Gesture Recognizer detecte que se comienza a arrastrar un objeto, y continuar invocndose una y otra vez mientras se siga arrastrando. Podemos obtener cuanto es que el usuario a movido su dedo mediante el mtodo translationInView. Luego accedemos al objeto que est siendo arrastrado mediante la propiedad view del recognizer, y le cambiamos su centro al que tena ms la cantidad que el usuario haya movido el dedo. Esto logra el efecto de arrastre. Finalmente la ltima lnea del mtodo resetea la cantidad de arrastre (translation), de otra manera seguiremos acumulando la cantidad, cuando ya no es necesario porque movimos el objeto. Ya tenemos el recognizer y el mtodo que actuar como callback, solo nos falta relacionarlos. Para ello simplemente arrastraremos desde el Connections Inspector del recognizer la accin selector hacia el View Controller. Cuando soltemos el botn del mouse nos preguntar que mtodo queremos asociar, a lo que seleccionaremos handlePan.

Ya tenemos todo pronto, solo nos falta habilitar la interaccin con el usuario para el ImageView, lo que por defecto est desactivado. Seleccionaremos la primera imagen y en el Attributes Inspector habilitaremos la opcin User Interaction Enabled:

Desarrollo de Aplicaciones Mviles

iOS

Ya podemos probar la aplicacin para ver si responde al arrastre sobre la primera imagen (recordar que solo asociamos esta con el Gesture Recognizer). Si seguimos todos los pasos correctamente deberamos poder arrastrar la imagen a lo largo de la pantalla. Para completar el ejemplo vamos a agregar otros dos Pan Gesture Recognizer, arrastrando cada uno a cada una de las otras dos imgenes. Vamos a tener un recognizer para cada imagen. Luego de agregarlos vamos a unir la accin selector desde el Connection Inspector con el View Controller, seleccionando el mtodo handlePan, como hicimos con el primer recognizer. Resumiendo, cada imagen tendr su propio recognizer, pero los tres utilizarn el mismo mtodo de callback.

Desaceleracin
Es comn que los controles en iOS muestren un efecto de desaceleracin cuando se termina de moverlos, por ejemplo cuando hacemos scroll sobre una lista o una vista web. Con muy poco esfuerzo vamos a agregar este efecto mediante una de varias formas posibles en nuestra aplicacin. La idea ser detectar cuando el gesto termina, calcular que tan rpido era el arrastre y animar el objeto que se mueve hasta su posicin final desacelerando la velocidad. Para lograrlo vamos a modificar el mtodo handlePan que ya escribimos, preguntndole al recognizer en que estado est el gesto (iniciando, cambiando o terminando). Esto lo lograremos simplemente accediendo a su propiedad state. Para conocer la velocidad llamaremos al mtodo velocityInView. Para implementar estos cambios agregaremos el siguiente cdigo al final de la implementacin actual de handlePan (nota: es posible copiar y pegar):
if (recognizer.state == UIGestureRecognizerStateEnded) { CGPoint velocity = [recognizer velocityInView:self.view]; CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y)); CGFloat slideMult = magnitude / 200; float slideFactor = 0.1 * slideMult; CGPoint finalPoint = CGPointMake(recognizer.view.center.x + (velocity.x * slideFactor), recognizer.view.center.y + (velocity.y * slideFactor)); finalPoint.x = MIN(MAX(finalPoint.x, 0), self.view.bounds.size.width); finalPoint.y = MIN(MAX(finalPoint.y, 0), self.view.bounds.size.height); [UIView animateWithDuration:slideFactor*2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{ recognizer.view.center = finalPoint; } completion:nil]; }

Desarrollo de Aplicaciones Mviles

iOS

Pellizcos y Rotaciones
Para detectar pellizcos y rotaciones debemos seguir la misma mecnica de uso de los gesture recognizers. Esta vez comenzaremos escribiendo los mtodos de callback en el view controller. En DMViewController.h agregaremos:

y en la implementacin (DMViewController.m):

Ahora simplemente debemos agregar un UIPinchGestureRecogizer y un UIRotationGestureRecognizer sobre cada imagen. Luego de esto debemos asociar sus selecciones con el view controller, seleccionando en cada caso el mtodo que corresponda. Una vez agregados los recognizers y enlazados con sus mtodos de callback podemos volver a probar la aplicacin. Para simular el pinch o la rotacin en el simulador se puede presionar la tecla option al hacer click en el mouse, lo que har aparecer dos crculos que simulan los puntos de contacto de los dedos del usuario con la pantalla del telfono. 6

Desarrollo de Aplicaciones Mviles

iOS

Resumen
Esta gua presenta algunos conceptos bsicos relacionados con la captura de gestos en iOs. Como se menciona al principio, la misma es una versin reducida y adaptada de un muy buen artculo de Ray Wenderlich publicado aqu: http://www.raywenderlich.com/6567/uigesturerecognizer-tutorial- in-ios-5-pinches-pans-and-more El artculo es bastante ms extenso que la gua, y toca otros puntos interesantes como el tratamiento simultaneo de varios Gesture Recognizers, su utilizacin mediante cdigo (sin usar Interface Builder como en la gua) e incluso la creacin de reconocedores personalizados. Se recomienda ampliamente la lectura del mismo.