Modifier l'interface utilisateur de navigation

Le SDK Navigation pour iOS vous permet de modifier l'expérience utilisateur avec votre carte en déterminant quelles commandes et certains éléments de l'interface utilisateur intégrés apparaissent sur la carte, et quels sont les gestes que vous autorisez. Vous pouvez également modifier l'apparence visuelle de l'UI de navigation. Reportez-vous à la page Règles pour connaître les modifications acceptables de l'interface utilisateur Navigation.

Commandes d'UI de carte

Le SDK Navigation fournit des commandes d'interface utilisateur intégrées semblables à celles disponibles dans l'application Google Maps pour iOS. Vous pouvez activer/désactiver la visibilité de ces commandes à l'aide de la classe GMSUISettings. Les modifications que vous apportez à cette classe sont immédiatement répercutées sur la carte.

Remarque :Chaque commande a une position prédéterminée par rapport au bord de la carte. Vous pouvez éloigner les commandes des bords en marquant la marge extérieure de la carte.

Boussole

Le SDK Navigation fournit une image de boussole qui apparaît dans l'angle supérieur droit de la carte dans certaines circonstances et uniquement lorsqu'elle est activée. La boussole apparaît uniquement lorsque la caméra est orientée de sorte que son orientation n'est pas exacte vers le nord (orientation non nulle). Lorsque l'utilisateur clique sur la boussole, la caméra s'anime pour revenir à une direction de zéro (orientation par défaut), et la boussole disparaît progressivement peu de temps après.

Si la navigation est activée et que le mode caméra est défini sur "suivi", la boussole reste visible et un appui sur la boussole permet de basculer entre les perspectives de caméra inclinées et d'aperçu.

La boussole est désactivée par défaut. Vous pouvez activer la boussole en définissant la propriété compassButton de GMSUISettings sur YES. Toutefois, vous ne pouvez pas forcer l'affichage permanent de la boussole.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Bouton "Ma position"

Le bouton "Ma position" apparaît en bas à droite de l'écran uniquement lorsque le bouton "Ma position" est activé. Lorsqu'un utilisateur clique sur le bouton, la caméra s'anime pour se concentrer sur la position actuelle de l'utilisateur (si celle-ci est connue). Vous pouvez activer le bouton en définissant la propriété myLocationButton de GMSUISettings sur YES.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Bouton de recentrage

Lorsque la navigation est activée, le bouton de recentrage apparaît lorsque l'utilisateur fait défiler la vue de la carte et disparaît lorsqu'il appuie pour recentrer la carte. Pour autoriser l'affichage du bouton de recentrage, définissez la propriété recenterButtonEnabled de GMSUISettings sur YES. Pour empêcher le bouton de recentrage d'apparaître, définissez recenterButtonEnabled sur NO.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Accessoires d'UI de carte

Le SDK Navigation fournit des accessoires d'interface utilisateur qui, pendant la navigation, sont semblables à ceux disponibles dans l'application Google Maps pour iOS. Vous pouvez ajuster la visibilité ou l'apparence visuelle de ces commandes comme décrit dans cette section. Les modifications que vous apportez ici sont prises en compte lors du prochain trajet du conducteur.

En-tête et pied de page de navigation

Pendant la navigation, l'en-tête de navigation apparaît en haut de l'écran et le pied de page de navigation en bas. L'en-tête de navigation indique le nom de la rue et la direction du prochain virage sur l'itinéraire, ainsi que le sens du virage suivant. Le pied de page de navigation affiche l'heure et la distance estimées jusqu'à la destination, ainsi que l'heure d'arrivée estimée.

Vous pouvez activer ou désactiver la visibilité de l'en-tête et du pied de page de navigation, et définir ses couleurs par programmation à l'aide des propriétés suivantes:

