Modifier l'interface utilisateur de navigation

À l'aide du SDK Navigation pour Android, vous pouvez 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. Vous pouvez également ajuster l'apparence visuelle de l'interface utilisateur de navigation. Consultez la page Règles pour connaître les modifications acceptables de l'interface utilisateur de navigation.

Ce document explique comment modifier l'interface utilisateur de votre carte de deux manières:

Commandes d'interface utilisateur de la carte

Les commandes de l'interface utilisateur de la carte se trouvent au-dessus de la vue de navigation. Le SDK Navigation pour Android repositionne automatiquement vos commandes personnalisées lorsque la mise en page intégrée change. Pour chaque position de la mise en page, vous pouvez définir une commande personnalisée. La commande personnalisée peut être un élément d'interface utilisateur ou, si votre conception en nécessite davantage, vous pouvez utiliser un élément ViewGroup avec plusieurs éléments d'interface utilisateur.

La méthode setCustomControl fournit les positions telles que définies dans l'énumération CustomControlPosition:

  • SECONDARY_HEADER (n'apparaît qu'en mode Portrait)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

L'image montre des exemples de différentes positions d'une commande d'interface utilisateur qui informe le conducteur de la position d'un usager.

Positions de contrôle personnalisées

Ajouter un en-tête secondaire personnalisé

Par défaut, les mises en page d'écran en mode de navigation fournissent une position pour un en-tête secondaire situé sous l'en-tête principal. Cet en-tête secondaire apparaît en cas de nécessité, par exemple en cas de guidage sur la voie. Votre application peut utiliser cette position d'en-tête secondaire de la mise en page pour le contenu personnalisé. Lorsque vous utilisez cette fonctionnalité, votre commande couvre tout contenu d'en-tête secondaire par défaut. Si votre vue de navigation comporte un arrière-plan, celui-ci reste en place, couvert par l'en-tête secondaire. Lorsque votre application supprime la commande personnalisée, tout en-tête secondaire par défaut peut apparaître à sa place.

La position d'en-tête secondaire personnalisée aligne son bord supérieur sur le bord inférieur de l'en-tête principal. Cette position n'est acceptée que dans portrait mode. Dans landscape mode, l'en-tête secondaire n'est pas disponible et la mise en page ne change pas.

  1. Créez une vue Android avec l'élément d'interface utilisateur personnalisé ou le ViewGroup.
  2. Gonflez le fichier XML ou instanciez la vue personnalisée pour obtenir une instance de la vue à ajouter en tant qu'en-tête secondaire.
  3. Utilisez NavigationView.setCustomControl ou SupportNavigationFragment.setCustomControl avec CustomControlPosition en tant que SECONDARY_HEADER.

    L'exemple ci-dessous crée un fragment et ajoute une commande personnalisée dans la position de l'en-tête secondaire.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
    

Supprimer un en-tête secondaire

Pour supprimer l'en-tête secondaire et revenir au contenu par défaut, utilisez la méthode setCustomControl.

Définissez la vue sur null pour la supprimer.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Ajouter une commande personnalisée en bas de la vue de navigation

Votre application peut spécifier une commande personnalisée alignée sur le bord inférieur de la vue de navigation. Lorsque votre application ajoute la commande personnalisée, le bouton de recentrage et le logo Google se déplacent vers le haut pour s'y adapter.

  1. Créez une vue Android avec l'élément d'interface utilisateur ou le groupe de vues que vous souhaitez ajouter.
  2. Créez la vue ou le fragment de navigation.
  3. Appelez la méthode setCustomControl sur la vue ou le fragment de navigation, puis spécifiez la commande et la position à utiliser.

L'exemple suivant montre un View personnalisé ajouté à un SupportNavigationFragment:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

Supprimer une commande personnalisée

Pour supprimer la commande personnalisée, utilisez la méthode setCustomControl et spécifiez sa position.

Définissez la vue sur null pour cette position.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Accessoires pour l'UI de carte

Le SDK Navigation pour Android fournit des accessoires d'interface utilisateur qui s'affichent pendant la navigation, semblables à ceux que l'on trouve dans l'application Google Maps pour Android. 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 répercutées lors du prochain trajet du conducteur.

Consultez la page Règles pour connaître les modifications acceptables de l'interface utilisateur de navigation.

Afficher le code

Modifier l'en-tête de navigation

Utilisez SupportNavigationFragment.setStylingOptions() ou NavigationView.setStylingOptions() pour modifier le thème de l'en-tête de navigation et l'indicateur de passage suivant qui apparaît sous l'en-tête, le cas échéant.

Vous pouvez définir les attributs suivants:

Type d'attributAttributs
Couleur d'arrière-plan
  • Mode Jour principal : couleur du jour de l'en-tête de navigation
  • Mode Jour secondaire : couleur de jour de l'indicateur de passage suivant.
  • Mode Nuit principal : couleur nocturne de l'en-tête de navigation
  • Mode Nuit secondaire : couleur nocturne de l'indicateur de passage suivant
Éléments textuels pour les instructions
  • Couleur du texte
  • Font
  • Taille de la première ligne
  • Taille de la deuxième ligne
Éléments de texte pour les étapes suivantes
  • Font
  • Couleur du texte de la valeur de distance
  • Taille du texte de la valeur de distance
  • Couleur du texte des unités de distance
  • Taille du texte des unités de distance
Icônes de manœuvre
  • Couleur de la grande icône de manœuvre
  • Couleur de la petite icône de manœuvre
Indication de voie
  • Couleur des voies recommandées

