Mit dem Navigation SDK for Android lässt sich die Nutzererfahrung mit Ihrer Karte anpassen, indem Sie festlegen, welche der integrierten UI-Steuerelemente und -Elemente auf der Karte angezeigt werden. Sie können auch das visuelle Erscheinungsbild der Navigations-UI anpassen. Auf der Seite „Richtlinien“ finden Sie Informationen zu zulässigen Änderungen an der Navigations-UI.
In diesem Dokument wird auf zwei Arten die Benutzeroberfläche Ihrer Karte geändert:
UI-Steuerelemente für Karten
Die UI-Steuerelemente für die Karte befinden sich über der Navigationsansicht. Das Navigation SDK for Android positioniert Ihre benutzerdefinierten Steuerelemente automatisch neu, wenn sich das integrierte Layout ändert. Für jede Position des Layouts können Sie ein benutzerdefiniertes Steuerelement festlegen. Das benutzerdefinierte Steuerelement kann ein einzelnes UI-Element sein. Wenn Ihr Design mehrere Elemente erfordert, können Sie ein ViewGroup
mit mehreren UI-Elementen verwenden.
Die Methode setCustomControl
stellt Positionen bereit, die in CustomControlPosition
-Enum definiert sind:
SECONDARY_HEADER
(nur im Hochformat)BOTTOM_START_BELOW
BOTTOM_END_BELOW
Das Bild zeigt Beispiele für verschiedene Positionen eines UI-Steuerelements, das den Fahrer über den Standort eines Fahrgasts informiert.
Benutzerdefinierten sekundären Header hinzufügen
Standardmäßig bieten Bildschirmlayouts im Navigationsmodus eine Position für einen sekundären Header an, der sich unter dem primären Header befindet. Dieser sekundäre Header wird bei Bedarf angezeigt, z. B. bei der Spurführung. Ihre App kann diese sekundäre Headerposition des Layouts für benutzerdefinierte Inhalte verwenden. Wenn Sie diese Funktion verwenden, deckt Ihr Steuerelement alle standardmäßigen sekundären Headerinhalte ab. Wenn die Navigationsansicht einen Hintergrund hat, bleibt dieser Hintergrund erhalten und wird vom sekundären Header abgedeckt. Wenn Ihre App das benutzerdefinierte Steuerelement entfernt, kann an seiner Stelle ein beliebiger sekundärer Standardheader angezeigt werden.
Die Position des benutzerdefinierten sekundären Headers wird am oberen Rand des primären Headers ausgerichtet. Diese Position wird nur in portrait mode
unterstützt. In landscape mode
ist der sekundäre Header nicht verfügbar und das Layout ändert sich nicht.
- Erstellen Sie eine Android-Ansicht mit dem benutzerdefinierten UI-Element oder ViewGroup.
- Aufblähen Sie die XML-Datei oder instanziieren Sie die benutzerdefinierte Ansicht, um eine Instanz der Ansicht abzurufen, die als sekundärer Header hinzugefügt werden soll.
Verwenden Sie
NavigationView.setCustomControl
oderSupportNavigationFragment.setCustomControl
mit CustomControlPosition als SECONDARY_HEADER.Im folgenden Beispiel wird ein Fragment erstellt und an der Position des sekundären Headers wird ein benutzerdefiniertes Steuerelement hinzugefügt.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER);
Sekundären Header entfernen
Verwenden Sie die Methode setCustomControl
, um den sekundären Header zu entfernen und zum Standardinhalt zurückzukehren.
Legen Sie die Ansicht auf null
fest, um sie zu entfernen.
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Fügen Sie am unteren Rand der Navigationsansicht ein benutzerdefiniertes Steuerelement hinzu.
Sie können in Ihrer App ein benutzerdefiniertes Steuerelement angeben, das am unteren Rand der Navigationsansicht ausgerichtet ist. Wenn das benutzerdefinierte Steuerelement in Ihrer App hinzugefügt wird, verschieben sich die Schaltfläche „Neu zentrieren“ und das Google-Logo nach oben.
- Erstellen Sie eine Android-Ansicht mit dem UI-Element oder der Ansichtsgruppe, die Sie hinzufügen möchten.
- Erstellen Sie die Navigationsansicht oder das Fragment.
- Rufen Sie die Methode
setCustomControl
in der Navigationsansicht oder dem Fragment auf und geben Sie das Steuerelement und die zu verwendende Position an.
Das folgende Beispiel zeigt eine benutzerdefinierte View
, die einer SupportNavigationFragment
hinzugefügt wurde:
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);
Benutzerdefiniertes Steuerelement entfernen
Wenn Sie das benutzerdefinierte Steuerelement entfernen möchten, verwenden Sie die Methode setCustomControl
und geben Sie die Position des zu entfernenden Steuerelements an.
Setzen Sie die Ansicht für diese Position auf null
.
mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);
Karten-UI-Zubehör
Das Navigation SDK for Android bietet UI-Zubehör, das während der Navigation ähnlich wie in der Google Maps for Android-Anwendung angezeigt wird. Sie können die Sichtbarkeit und visuelle Darstellung dieser Steuerelemente wie in diesem Abschnitt beschrieben anpassen. Hier vorgenommene Änderungen werden bei der nächsten Fahrt des Fahrers übernommen.
Weitere Informationen zu akzeptablen Änderungen an der Navigations-UI findest du auf der Seite „Richtlinien“.
Code ansehen
Navigationsüberschrift ändern
Mit SupportNavigationFragment.setStylingOptions()
oder NavigationView.setStylingOptions()
können Sie das Design des Navigationsheaders und des Hinweises zur nächsten Abbiegung ändern, der unter dem Header angezeigt wird, sofern verfügbar.
Sie können die folgenden Attribute festlegen:
Attributtyp | Attribute |
---|---|
Hintergrundfarbe |
|
Textelemente für Anweisungen |
|
Textelemente für die nächsten Schritte |
|
Symbole für Manöver |
|
Spurführung |
|
Das folgende Beispiel zeigt, wie Stiloptionen festgelegt werden:
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));
Verkehrslagenebene deaktivieren
Verwenden Sie GoogleMap.setTrafficEnabled()
, um die Verkehrsebene auf der Karte zu aktivieren oder zu deaktivieren. Diese Einstellung wirkt sich auf die Anzeige der Verkehrsdichte auf der Karte als Ganzes aus. Sie hat jedoch keinen Einfluss auf die Verkehrshinweise auf der Route, die im Navigator angezeigt wird.
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));
Ampeln und Stoppschilder aktivieren
Sie können Ampeln und Stoppschilder in der Karten-Benutzeroberfläche aktivieren. Mit dieser Funktion kann der Fahrer die Anzeige von Ampeln oder Stoppschildern auf der Route aktivieren und so einen besseren Kontext für effizientere und genauere Fahrten bereitstellen.
Ampeln und Stoppschilder sind im Navigation SDK standardmäßig deaktiviert. Um dieses Feature zu aktivieren, müssen Sie für jedes Feature unabhängig voneinander DisplayOptions
aufrufen.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Benutzerdefinierte Markierungen hinzufügen
Das Navigation SDK for Android verwendet jetzt Google Maps APIs für Markierungen. Weitere Informationen finden Sie in der Dokumentation zur Google Maps API.
Unverankerter Text
Sie können überall in Ihrer App unverankerten Text hinzufügen, vorausgesetzt, er deckt die Google-Attribution nicht ab. Das Navigation SDK unterstützt nicht das Verankern von Text an einem Breiten- und Längengrad auf der Karte oder an einem Label. Weitere Informationen finden Sie unter Infofenster.
Geschwindigkeitsbegrenzung anzeigen
Sie können das Symbol für die Geschwindigkeitsbegrenzung programmatisch ein- oder ausblenden.
Mit NavigationView.setSpeedLimitIconEnabled()
oder SupportNavigationFragment.setSpeedLimitIconEnabled()
können Sie das Symbol für die Geschwindigkeitsbegrenzung ein- oder ausblenden. Wenn diese Option aktiviert ist, wird während der Anleitung unten
das Symbol für die Geschwindigkeitsbegrenzung angezeigt. Das Symbol zeigt die Höchstgeschwindigkeit der Straße an, auf der das Fahrzeug fährt. Es wird nur dort angezeigt, wo zuverlässige Daten zu Geschwindigkeitsbegrenzungen verfügbar sind.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
Das Symbol für die Geschwindigkeitsbegrenzung wird vorübergehend ausgeblendet, wenn die Schaltfläche „Neu laden“ angezeigt wird.
Nachtmodus festlegen
Sie können das Verhalten des Nachtmodus programmatisch steuern.
Verwenden Sie NavigationView.setForceNightMode()
oder SupportNavigationFragment.setForceNightMode()
, um den Nachtmodus ein- oder auszuschalten, oder lassen Sie ihn vom Navigation SDK for Android steuern.
AUTO
: Damit kann das Navigation SDK den geeigneten Modus anhand des Gerätestandorts und der Ortszeit bestimmen.- Mit „
FORCE_NIGHT
“ wird der Nachtmodus erzwungen. - Mit
FORCE_DAY
wird der Tagesmodus erzwungen.
Im folgenden Beispiel wird gezeigt, wie der Nachtmodus innerhalb eines Navigationsfragments aktiviert werden muss:
// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);
Liste mit Wegbeschreibungen anzeigen
Erstellen Sie zuerst die Datenansicht und fügen Sie sie Ihrer Hierarchie hinzu.
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));
}
Achten Sie darauf, Lebenszyklusereignisse wie bei NavigationView
an DirectionsListView
weiterzuleiten. Beispiel:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Alternative Routen werden ausgeblendet
Wenn die Benutzeroberfläche mit zu vielen Informationen unübersichtlich wird, können Sie weniger alternative Routen als die Standardrouten (zwei) oder gar keine anzeigen lassen. Sie können diese Option konfigurieren, bevor Sie die Routen abrufen. Rufen Sie dazu die Methode RoutingOptions.alternateRoutesStrategy()
mit einem der folgenden Aufzählungswerte auf:
Aufzählungswert | Beschreibung |
---|---|
AlternateRoutesStrategy.SHOW_ALL | Standard. Zeigt bis zu zwei alternative Routen an. |
AlternateRoutesStrategy.SHOW_ONE | Zeigt eine alternative Route an (falls verfügbar). |
AlternateRoutesStrategy.SHOW_NONE | Alternative Routen werden ausgeblendet. |
Im folgenden Codebeispiel wird gezeigt, wie alternative Routen vollständig ausgeblendet werden.
RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);
Fortschrittsanzeige für die Fahrt
Die Fortschrittsanzeige der Fahrt ist ein vertikaler Balken, der zu Beginn der Navigation am rechten unteren Rand der Karte angezeigt wird. Wenn diese Option aktiviert ist, wird eine Übersicht für die gesamte Fahrt zusammen mit dem Ziel des Fahrers und der aktuellen Position angezeigt.
So haben Fahrer die Möglichkeit, bevorstehende Probleme wie den Verkehr schnell vorherzusehen, ohne heranzuzoomen. Bei Bedarf können sie die Fahrt dann neu berechnen. Wenn der Fahrer die Route neu berechnet, wird die Fortschrittsanzeige zurückgesetzt, als ob eine neue Fahrt an diesem Punkt begonnen hätte.
In der Fortschrittsanzeige der Fahrt werden die folgenden Statusanzeigen angezeigt:
Verstrichene Route: die verstrichene Zeit
Aktuelle Position: Der aktuelle Standort des Fahrers auf der Fahrt.
Traffic-Status: Der Status des kommenden Traffics.
Endgültiges Ziel: Das endgültige Ziel.
Aktivieren Sie die Fortschrittsanzeige der Fahrt, indem Sie die Methode setTripProgressBarEnabled()
in NavigationView oder SupportNavigationFragment aufrufen.
Beispiel:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);