• navigationHeaderEnabled : contrôle si l'en-tête de navigation est visible (par défaut, true).
• navigationFooterEnabled : contrôle si le pied de page de navigation est visible (par défaut, true).
• navigationHeaderPrimaryBackgroundColor : définit la couleur d'arrière-plan principale de l'en-tête de navigation.
• navigationHeaderSecondaryBackgroundColor : définit la couleur d'arrière-plan secondaire de l'en-tête de navigation.

L'exemple de code suivant montre comment activer la visibilité pour l'en-tête et le pied de page, puis définir navigationHeaderPrimaryBackgroundColor sur bleu et navigationHeaderSecondaryBackgroundColor sur rouge.

Swift

mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red

Objective-C

mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];

Vue de l'en-tête de l'accessoire de navigation

Vous pouvez personnaliser votre application en remplaçant l'en-tête de navigation secondaire par votre propre affichage d'accessoires personnalisé. Pour ce faire, créez une vue qui implémente le protocole GMSNavigationAccessoryView. Ce protocole comporte une méthode obligatoire: -heightForAccessoryViewConstrainedToSize:onMapView:. Vous disposez de la taille maximale disponible pour votre vue sur la vue mapView donnée, et vous devez indiquer la hauteur requise par cette vue.

Vous pouvez ensuite transmettre cette vue à la mapView en appelant setHeaderAccessoryView:. La mapView anime toutes les vues actuelles, puis s'anime dans votre vue personnalisée. L'en-tête de navigation doit être visible pour que votre vue personnalisée puisse s'afficher.

Remarque :Sur certains smartphones, la vue de la carte peut être trop courte en mode Paysage, et votre vue personnalisée est masquée.

Pour supprimer la vue d'accessoires d'en-tête personnalisé, transmettez nil à setHeaderAccessoryView:.

Si la taille de votre vue doit changer à tout moment, vous pouvez appeler invalidateLayoutForAccessoryView: en transmettant la vue concernée.

Exemple

L'exemple de code suivant illustre une vue personnalisée qui implémente le protocole GMSNavigationAccessoryView. Cette vue personnalisée est ensuite utilisée pour définir une vue personnalisée des accessoires d'en-tête de navigation.

Swift

class MyCustomView: UIView, GMSNavigationAccessoryView {
…
  func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
    // viewHeight gets calculated as the height your view needs.
    return viewHeight
  }
…
}

let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)

// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)

// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)

Objective-C

@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end

@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
  // viewHeight gets calculated as the height your view needs.
  return viewHeight;
}
…
@end

MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];

// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];

// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];

Liste d'itinéraires

Vous pouvez fournir des instructions détaillées dans votre application. L'exemple suivant montre une façon de procéder. Ces étapes peuvent varier en fonction de votre propre implémentation.

1. Activez un bouton de point d'entrée une fois que setDestinations sur le GMSNavigator (navigateur) a abouti et que guidanceActive a été activé sur le navigateur.
2. Lorsqu'un utilisateur appuie sur le bouton du point d'entrée, créez un GMSNavigationDirectionsListController (contrôleur) avec le navigateur associé à l'élément GMSMapView (mapView).
3. Ajoutez le contrôleur à une instance de UIViewController (contrôleur de vue), puis ajoutez directionsListView en tant que sous-vue du contrôleur de vue. Les méthodes reloadData et invalidateLayout du contrôleur doivent être appelées comme vous le feriez avec une UICollectionView.
4. Transférez le contrôleur de vue dans la hiérarchie des contrôleurs de vue de l'application.

Remarques:

• La liste des itinéraires n'est pas destinée à être réutilisée et doit être recréée pour chaque session de navigation.
• Le contrôleur ne contient qu'une référence faible au navigateur.
• Pour un exemple complet, reportez-vous à l'application de démonstration fournie dans le package téléchargé mentionné dans la section Configurer votre projet.

L'exemple de code suivant montre comment ajouter un DirectionsListViewController.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  // Add the directionsListView to the host view controller's view.
  let directionsListView = directionsListController.directionsListView
  directionsListView.frame = self.view.frame
  self.view.addSubview(directionsListView)
  directionsListView.translatesAutoresizingMaskIntoConstraints = false
  directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
  directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
  directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
  directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
  ...
}

