Brújula iPhone

jul 2, 2012

En este tutorial vamos a implementar de una forma bastante rápida una brújula para nuestra aplicación de iOS.

Antes de comenzar hemos de aclarar un tema importante en lo que a Norte nos referimos.

En su día, el Norte real de la tierra, coincidía con el Norte magnético de la misma.  Sin embargo, hace tiempo que los campos magnéticos de la tierra están desplazados con respecto al Polo Norte, de forma que ahora no es igual de preciso uno que otro.

Por lo general el que nos interesa es el Norte Real, pues es la referencia que necesitamos para centrarnos correctamente.

Por defecto si en iOS comenzamos a comprobar los cambios de ángulo que el iPhone realiza, estaremos obteniendo el Norte Magnético, sin embargo, el Norte real podemos obtenerlo si, además, activamos la geolocalización con CoreLocation. Mediante estos dos sistemas, iOS es capaz de darnos el Norte Real realizando sus propios cálculos a partir de la posición del usuario.

Visto esto, comenzamos:

Creamos un proyecto de tipo Single View Application.

 Dejamos activo solo el ARC (Automatic Counting Reference).

Lo primero que vamos a hacer es añadir dos frameworks necesarios.

CoreLocation: nos va a servir para implementar los servicios y métodos de localización (incluyendo el sistema de brújula).

Quartz Core: Nos servirá ahora y en otros tutoriales para el tratamiento de animación y cambios en las vistas. En este caso nos va a permitir girar la imagen de la cruzeta de nuestra brújula.

Pulsamos sobre el proyecto, en la pestaña Build Phases, desplegamos la tercera opción, y pulsamos sobre más. Ahora buscamos ambos frameworks y los añadimos.

Una ves añadidos los frameworks, podemos arrastrar al proyecto los recursos (imágenes) que nos pueden hacer falta. 

Para la brújula podéis utilizar esta imagen, y para el fondo del app, esta otra.

Pasamos ahora al ViewController.h e implementamos lo siguiente:

#import <UIKit/UIKit.h>
 
 
// Importamos los frameworks
 
#import <CoreLocation/CoreLocation.h>
 
#import <QuartzCore/QuartzCore.h>
 
 
// Establecemos el controlador como delegado de localización (CLLocationManagerDelegate)
@interface ViewController : UIViewController{
 
    // Creamos el manejador encargado de la posición y la orientación.
    CLLocationManager *locationManager;
 
    // Y añadimos un IBOulet para la imagen de la brújula.
    IBOutlet UIImageView *compassImage;
 
}
 
 
@end

Abrimos ahora el ViewController.m y modificamos el viewDidLoad:

- (void)viewDidLoad{
 
    [super viewDidLoad];
 
    // Iniciamos el LocationManager
    locationManager=[[CLLocationManager alloc] init];
 
    // Establecemos la precisión como la mejor.
    locationManager.desiredAccuracy = kCLLocationAccuracyBest;
 
    // El ángulo mínimo que debe cambiar para que se actualize el valor y así iOS informe al sistema del cambio.
    locationManager.headingFilter = 1;
 
 
    // Establecemos al propio controlador como el delegado de localización.
    locationManager.delegate=self;
 
 
    // Al igual que con los ángulos, con la posición ponemos que se avise de cambios en cuanto haya uno mínimo.
    locationManager.distanceFilter = 1;
 
 
    // Comenzamos a comprobar los cambios de localización, para conseguir el Norte Real.
    [locationManager startUpdatingLocation];
 
    // Y comenzamos a comprobar el ángulo para encontrar el Norte en nuestra brújula.
    [locationManager startUpdatingHeading];
 
}

Y por último, añadimos el siguiente método según explicamos a continuación:

// Meétodo llamado al haber un cambio de ángulo.
- (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading{
 
    // Convertimos a Radianes el angulo anterior y el nuevo.
 
    float oldRad =  -manager.heading.trueHeading * M_PI / 180.0f;
 
    float newRad =  -newHeading.trueHeading * M_PI / 180.0f;
 
 
    // Creamos una animación.
    CABasicAnimation *theAnimation;
 
    // Será de tipo rotación
    theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation"];
 
    // Establecemos los valores del giro.
    theAnimation.fromValue = [NSNumber numberWithFloat:oldRad];
 
    theAnimation.toValue=[NSNumber numberWithFloat:newRad];
 
    // Podemos poner una duración, pero puede resultar retrasado si ponemos tiempo.
    theAnimation.duration = 0.0;
 
 
    // Le aplicamos la animación a la imagen de la brújula.
    [compassImage.layer addAnimation:theAnimation forKey:@"animateMyRotation"];
 
    compassImage.transform = CGAffineTransformMakeRotation(newRad);
 
 
 
}

 Ahora vamos el ViewController.xib e insertamos dos UIImageView, uno para el fondo con el tamaño de la vista, y otro para la brújula, con un tamaño inferior al ancho de la vista, y que será cuadrado.

Nosotros hemos puesto 240 de ancho a la brújula.

Solo nos queda enlazar el IBOutlet con el UIImageView de la interfaz, que contiene la brújula.

Ponemos las correspondientes imágenes en cada UIImageView:

Finalizado. Ya podemos probar nuestra brújula.

Para este tutorial es necesario un dispositivo para poder probarlo. Lo lanzamos, y ponemos el iPhone o iPad de forma horizontal. Si lo vamos girando nos da el Norte como podemos ver en las imágenes.

Esperamos que os haya gustado este tutorial de brújula para iOS y os sirva en vuestros proyectos.

Cualquier duda o comentario, aquí abajo.

Saludos, Manu =D