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 quels éléments et commandes d'interface utilisateur intégrés apparaissent sur la carte et les gestes que vous autorisez. Vous pouvez également modifier Apparence visuelle de l'interface utilisateur de Navigation Consultez le Page des règles pour plus d'instructions sur les modifications acceptables de l'interface utilisateur de Navigation.

Commandes d'interface utilisateur de la carte

Le SDK Navigation fournit des commandes d'interface utilisateur intégrées semblables à celles que l’on trouve 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 se reflètent immédiatement sur 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 est activé. La boussole apparaît uniquement lorsque la caméra est orientée de sorte qu'elle possède l'orientation n'est pas exactement le nord (orientation non nulle). Lorsque l'utilisateur clique sur le boussole, la caméra s'anime pour revenir à une direction de zéro (la l'orientation par défaut) et la boussole disparaît en fondu peu de temps après.

Si la navigation est activée et que le mode caméra est activé est défini sur « suivi », la boussole reste visible et vous appuyez dessus permet d'alterner entre une vue inclinée de la caméra et une vue d'ensemble.

La boussole est désactivée par défaut. Vous pouvez activer la boussole en paramétrant le Propriété compassButton de GMSUISettings en true. Cependant, vous ne pouvez pas forcer l'affichage permanent de la boussole.

mapView.settings.compassButton = true

mapView.settings.compassButton = YES;

Bouton "Ma position"

Le bouton "Ma position" apparaît uniquement dans l'angle inférieur droit de l'écran. lorsque le bouton Ma position est activé. Lorsqu'un utilisateur clique sur le bouton, la caméra s'anime pour cibler l'emplacement actuel de l'utilisateur si cet emplacement est est actuellement connue. Vous pouvez activer ce bouton en paramétrant le Propriété myLocationButton de GMSUISettings en true.

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

Bouton "Recenter" (Recentrer)

Lorsque la navigation est activée, le bouton de recentrage apparaît lorsque l'utilisateur fait défiler la page la vue de la carte et disparaît lorsque l'utilisateur appuie pour recentrer la carte. Pour autoriser le bouton de recentrage pour qu'il apparaisse, définissez la propriété recenterButtonEnabled de GMSUISettings à true. Pour empêcher l'affichage du bouton permettant de recentrer la vue, définissez De recenterButtonEnabled à false.

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

Accessoires pour l'UI de carte

Le SDK Navigation fournit des accessoires d'interface utilisateur qui apparaissent pendant la navigation, comme dans l'application Google Maps pour iOS. Vous pouvez ajuster la visibilité ou l'apparence visuelle de ces commandes décrites dans cette section. Les modifications que vous apportez ici sont répercutées prochain trajet.

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 apparaît en bas. L'en-tête de navigation indique le nom de la rue et la direction du prochain bifurcation sur l'itinéraire, ainsi que le dans la direction suivante. Le pied de page de navigation indique la durée estimée et la distance 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 de manière programmatique à l'aide des propriétés suivantes:

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

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

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

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

Vue d'en-tête de l'accessoire Navigation

Vous pouvez personnaliser votre application en remplaçant la vue d'en-tête de navigation secondaire avec votre propre vue personnalisée des accessoires. Pour ce faire, créez une vue met en œuvre le protocole GMSNavigationAccessoryView. Ce protocole comporte un Méthode requise: -heightForAccessoryViewConstrainedToSize:onMapView:. Vous êtes compte tenu de la taille maximale disponible pour votre vue sur la carte MapView donnée, et vous doit fournir la hauteur requise par la vue.

Vous pouvez ensuite transmettre cette vue à mapView en appelant setHeaderAccessoryView:. mapView anime toutes les vues actuelles, puis vos images personnalisées vue. L'en-tête de navigation doit être visible pour que votre vue personnalisée puisse l'écran.

Pour supprimer la vue accessoire personnalisée de l'en-tête, transmettez nil à setHeaderAccessoryView:

Si la taille de la vue doit changer à tout moment, vous pouvez appeler invalidateLayoutForAccessoryView:, en transmettant la vue à modifier. la taille de l'image.

Exemple

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

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)

@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 des étapes

Vous pouvez fournir des instructions détaillées dans votre application. L'exemple suivant présente une façon de procéder. Ces étapes peuvent varier la mise en œuvre.

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

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

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()
  })
  ...
}

