À 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 sur la carte. Vous pouvez également ajuster l'apparence visuelle de l'interface utilisateur de navigation. Recommander accédez à la page Règles des consignes sur 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. La
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 seule commande personnalisée. La commande personnalisée peut être un élément d'interface utilisateur ou, si votre conception
nécessite plus d'éléments, vous pouvez utiliser un ViewGroup
avec plusieurs éléments d'interface utilisateur.
Le setCustomControl
méthode
fournit les positions telles que définies dans le CustomControlPosition
enum:
SECONDARY_HEADER
(n'apparaît qu'en mode Portrait)BOTTOM_START_BELOW
BOTTOM_END_BELOW
Les images ci-dessous illustrent des exemples de différentes positions d'une commande d'interface utilisateur. qui informent le chauffeur de VTC de la position du passager lors d'un trajet.
Ajouter un en-tête secondaire personnalisé
Par défaut, les dispositions d'écran en mode de navigation fournissent la position d'un élément situé sous l'en-tête principal. Cet en-tête secondaire apparaît lorsque nécessaires, comme les indications de voie. Votre application peut utiliser cet en-tête secondaire la position de la mise en page pour le contenu personnalisé. Lorsque vous utilisez cette fonctionnalité, couvre tout contenu d'en-tête secondaire par défaut. Si la vue de navigation comporte un arrière-plan, cet arrière-plan 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
le changement.
- Créer une vue Android avec l'élément d'interface utilisateur personnalisé ou le ViewGroup.
- Gonfler le fichier XML ou instancier la vue personnalisée pour obtenir une instance de à ajouter comme en-tête secondaire.
Utiliser
NavigationView.setCustomControl
ouSupportNavigationFragment.setCustomControl
avec CustomControlPosition SECONDAIRE_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 de navigation. Lorsque votre application ajoute la commande personnalisée, le bouton de recentrage et le logo Google se déplace vers le haut pour l’adapter.
- Créer une vue Android avec l'élément d'interface utilisateur ou le groupe de vues que vous souhaitez ajouter.
- Créez la vue ou le fragment de navigation.
- Appelez la méthode
setCustomControl
sur la vue ou le fragment de navigation. spécifiez la commande et la position à utiliser.
L'exemple suivant montre un élément View
personnalisé ajouté à une
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 la
à l'emplacement de la commande à supprimer.
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 apparaissent pendant similaire à celle de l'application Google Maps pour Android. Vous pouvez ajuster la visibilité ou l'apparence visuelle de ces commandes décrites dans cette section. Les modifications apportées ici seront répercutées lors une session de navigation.
Consultez les Règles pour obtenir des consignes sur 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 prochain virage qui
apparaît sous l'en-tête lorsqu'il est disponible.
Vous pouvez définir les attributs suivants:
Type d'attribut | Attributs |
---|---|
Couleur de l'arrière-plan |
|
Éléments textuels pour les instructions |
|
Éléments de texte pour les étapes suivantes |
|
Icônes de manœuvre |
|
Indication de voie |
|
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 a une incidence sur
les indications de densité du trafic affichées sur la carte dans son ensemble. Toutefois, elle ne permet pas
affectent 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é, l'utilisateur peut activer l'affichage de feux de circulation ou d'icônes de panneaux stop l'itinéraire détaillé, ce qui améliore la précision et l'efficacité des trajets.
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 caractéristique
de manière indépendante.
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. Accédez au Documentation de l'API Google Maps pour en savoir plus.
Texte flottant
Vous pouvez ajouter du texte flottant n'importe où dans votre application, à condition qu'il ne recouvre pas Attribution Google. Le SDK Navigation ne prend pas en charge l'ancrage du texte à une latitude/longitude sur la carte ou à un libellé. Accédez à Infos Windows pour obtenir d'autres des informations.
Afficher la limitation de vitesse
Vous pouvez afficher ou masquer l'icône de limitation de vitesse de manière programmatique. 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 indique la limitation de vitesse.
de la route sur laquelle le véhicule circule. L'icône ne s'affiche que dans les zones géographiques
lorsque 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 laisser le SDK Navigation pour Android
le contrôler.
AUTO
permet au SDK Navigation de déterminer en fonction de l'emplacement 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 menu de navigation fragment:
// 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 à transmettre les événements de cycle de vie à DirectionsListView
comme vous le feriez
sont associés à NavigationView
. Exemple :
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
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 appelant la méthode RoutingOptions.alternateRoutesStrategy()
.
avec l'une des valeurs d'énumération suivantes:
Valeur d'énumération | Description |
---|---|
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
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 et la position actuelle de l'utilisateur.
Elle permet aux utilisateurs d'anticiper rapidement les problèmes à venir, par exemple que le trafic, sans avoir à faire un zoom avant. Il peut alors modifier l'itinéraire si nécessaires. Si l'utilisateur recalcule l'itinéraire, la barre de progression est réinitialisée a 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.
Current position (Position actuelle) : position actuelle de l'utilisateur 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);