Estrenamos la sección de desarrollo para iPhone con una idea curiosa: cómo imitar un candado de combinación. Sí, uno de esos redondos de taquilla de instituto que salían tanto en TV.

El primer paso es preparar la imagen del candado. Cómo lo importante en este caso era experimentar con el código, y comprobar cómo de fácil resultaba implementar dicho candado, los graficos son un tanto cutres, pero cumplen su papel.

La parte fija del candado (Lock_fixed.png)

La parte movil del candado (Lock_mobile.png)

Una vez tenemos las imágenes, crearemos un proyecto nuevo en Xcode: “Window-based application”, y para este ejemplo lo llamamos “CandadoVisual_1″.

Añadimos las imagenes a la carpeta “Resources” haciendo click con el boton derecho, “Add -> Existing files…”, y despúes de seleccionar las imagenes nos aseguramos de marcar “Copy items into destination group’s folder (if needed)“.

En el archivo “CandadoVisual_1AppDelegate.h”, nos encontramos lo siguiente:

@interface CandadoVisual_1AppDelegate : NSObject <UIApplicationDelegate> {
 UIWindow *window;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@end

Debemos añadir un outlet para la parte móvil, para que podamos girarla.

@interface CandadoVisual_1AppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
UIImageView *mobileLock;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UIImageView *mobileLock;
@end

El paso siguiente es configurar la interfaz. Hacemos doble click en “MainWindow.xib”, y se abrirá Interface Builder. Los siguientes pasos consisten en:

1. Añadir una UIImageView con la parte fija del candado.
2. Añadir una UIImageView con la parte móvil del candado justo encima de la parte fija.
3. Conectar la parte móvil con el outlet que acabamos de crear.
4. Habilitar los gestos multitouch en la parte móvil.

Primera imagen (320x320)

Configuramos el nombre de archivo

Colocamos la segunda imagen sobre la primera

Configuramos la conexion con el delegado

Habilitamos los gestos múltiples: nos aseguramos que las casillas "User Interaction enabled" y "Multiple Touch" estan marcadas

Ya podemos cerrar Interface Builder y volver a Xcode. En este primer artículo sólo vamos a ver como captar gestos múltiples, así que de momento crearemos todo el código en el App Delegate, por mantener la simplicidad.

Vamos a estar trabajando con ángulos, así que añadiremos las siguentes macros al principio de CandadoVisual_1AppDelegate.m, justo después del #import:

#define DEGREES_TO_RADIANS(__ANGLE__) ((__ANGLE__) / 180.0 * M_PI)
#define RADIANS_TO_DEGREES(__RADIANS__) ((__RADIANS__) * 180 / M_PI)

Las librerías de iPhone trabajan con ángulos en radianes, pero para que sea más fácil de comprender especificaremos los ángulos en grados y los convertiremos cuando sea necesario.

Lo fundamental es obtener los datos multitouch para saber cuando el usuario esta “girando” el candado. Antes, tendríamos que haber capturado los datos de posición de cada dedo por separado y hacer nuestros cálculos, pero desde el iOS 3.2, el SDK proporciona reconocedores de gestos (UIGestureRecognizer), y en concreto el reconocedor de rotación (UIRotationGestureRecognizer), que es el que nos interesa.

Primero, creamos el método al que llamaremos cuando se realice el gesto de rotación (handleRotate):

// Es llamada cada vez que hacemos un gesto de rotacion
- (IBAction)handleRotate:(UIRotationGestureRecognizer *)sender {
// sender.rotation es el angulo relativo desde que empezamos
// a girar, asi que guardamos lo que llevamos girado hasta
// ahora en savedAngle
currentAngle = savedAngle + RADIANS_TO_DEGREES(sender.rotation);

// Cuando el gesto termina (levantamos los dedos),
// guardamos el angulo actual en savedAngle
if (sender.state == UIGestureRecognizerStateEnded) {
savedAngle = currentAngle;
}

// Aplicamos una transformacion de giro a la
// imagen del candado
CGAffineTransform cgCTM = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(currentAngle));
mobileLock.transform = cgCTM;
}

Después, creamos un reconocedor de gestos con este método y se lo asignamos a mobileLock:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
currentAngle = 0;
savedAngle = 0;

// Override point for customization after application launch.
UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(handleRotate:)];
[mobileLock addGestureRecognizer:rotationGesture];
[rotationGesture release];

[window makeKeyAndVisible];

return YES;
}

Con esto, ya tenemos un candado que gira. En próximas entregas, veremos cómo asociar el giro a los distintos números de la combinación.

Descarga el proyecto completo: CandadoVisual_1.