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
Ajoutez les espaces de noms suivants à :
ViewController
using MapKit; using CoreLocation; using UIKit using CoreGraphics
Ajoutez une variable d’instance
MKMapView
à la classe, ainsi qu’uneMapDelegate
instance. Nous allons créer lesMapDelegate
nouveautés suivantes :public partial class ViewController : UIViewController { MKMapView map; MapDelegate mapDelegate; ...
Dans la méthode du
LoadView
contrôleur, ajoutez-leMKMapView
et définissez-le sur laView
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 ».
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;
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;
Créez une instance de
MapDelegate
et affectez-la à l’instanceDelegate
MKMapView
. Là encore, nous allons implémenter laMapDelegate
mise en œuvre suivante :mapDelegate = new MapDelegate (); map.Delegate = mapDelegate;
À 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();
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 (); }
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
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
Avec la
ConferenceAnnotation
place, nous pouvons l’ajouter à la carte. De retour dans laViewDidLoad
méthode duViewController
, ajoutez l’annotation à la coordonnée centrale de la carte :map.AddAnnotations (new ConferenceAnnotation ("Evolve Conference", mapCenter));
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 appelAddOverlay
:// 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
Créez une classe appelée
MapDelegate
qui hériteMKMapViewDelegate
d’uneannotationId
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.
Implémentez la
GetViewForAnnotation
méthode pour renvoyer une vue pour l’utilisation de l’imageConferenceAnnotation
conference.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; }
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;
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); }); } }
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.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.