Annotations et superpositions dans Xamarin.iOS

L’application que nous allons générer dans cette procédure pas à pas est illustrée ci-dessous :

Commençons par créer un projet vide iOS et lui donner un nom pertinent. Nous allons commencer par ajouter du code à notre contrôleur de vue pour afficher MapView, puis créer de nouvelles classes pour notre MapDelegate et les annotations personnalisées. Suivez les étapes ci-dessous pour y parvenir :

ViewController

1. Ajoutez les espaces de noms suivants à :ViewController

   using MapKit;
   using CoreLocation;
   using UIKit
   using CoreGraphics
   

2. Ajoutez une variable d’instance MKMapView à la classe, ainsi qu’une MapDelegate instance. Nous allons créer les MapDelegate nouveautés suivantes :

   public partial class ViewController : UIViewController
   {
       MKMapView map;
       MapDelegate mapDelegate;
       ...
   

3. Dans la méthode du LoadView contrôleur, ajoutez-le MKMapView et définissez-le sur la View propriété du contrôleur :

   public override void LoadView ()
   {
       map = new MKMapView (UIScreen.MainScreen.Bounds);
       View = map;
   }
   

   Ensuite, nous allons ajouter du code pour initialiser la carte dans la méthode « ViewDidLoad ».

4. Dans ViewDidLoad ajouter du code pour définir le type de carte, affichez l’emplacement de l’utilisateur et autorisez le zoom et le panoramique :

   // change map type, show user location and allow zooming and panning
   map.MapType = MKMapType.Standard;
   map.ShowsUserLocation = true;
   map.ZoomEnabled = true;
   map.ScrollEnabled = true;
   
   

5. Ensuite, ajoutez du code pour centrer la carte et définissez sa région :

   double lat = 30.2652233534254;
   double lon = -97.73815460962083;
   CLLocationCoordinate2D mapCenter = new CLLocationCoordinate2D (lat, lon);
   MKCoordinateRegion mapRegion = MKCoordinateRegion.FromDistance (mapCenter, 100, 100);
   map.CenterCoordinate = mapCenter;
   map.Region = mapRegion;
   
   

6. Créez une instance de MapDelegate et affectez-la à l’instance DelegateMKMapView. Là encore, nous allons implémenter la MapDelegate mise en œuvre suivante :

   mapDelegate = new MapDelegate ();
   map.Delegate = mapDelegate;
   

7. À partir d’iOS 8, vous devez demander à votre utilisateur l’autorisation d’utiliser son emplacement. Nous allons donc l’ajouter à notre exemple. Tout d’abord, définissez une variable au niveau de CLLocationManager la classe :

   CLLocationManager locationManager = new CLLocationManager();
   

8. Dans la ViewDidLoad méthode, nous voulons case activée si l’appareil exécutant l’application utilise iOS 8 et s’il s’agit de demander une autorisation lorsque l’application est en cours d’utilisation :

   if (UIDevice.CurrentDevice.CheckSystemVersion(8,0)){
       locationManager.RequestWhenInUseAuthorization ();
   }
   

9. Enfin, nous devons modifier le fichier Info.plist pour informer les utilisateurs de la raison de la demande de leur emplacement. Dans le menu Source de l’Info.plist, ajoutez la clé suivante :

   NSLocationWhenInUseUsageDescription

   et chaîne :

   Maps Walkthrough Docs Sample.

ConferenceAnnotation.cs – Classe A pour les annotations personnalisées

1. Nous allons utiliser une classe personnalisée pour l’annotation appelée ConferenceAnnotation. Ajoutez la classe suivante au projet :

   using System;
   using CoreLocation;
   using MapKit;
   
   namespace MapsWalkthrough
   {
       public class ConferenceAnnotation : MKAnnotation
       {
           string title;
           CLLocationCoordinate2D coord;
   
           public ConferenceAnnotation (string title,
           CLLocationCoordinate2D coord)
           {
               this.title = title;
               this.coord = coord;
           }
   
           public override string Title {
               get {
                   return title;
               }
           }
   
           public override CLLocationCoordinate2D Coordinate {
               get {
                   return coord;
               }
           }
       }
   }
   

ViewController - Ajout de l’annotation et de la superposition

1. Avec la ConferenceAnnotation place, nous pouvons l’ajouter à la carte. De retour dans la ViewDidLoad méthode du ViewController, ajoutez l’annotation à la coordonnée centrale de la carte :

   map.AddAnnotations (new ConferenceAnnotation ("Evolve Conference", mapCenter));
   

2. Nous voulons également avoir une superposition de l’hôtel. Ajoutez le code suivant pour créer les MKPolygon coordonnées de l’hôtel fourni et ajoutez-le à la carte par appel AddOverlay:

   // add an overlay of the hotel
   MKPolygon hotelOverlay = MKPolygon.FromCoordinates(
       new CLLocationCoordinate2D[]{
       new CLLocationCoordinate2D(30.2649977168594, -97.73863627705),
       new CLLocationCoordinate2D(30.2648461170005, -97.7381627734755),
       new CLLocationCoordinate2D(30.2648355402574, -97.7381750192576),
       new CLLocationCoordinate2D(30.2647791309417, -97.7379872505988),
       new CLLocationCoordinate2D(30.2654525150319, -97.7377341711021),
       new CLLocationCoordinate2D(30.2654807195004, -97.7377994819399),
       new CLLocationCoordinate2D(30.2655089239607, -97.7377994819399),
       new CLLocationCoordinate2D(30.2656428950368, -97.738346460207),
       new CLLocationCoordinate2D(30.2650364981811, -97.7385709662122),
       new CLLocationCoordinate2D(30.2650470749025, -97.7386199493406)
   });
   
   map.AddOverlay (hotelOverlay);
   

Cela termine le code dans ViewDidLoad. Nous devons maintenant implémenter notre MapDelegate classe pour gérer la création des vues d’annotation et de superposition respectivement.

MapDelegate

1. Créez une classe appelée MapDelegate qui hérite MKMapViewDelegate d’une annotationId variable à utiliser comme identificateur de réutilisation pour l’annotation :

   class MapDelegate : MKMapViewDelegate
   {
       static string annotationId = "ConferenceAnnotation";
       ...
   }
   

   Nous n’avons qu’une seule annotation ici pour que le code de réutilisation ne soit pas strictement nécessaire, mais il est recommandé de l’inclure.

2. Implémentez la GetViewForAnnotation méthode pour renvoyer une vue pour l’utilisation de l’image ConferenceAnnotationconference.png incluse dans cette procédure pas à pas :

   public override MKAnnotationView GetViewForAnnotation (MKMapView mapView, NSObject annotation)
   {
       MKAnnotationView annotationView = null;
   
       if (annotation is MKUserLocation)
           return null;
   
       if (annotation is ConferenceAnnotation) {
   
           // show conference annotation
           annotationView = mapView.DequeueReusableAnnotation (annotationId);
   
           if (annotationView == null)
               annotationView = new MKAnnotationView (annotation, annotationId);
   
           annotationView.Image = UIImage.FromFile ("images/conference.png");
           annotationView.CanShowCallout = true;
       }
   
       return annotationView;
   }
   

3. Lorsque l’utilisateur appuie sur l’annotation, nous voulons afficher une image montrant la ville d’Austin. Ajoutez les variables suivantes à l’image MapDelegate et à la vue pour l’afficher :

   UIImageView venueView;
   UIImage venueImage;
   

4. Ensuite, pour afficher l’image lorsque l’annotation est tapée, implémentez la DidSelectAnnotation méthode comme suit :

   public override void DidSelectAnnotationView (MKMapView mapView, MKAnnotationView view)
   {
       // show an image view when the conference annotation view is selected
       if (view.Annotation is ConferenceAnnotation) {
   
           venueView = new UIImageView ();
           venueView.ContentMode = UIViewContentMode.ScaleAspectFit;
           venueImage = UIImage.FromFile ("image/venue.png");
           venueView.Image = venueImage;
           view.AddSubview (venueView);
   
           UIView.Animate (0.4, () => {
           venueView.Frame = new CGRect (-75, -75, 200, 200); });
       }
   }
   

5. Pour masquer l’image lorsque l’utilisateur désélectionne l’annotation en appuyant n’importe où sur la carte, implémentez la DidDeselectAnnotationView méthode comme suit :

   public override void DidDeselectAnnotationView (MKMapView mapView, MKAnnotationView view)
   {
       // remove the image view when the conference annotation is deselected
       if (view.Annotation is ConferenceAnnotation) {
   
           venueView.RemoveFromSuperview ();
           venueView.Dispose ();
           venueView = null;
       }
   }
   

   Nous avons maintenant le code de l’annotation en place. Tout ce qui est laissé est d’ajouter du code à la MapDelegate création de la vue pour la superposition de l’hôtel.

6. Ajoutez l’implémentation GetViewForOverlay suivante à :MapDelegate

   public override MKOverlayView GetViewForOverlay (MKMapView mapView, NSObject overlay)
   {
       // return a view for the polygon
       MKPolygon polygon = overlay as MKPolygon;
       MKPolygonView polygonView = new MKPolygonView (polygon);
       polygonView.FillColor = UIColor.Blue;
       polygonView.StrokeColor = UIColor.Red;
       return polygonView;
   }
   

Exécutez l’application. Nous avons maintenant une carte interactive avec une annotation personnalisée et une superposition ! Appuyez sur l’annotation et l’image d’Austin s’affiche, comme indiqué ci-dessous :

Résumé

Dans cet article, nous avons examiné comment ajouter une annotation à une carte, ainsi que comment ajouter une superposition pour un polygone spécifié. Nous avons également montré comment ajouter la prise en charge tactile à l’annotation pour animer une image sur une carte.

Liens associés

• Cartes iOS