{"id":2727,"date":"2010-03-27T16:14:16","date_gmt":"2010-03-27T15:14:16","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=2727"},"modified":"2010-03-27T16:20:00","modified_gmt":"2010-03-27T15:20:00","slug":"t028-utilizzo-del-mapkit-parte-1-zoom-e-annotation-view-personalizzate","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t028-utilizzo-del-mapkit-parte-1-zoom-e-annotation-view-personalizzate\/","title":{"rendered":"T#028 – Utilizzo del MapKit (parte 1): Zoom e Annotation View personalizzate"},"content":{"rendered":"

Eccomi al mio primo tutorial su DevAPP in cui vedremo i principali elementi che ci mette a disposizione il MapKit<\/em>. In questa prima parte vedremo come zoommare sulla posizione dell’utente quando vengono acquisite le coordinate GPS e come aggiungere delle annotation view sulla nostra mappa. Premetto che io non ho l’abitudine di usare Interface Builder e che tutte le view che andremo ad utilizzare verranno create pragmaticamente.<\/p>\n

Setup<\/h4>\n

Cominciamo col creare un nuovo progetto\u00a0Window-Based <\/em>in modo che vengano automaticamente generati solamente la window e l’application delegate. Una volta fatto ci\u00f2 la prima cosa che dobbiamo fare \u00e8 importare il framework\u00a0MapKit<\/em>: facciamo click secondario sul gruppo framework in\u00a0Groups & Files<\/em>,\u00a0selezionando\u00a0Add – Existing framework<\/em> e scegliamo\u00a0MapKit.framework<\/em>. Importiamolo ora nel file\u00a0nomeprogetto_prefix.pch<\/em> che trovate nel gruppo\u00a0Other Sources<\/em> in modo che tutte le classi che andremo a creare potranno utilizzarlo. Il prefix header alla fine dovr\u00e0 essere cos\u00ec:<\/p>\n

\r\n#ifdef __OBJC__\r\n    #import <Foundation\/Foundation.h>\r\n    #import <UIKit\/UIKit.h>\r\n    #import <MapKit\/MapKit.h>\r\n#endif\r\n<\/pre>\n
Creazione della map view<\/h4>\n
A questo punto ci ritroviamo con un’applicazione pronta ad utilizzare le mappe. Creiamo ora un nuovo\u00a0UIViewController<\/em> che chiameremo\u00a0MapViewController<\/em>. Cominciamo con l’aprire il file\u00a0MapViewController.h<\/em> e modifichiamolo in modo da adottare il protocollo\u00a0MKMapViewDelegate<\/em>.<\/p>\n
\r\n@interface MapViewController : UIViewController <MKMapViewDelegate>\r\n\r\n@end\r\n<\/pre>\n
Apriamo invece ora il file\u00a0MapViewController.m<\/em> e ridefiniamo la funzione\u00a0loadView<\/em> per poter creare la nostra map view.<\/p>\n
\r\n- (void)loadView {\r\n    self.title = @\"Mappa\";\r\n    MKMapView *map= [[[MKMapView alloc] init] autorelease];\r\n    map.delegate = self;\r\n    map.showsUserLocation = YES;\r\n    self.view = map;\r\n}\r\n<\/pre>\n
In questo metodo allochiamo una nuova map view con abilitata la visualizzazione della posizione dell’utente, gli settiamo il controller stesso come delegate e visualizziamo la mappa assegnandola alla view del controller.<\/p>\n
Se ora compiliamo ed eseguiamo l’applicazione l’unica cosa che vedremo sar\u00e0 una schermata bianca (il colore di default della window). Questo perch\u00e9 non abbiamo ancora aggiunto questa vista nella finestra. Per far ci\u00f2 apriamo il file di implementazione dell’application delegate e modifichiamo la funzione\u00a0applicationDidFinishLaunching<\/em> come segue:<\/p>\n
\r\n- (void)applicationDidFinishLaunching:(UIApplication *)application {\r\n    MapViewController *rootViewController = [[[MapViewController alloc] init] autorelease];\r\n    UINavigationController navController = [[UINavigationController alloc] initWithRootViewController:rootViewController];\r\n    [window addSubview:navController.view];\r\n    [window makeKeyAndVisible];\r\n}\r\n<\/pre>\n
Quello che facciamo \u00e8 semplicemente creare un\u00a0UINavigationController<\/em> (il perch\u00e9 lo capiremo quando parleremo delle annotation) usando il nostro\u00a0MapViewController<\/em> come root controller e visualizzare la sua view nella finestra.<\/p>\n
Se ora compiliamo vedremo la mappa e, dopo un breve lasso di tempo, il puntino blu della nostra posizione a Cupertino (se siamo sul simulatore).<\/p>\n
<\/p>\n
\"Immagine<\/p>\n
<\/center><\/p>\n
Zoommiamo sulla posizione dell’utente<\/h4>\n
Per far questo dobbiamo ridefinire un metodo del protocollo\u00a0MKMapViewDelegate<\/em>. Riapriamo quindi il file\u00a0MapViewController<\/em> e aggiungiamo il seguente metodo:<\/p>\n
\r\n- (void)mapView:(MKMapView *)mapView didAddAnnotationViews:(NSArray *)views {\r\n    for (MKAnnotationView *annotationView in views) {\r\n        if (annotationView.annotation == mapView.userLocation) {\r\n            MKCoordinateSpan span = MKCoordinateSpanMake(0.3, 0.3);\r\n            MKCoordinateRegion region = MKCoordinateRegionMake(mapView.userLocation.coordinate, span);\r\n            [mapView setRegion:region animated:YES];\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
Questo metodo viene chiamato ogniqualvolta viene aggiunta una annotation alla mappa e quindi anche quando viene aggiunto il pallino blu relativo alla posizione dell’utente. Il codice scritto non fa altro che cercare tra le annotation view aggiunte se \u00e8 presente quella relativa alla posizione dell’utente (mapView.userLocation<\/em>). La regione che deve visualizzare la mappa viene settata in modo che in modo che sia centrata sulle coordinate dell’utente e in modo che la distanza nord-sud o ovest-est (dipende dal fatto che la mappa sia in landscape o portrait) sia di 0.3 gradi (stando alla documentazione 1 grado \u00e8 circa 111km). Con la funzione\u00a0setRegion:animated <\/em>modifichiamo l’area visualizzata dalla mappa tramite un’animazione.<\/p>\n
Se ora compiliamo ed eseguiamo l’applicativo vediamo che, quando viene acquisita la posizione dell’utente, la view viene modificata tramite un’animazione.<\/p>\n
<\/p>\n
\"Immagine<\/p>\n
<\/center><\/p>\n
Aggiunta di una annotation view personalizzata<\/h4>\n
Innanzitutto dobbiamo avere una annotation (ovvero un oggetto conforme al protocollo\u00a0MKAnnotation<\/em>)\u00a0da visualizzare. Creiamo perci\u00f2 una nuova classe (io l’ho chiamata\u00a0GoogleHQAnnotation<\/em>) che estende\u00a0NSObject<\/em> a cui facciamo adottare il protocollo MKAnnotation<\/em>. Per esempio io ho creato l’annotazione relativa alla sede di Google a Mountain View in California. Modifichiamo il file .h<\/em> in modo di avere il seguente codice:<\/p>\n
\r\n@interface GoogleHQAnnotation : NSObject <MKAnnotation>  {\r\n\tCLLocationCoordinate2D coordinate;\r\n}\r\n\r\n@end\r\n<\/pre>\n
L’attributo\u00a0coordinate<\/em> \u00e8 un attributo richiesto dal protocollo\u00a0MKAnnotation<\/em> e siamo quindi obbligati a dichiararlo. Passiamo ora al file di implementazione:<\/p>\n
\r\n#import \"GoogleHQAnnotation.h\"\r\n\r\n@implementation GoogleHQAnnotation\r\n\r\n- (id)init {\r\n    coordinate.longitude = -122.084095;\r\n    coordinate.latitude = 37.422006;\r\n    return [super init];\r\n}\r\n\r\n@synthesize coordinate;\r\n\r\n- (NSString *)title {\r\n    return @\"Google HQ\";\r\n}\r\n\r\n- (NSString *)subtitle {\r\n    return @\"(650) 253-0000\u200e\";\r\n}\r\n\r\n@end\r\n<\/pre>\n
Si tratta di un semplice file di implementazione dove nella ridefinizione del metodo\u00a0init<\/em> ci limitiamo a settare le coordinate che puntano la sede di Google e che implementa i metodi richiesti dal protocollo (ovvero\u00a0title<\/em>,\u00a0subtitle<\/em> e\u00a0coordinate<\/em>). L’unica cosa strana \u00e8 che abbiamo utilizzato la direttiva\u00a0@synthesize<\/em> senza aver dichiarato la property nel file di interfaccia. Questo non \u00e8 un errore in quanto, adottando il protocollo\u00a0MkAnnotation<\/em> ereditiamo pure la propriet\u00e0 dichiarata come\u00a0@property (nonatomic, readonly) CLLocationCoordinate2D coordinate<\/em> in esso definita.<\/p>\n
Torniamo al\u00a0MapViewController<\/em>. Dobbiamo aggiungere l’annotazione alla map view. Possiamo quindi aggiungerla, per esempio, in fase di creazione nella\u00a0loadView<\/em> andando ad aggiungere la seguente riga di codice alla fine della funzione:<\/p>\n
\r\n[map addAnnotation:[[[GoogleHQAnnotation alloc] init] autorelease]];\r\n<\/pre>\n
ricordandoci di importare il file .h<\/em> della classe\u00a0GoogleHQAnnotation<\/em>.<\/p>\n
A questo punto se eseguiamo l’applicativo gi\u00e0 verr\u00e0 creata la annotation view di default, ma noi ne vogliamo una personalizzata. Dobbiamo quindi ridefinire il metodo\u00a0mapView:viewForAnnotation:<\/em> ereditato dal protocollo\u00a0MKMapViewDelegate<\/em>. Questo metodo \u00e8 quello a cui \u00e8 delegata la creazione delle annotation view di ogni annotation. Lo implementeremo nel seguente modo:<\/p>\n
\r\n- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id )annotation {\r\n    if (annotation == mapView.userLocation) {\r\n        return nil;\r\n    }\r\n    MKPinAnnotationView *pinView = [[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@\"Pin\"] autorelease];\r\n    pinView.pinColor = MKPinAnnotationColorPurple;\r\n    pinView.canShowCallout = YES;\r\n    pinView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];\r\n    pinView.animatesDrop = YES;\r\n    return pinView;\r\n}\r\n<\/pre>\n
Analizziamo ora il codice scritto. Nel blocco\u00a0if<\/em> controlliamo se l’annotazione di cui dobbiamo creare la view \u00e8 quella relativa alla posizione dell’utente. In tal caso diamo come valore di ritorno\u00a0nil<\/em> che serve a far capire al sistema che per quella annotazione deve usare la annotation view di default. In caso contrario creiamo un pin da visualizzare avente le seguenti caratteristiche:<\/p>\n