MapKit parte 1

Posted: June 2nd, 2012 | Author: Antonio Trejo | Filed under: iOS | 4 Comments »

En este post vamos a jugar un poco con el framework de MapKit, ¿Que vamos a hacer?, para está primera parte del post de MapKit vamos a obtener nuestra ubicación, uno de los problemas que he observado en algunos desarrolladores es como conectar desde cero un app, en está app lo vamos a hacer utilizando Storyboard, realmente es muy sencillo espero que les guste.

Como primer paso vamos a generar un proyecto Empty, damos el nombre de TwitterInMaps, seleccionamos el checkbox  ARC (Automatic Reference Counting) lo cual  permitirá al compilador generar automáticamente el release de nuestros objetos .

 

Como siguiente paso vamos a observar que es lo que nos genero la plantilla, podemos ver que no existe ningún elemento *.xib (Xcode Interface Builder) tampoco tenemos storyboard, si compilamos vamos a ver una pantalla en blanco.

 

 

 

Muy bien vamos a agregar un StoryBoard a nuestro proyecto, para realizarlo vamos a buscar en nuestro menú superior del Xcode File->New File->New, en la sección de iOS seleccionar User Interface->Storyboard, seleccionamos el device family en este caso va a ser de tipo iPhone le daremos el nombre de TwitterMaps a nuestro Stroyboard veamos de nuevo nuestro Navegador de archivos del Xcode

 

Vamos a agregar un UIViewController (Escena) a nuestro  Storyboard y vamos a cambiar el bacground de su UIView, vemos del lado derecho que tiene una flechita, la cual significa que este va a ser nuestro primer controlador cargado de nuestra aplicación.

Si corremos nuestro proyecto tenemos que no muestra el background negro ¿por qué?.

Esto se debe a que necesitamos modificar nuestro AppDelegate y el plist de nuestro proyecto.

En nuestro AppDelegate vamos a eliminar el siguiente código, que lo so que hace es que genera una instancia de window, pero nosotros queremos iniciar desde el Storyboard por lo tanto no necesitamos esto.

Ahora en nuestro plist necesitamos decirle que vamos a iniciar con un StoryBoard, debemos agregar la siguiente llave, no es necesario agregar la extensión de nuestro storyboard

Main storyboard file base name (iPhone) => TwitterMaps

 Volvemos a compilar y listo, ahora ya tenemos nuestro ViewController cargado desde el Storyboard

Como siguiente paso vamos a agregar un MapView a nuestro Controlador

Si intentamos compilar tendremos problemas Houston ¿por qué?.

Bueno esto es debido a que intenta generar una instancia de tipo MapView pero no encuentra la instancia por lo tanto el app falla, entonces ¿que necesitamos hacer?

Para resolver esto necesitamos generar una herencia de UIViewController, esto se hace dando clic en File->New->file despues sección de iOS seleccionamos Objective-C class y generamos una herencia

Como siguiente paso vamos a agregar el framework de MapKit, seleccionamos nuestro proyecto y vamos a la sección de Build Phases, como siguiente paso vamos a Link Binary with Libraries y damos clic en el boton de  más, buscamos el MapKit y le damos click en Add

Ahora en nuestro archo *.pch vamos a realizar el import y con esto ya vamos  a poder utilizar las clases que MapKit nos ofrece

Como siguiente paso vamos a generar una propiedad de tipo MapKit, debemos ir al Controlador y agregar la propiedad, recuerda que al generar un @property es necesario agregar el @synthesize en la implementación, tenemos lo siguienteComo siguiente paso vamos a cambiar el Custom Class del controlador que tenemos en el Storyboard, por default tiene UIViewController, necesitamos cambiarla al nombre de nuestra controlador en este caso es TwitterViewController, con esto tendremos la capacidad de ocupar las propiedades y métodos que declarmos en este controlador

Vamos a conectar nuestro Outlet de tipo MapView que tenemos declarada en nuestro controlador, esto nos va a permitir interactuar con la vista y mediante la propiedad realizar modificaciones a está vista

Ahora si intentamos compilar nuestro App veremos el mapa en nuestra pantalla, ya por ultimo mostraremos la ubicación que viene por default en el simulador, recuerden que el Simulador no tiene GPS, por lo tanto no podremos obtener nuestra ubicación exacta a menos que se la digamos en base a la longitud y latitud.

Para poder agregar la ubicación del usuario dentro del método viewDidLoad agregamos la siguiente instrucción :

[self.mapView setShowsUserLocation:YES];

Aquí puedes descargar el código

Para el siguiente tutorial agregaremos:

- Busqueda en Twitter

- Anotaciones en el Mapa

- Un poco de Grand Central Dispatch

---