L'exemple suivant montre comment définir des options de style:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) getFragmentManager()
  .findFragmentById(R.id.navigation_fragment);

// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
  .primaryDayModeThemeColor(0xff1A237E)
  .secondaryDayModeThemeColor(0xff3F51B5)
  .primaryNightModeThemeColor(0xff212121)
  .secondaryNightModeThemeColor(0xff424242)
  .headerLargeManeuverIconColor(0xffffff00)
  .headerSmallManeuverIconColor(0xffffa500)
  .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerNextStepTextColor(0xff00ff00)
  .headerNextStepTextSize(20f)
  .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
  .headerDistanceValueTextColor(0xff00ff00)
  .headerDistanceUnitsTextColor(0xff0000ff)
  .headerDistanceValueTextSize(20f)
  .headerDistanceUnitsTextSize(18f)
  .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerInstructionsTextColor(0xffffff00)
  .headerInstructionsFirstRowTextSize(24f)
  .headerInstructionsSecondRowTextSize(20f)
  .headerGuidanceRecommendedLaneColor(0xffffa500));

Désactiver le calque de trafic

Utilisez GoogleMap.setTrafficEnabled() pour activer ou désactiver le calque de trafic sur la carte. Ce paramètre affecte les indications de densité du trafic affichées sur la carte dans son ensemble. Toutefois, cela n'affecte pas les indications de circulation sur l'itinéraire tracé par le navigateur.

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

Activer les feux de circulation et les panneaux stop

Vous pouvez activer les feux de circulation et les panneaux stop dans l'UI de la carte. Grâce à cette fonctionnalité, le conducteur peut activer l'affichage de feux de circulation ou d'icônes de panneaux stop sur son itinéraire, fournissant ainsi un meilleur contexte pour des trajets plus efficaces et précis.

Par défaut, les feux de circulation et les panneaux stop sont désactivés dans le SDK Navigation. Pour activer cette fonctionnalité, appelez DisplayOptions pour chaque fonctionnalité indépendamment.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Ajouter des repères personnalisés

Le SDK Navigation pour Android utilise désormais les API Google Maps pour les repères. Pour en savoir plus, consultez la documentation de l'API Google Maps.

Texte flottant

Vous pouvez ajouter du texte flottant n'importe où dans votre application, à condition qu'il ne couvre pas l'attribution Google. Le SDK Navigation ne permet pas d'ancrer le texte à une latitude/longitude sur la carte ou à un libellé. Pour en savoir plus, consultez la section Fenêtres d'informations.

Afficher la limitation de vitesse

Vous pouvez afficher ou masquer l'icône de limitation de vitesse par programmation. Utilisez NavigationView.setSpeedLimitIconEnabled() ou SupportNavigationFragment.setSpeedLimitIconEnabled() pour afficher ou masquer l'icône de limitation de vitesse. Lorsque cette option est activée, l'icône de limitation de vitesse s'affiche dans un coin inférieur pendant le guidage. Cette icône affiche la limitation de vitesse de la route sur laquelle le véhicule circule. Cette icône ne s'affiche que dans les zones pour lesquelles des données fiables sur les limitations de vitesse sont disponibles.

// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);

L'icône de limitation de vitesse est masquée temporairement lorsque le bouton de recentrage est affiché.

Définir le mode Nuit

Vous pouvez contrôler de manière programmatique le comportement du mode Nuit. Utilisez NavigationView.setForceNightMode() ou SupportNavigationFragment.setForceNightMode() pour activer ou désactiver le mode Nuit, ou laissez le SDK Navigation pour Android le contrôler.

  • AUTO permet au SDK Navigation de déterminer le mode approprié en fonction de la position de l'appareil et de l'heure locale.
  • FORCE_NIGHT force l'activation du mode Nuit.
  • FORCE_DAY force l'activation du mode Jour.

L'exemple suivant montre comment forcer l'activation du mode Nuit dans un fragment de navigation:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Afficher la liste de l'itinéraire

Commencez par créer la vue et ajoutez-la à votre hiérarchie.

void setupDirectionsListView() {
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

Veillez à transférer les événements de cycle de vie à DirectionsListView comme ils le sont avec NavigationView. Exemple :

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Masquer les itinéraires bis

Lorsque l'interface utilisateur devient surchargée d'informations, vous pouvez la réduire en affichant moins de routes alternatives que la route par défaut (deux) ou en n'affichant aucune alternative. Vous pouvez configurer cette option avant de récupérer les routes en appelant la méthode RoutingOptions.alternateRoutesStrategy() avec l'une des valeurs d'énumération suivantes:

Valeur d'énumérationDescription
AlternateRoutesStrategy.SHOW_ALL Par défaut. Affiche jusqu'à deux itinéraires bis.
AlternateRoutesStrategy.SHOW_ONE Affiche un itinéraire bis (le cas échéant).
AlternateRoutesStrategy.SHOW_NONE Masque les itinéraires bis.

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

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

Barre de progression du trajet

Barre de progression du trajet ajoutée à la navigation.

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 d'un trajet entier, ainsi que la destination et la position actuelle du conducteur.

Elle permet aux conducteurs d'anticiper rapidement les problèmes à venir, tels que la circulation, sans avoir à zoomer. Ils peuvent ensuite modifier l'itinéraire si nécessaire. Si le conducteur recalcule 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:

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

  • Position actuelle : position actuelle du conducteur pendant le trajet

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

  • Destination finale : la destination finale du trajet.

Activez la barre de progression du trajet en appelant la méthode setTripProgressBarEnabled() sur NavigationView ou SupportNavigationFragment. Exemple :

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);