override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  // Ensure data is fresh when the view appears.
  directionsListController.reloadData()
  ...
}

override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
  super.willTransition(to: newCollection, with: coordinator)
  // Invalidate the layout during rotation.
  coordinator.animate(alongsideTransition: {_ in
    self.directionsListController.invalidateLayout()
  })
  ...
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Add the directionsListView to the host view controller's view.
  UIView *directionsListView = _directionsListController.directionsListView;
  directionsListView.frame = self.view.bounds;
  [self.view addSubview:directionsListView];
  directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
  [directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
  [directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
  [directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
  [directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
  ...
}

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  // Ensure data is fresh when the view appears.
  [_directionsListController reloadData];
  ...
}

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
              withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
  void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
      ^void(id <UIViewControllerTransitionCoordinatorContext>context) {
    [_directionsListController invalidateLayout];
  };
  // Invalidate the layout during rotation.
  [coordinator animateAlongsideTransition:animationBlock
                               completion:nil];
  ...
}

...

Barre de progression du trajet

La barre de progression du trajet est une barre verticale qui apparaît sur le bord droit de la carte au début de la navigation. Lorsque cette option est activée, elle affiche un aperçu de l'intégralité du trajet, ainsi que la destination du conducteur et sa position actuelle.

Cela permet aux conducteurs d'anticiper rapidement les problèmes à venir, tels que les embouteillages, sans avoir à zoomer. Ils peuvent ensuite modifier l'itinéraire si nécessaire. Si le conducteur modifie l'itinéraire, la barre de progression est réinitialisée comme si un nouveau trajet avait commencé à partir de ce point.

La barre de progression du trajet affiche les indicateurs d'état suivants:

• État du trafic : état du trafic à venir.

• Position actuelle : position actuelle du conducteur pour le trajet.

• Itinéraire écoulé : la partie du trajet écoulée.

Activez la barre de progression du trajet en définissant la propriété navigationTripProgressBarEnabled dans GMSUISettings.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Feu de circulation et panneaux stop

Vous pouvez activer les feux de circulation et les panneaux stop dans la mapView. Cette fonctionnalité permet au conducteur d'activer l'affichage des icônes de feux de circulation ou de panneaux d'arrêt sur son itinéraire, offrant ainsi un meilleur contexte pour des trajets plus efficaces et plus précis.

Par défaut, les feux de circulation et les panneaux stop sont désactivés dans le SDK Navigation pour iOS. Pour activer cette fonctionnalité, appelez indépendamment les paramètres GMSMapView de chaque option : showsTrafficLights et showsStopSigns.

Swift

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

Objective-C

mapView.settings.showsTrafficLights = true;
mapView.settings.showsStopSigns = true;

Commande de compteur de vitesse

Lorsque la navigation est activée, le SDK Navigation pour iOS affiche une commande de limitation de vitesse dans l'angle inférieur de la carte, qui indique la limitation de vitesse actuelle. Lorsque le conducteur dépasse la limite de vitesse, la commande se développe pour afficher un second compteur de vitesse indiquant sa vitesse actuelle.

Vous pouvez définir des niveaux d'alerte pour modifier le format d'affichage du compteur de vitesse lorsque le conducteur dépasse la limite de vitesse d'une valeur spécifiée. Par exemple, vous pouvez spécifier que la vitesse actuelle s'affiche en rouge lorsque le conducteur dépasse la limite de vitesse de 8 km/h, et avec un arrière-plan rouge lorsqu'il la dépasse de 10 mph.

Pour afficher la commande de limitation de vitesse, définissez la propriété shouldDisplaySpeedometer de GMSUISettings sur YES. Pour désactiver l'affichage de la commande de limitation de vitesse, définissez shouldDisplaySpeedometer sur NO.

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Pour en savoir plus sur la définition d'alertes pour le compteur de vitesse, consultez Configurer les alertes de compteur de vitesse.

Repères de destination

Vous pouvez afficher ou masquer les repères de destination d'un itinéraire donné en définissant la propriété showsDestinationMarkers de GMSUISettings. L'exemple suivant montre comment désactiver les repères de destination.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Remarque :Vous pouvez spécifier une image personnalisée en tant que repère, mais le SDK ne permet actuellement pas d'ajouter des libellés textuels à ces images. Pour en savoir plus, consultez Repères.

Fonctionnalités de l'expérience Maps

Le SDK Navigation vous permet de personnaliser davantage l'expérience de navigation de vos utilisateurs. Les modifications que vous apportez à votre instance sont répercutées lors de la prochaine mise à jour du pilote de votre application.

Désactiver les gestes par défaut sur les cartes

Vous pouvez désactiver les gestes par défaut sur la carte en définissant les propriétés de la classe GMSUISettings, qui est disponible en tant que propriété de GMSMapView. Les gestes suivants peuvent être activés et désactivés par programmation. Notez que la désactivation du geste ne limite pas l'accès programmatique aux paramètres de l'appareil photo.

• scrollGestures : détermine si les gestes de défilement sont activés ou désactivés. Si ces gestes sont activés, les utilisateurs peuvent balayer l'écran afin d'effectuer un panorama avec l'appareil photo.
• zoomGestures : contrôle si les gestes de zoom sont activés ou désactivés. Si cette option est activée, les utilisateurs peuvent appuyer deux fois, appuyer avec deux doigts ou pincer pour zoomer sur la caméra. Notez qu'un double appui ou pincement lorsque scrollGestures est activé peut faire pivoter la caméra jusqu'au point spécifié.
• tiltGestures : détermine si les gestes d'inclinaison sont activés ou désactivés. Si cette option est activée, les utilisateurs peuvent balayer l'écran vers le haut ou vers le bas avec deux doigts pour incliner la caméra.
• rotateGestures : détermine si les gestes de rotation sont activés ou désactivés. Si cette option est activée, les utilisateurs peuvent effectuer un geste de rotation à deux doigts pour faire pivoter la caméra.

Dans cet exemple, les gestes de panoramique et de zoom ont été désactivés.

Swift

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

Objective-C

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

Commandes de position et éléments d'interface utilisateur

Vous pouvez positionner les commandes et d'autres éléments d'interface utilisateur par rapport à la position de l'en-tête et du pied de page de navigation à l'aide des propriétés suivantes:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

L'exemple de code suivant montre comment utiliser les guides de mise en page pour positionner une paire de libellés dans la vue plan:

Swift

/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true

/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true

Objective-C

/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
    constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;

/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
    constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;

Masquer les itinéraires bis

Lorsque l'interface utilisateur est encombrée d'informations trop nombreuses, vous pouvez réduire l'encombrement en affichant moins d'itinéraires bis que le paramètre par défaut (deux) ou en n'affichant aucun autre itinéraire. Vous pouvez configurer cette option avant de récupérer les routes en configurant GMSNavigationRoutingOptions et en définissant alternateRoutesStrategy avec l'une des valeurs d'énumération suivantes:

Valeur d'énumération	Description
GMSNavigationAlternativeRoutesStrategyAll	Par défaut. Affiche jusqu'à deux itinéraires bis.
GMSNavigationAlternativeRoutesStrategyOne	Affiche un itinéraire bis (le cas échéant).
GMSNavigationAlternateRoutesStrategyNone	Masque les itinéraires bis.

Exemple

L'exemple de code suivant montre comment masquer complètement les itinéraires bis.

Swift

let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
                           routingOptions: routingOptions) { routeStatus in
  ...
}

Objective-C

GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
            routingOptions:routingOptions
                  callback:^(GMSRouteStatus routeStatus){...}];

Avertissement :Cette fonctionnalité est actuellement incompatible avec la préférence de routage de la plus courte durée. L'utilisation simultanée de ces deux fonctionnalités peut entraîner un comportement inattendu.