- (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. Lorsqu'elle est activée, elle affiche une vue d'ensemble l'intégralité du trajet, ainsi que la destination la position de votre annonce.

Elle permet aux utilisateurs d'anticiper rapidement les problèmes à venir, par exemple que le trafic, sans avoir à effectuer de zoom avant. Ils peuvent alors modifier l'itinéraire nécessaires. Si l'utilisateur change d'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 pendant le trajet

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

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

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

Feux de circulation et panneaux stop

Vous pouvez activer les feux de circulation et les panneaux stop dans le mapView. Avec cette fonctionnalité, l'utilisateur peut activer l'affichage des feux de circulation ou des panneaux stop des icônes le long de leur trajet, ce qui permet d'améliorer le contexte et d'accroître des trajets 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 les paramètres GMSMapView indépendamment pour chaque option: showsTrafficLights et showsStopSigns.

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

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

Commande du compteur de vitesse

Lorsque la navigation est activée et que le mode de transport est défini sur Voiture, le SDK Navigation pour iOS affiche une commande de limitation de vitesse dans l'angle inférieur de la carte, la limitation de vitesse actuelle. Lorsque le conducteur dépasse la limitation de vitesse, le bouton se développe pour afficher un deuxième compteur de vitesse avec la vitesse actuelle du conducteur.

Vous pouvez définir des niveaux d'alerte pour modifier le format de l'affichage du compteur de vitesse Lorsque le conducteur dépasse la limitation de vitesse d'une valeur spécifiée. Par exemple : vous pouvez indiquer que la vitesse actuelle doit s'afficher en rouge lorsque le le conducteur dépasse la limite de vitesse de 8 km/h, avec un arrière-plan rouge lorsque le conducteur dépasse la limitation de vitesse de 16 km/h.

Pour afficher la commande de limitation de vitesse, définissez la propriété shouldDisplaySpeedometer de GMSUISettings à true. Pour désactiver l'affichage de la commande de limitation de vitesse, configurez De shouldDisplaySpeedometer à false.

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

Pour en savoir plus sur la configuration des alertes du compteur de vitesse, consultez l'article Configurez des 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 les Propriété showsDestinationMarkers de GMSUISettings. L'exemple suivant montre la désactivation des repères de destination.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

Fonctionnalités de l'expérience de carte

Le SDK Navigation vous permet d'effectuer pour personnaliser davantage l'expérience de navigation de vos utilisateurs. Vous modifie à votre instance lors de la prochaine mise à jour de votre application par l'utilisateur.

Désactiver les gestes par défaut sur la carte

Vous pouvez désactiver les gestes par défaut sur la carte en définissant les propriétés de GMSUISettings, 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 limitera pas l'accès programmatique à l'appareil photo paramètres.

• scrollGestures : contrôle l'activation des gestes de défilement sont désactivées. Si ces gestes sont activés, les utilisateurs peuvent balayer l'écran afin d'effectuer un panorama avec l'appareil photo.
• zoomGestures : contrôle l'activation des gestes de zoom ou désactivées. Si cette option est activée, les utilisateurs peuvent appuyer deux fois, appuyer avec deux doigts ou pincer pour zoomez vers la caméra. Remarque : Appuyer deux fois ou pincer lorsque scrollGestures peuvent effectuer un panoramique sur le point spécifié.
• tiltGestures : contrôle si les gestes d'inclinaison sont activés ou sont désactivées. 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 : contrôle l'activation des gestes de rotation ou désactivées. Si cette option est activée, les utilisateurs peuvent effectuer une rotation avec deux doigts pour faire pivoter la caméra.

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

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

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

Positionnement des commandes et des éléments de l'interface utilisateur

Vous pouvez positionner les commandes et autres éléments d'interface utilisateur par rapport à la position du l'en-tête et le 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:

/* 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

/* 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 devient surchargée d'informations trop nombreuses, vous pouvez réduire l'encombrement en affichant moins de routes alternatives que la route par défaut (deux) ; en n'affichant aucun itinéraire alternatif. Vous pouvez configurer cette option avant vous récupérez les routes en configurant GMSNavigationRoutingOptions et en définissant alternateRoutesStrategy par l'une des valeurs d'énumération suivantes:

Exemple

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

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

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