Mit dem Navigation SDK for Android können Sie die Nutzerfreundlichkeit Ihrer Karte anpassen, indem Sie festlegen, welche der integrierten UI-Steuerelemente und -Elemente auf der Karte angezeigt werden. Sie können auch die visuelle Darstellung der Navigations-UI anpassen. Auf der Seite „Richtlinien“ finden Sie Richtlinien zu zulässigen Änderungen an der Navigations-UI.
In diesem Dokument wird beschrieben, wie Sie die Benutzeroberfläche Ihrer Karte auf zwei Arten ändern können:
UI-Steuerelemente für die Karte
Die Karten-UI-Steuerelemente befinden sich über der Navigationsansicht. Das Navigation SDK for Android verschiebt 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 aus einem einzelnen UI-Element bestehen. Falls es für Ihr Design erforderlich ist, können Sie auch ein ViewGroup
mit mehreren UI-Elementen verwenden.
Die Methode setCustomControl
stellt Positionen gemäß der Aufzählung CustomControlPosition
bereit:
SECONDARY_HEADER
(wird nur im Hochformat angezeigt)BOTTOM_START_BELOW
BOTTOM_END_BELOW
Die folgenden Bilder zeigen beispielhaft verschiedene Positionen eines UI-Steuerelements, mit dem ein Mitfahrdienst bei der Abholung über den Standort des Fahrgasts informiert wird.
Benutzerdefinierten sekundären Header hinzufügen
Standardmäßig stellen Bildschirmlayouts im Navigationsmodus eine Position für eine sekundäre Überschrift unter dem primären Header bereit. Dieser sekundäre Header wird bei Bedarf angezeigt, z. B. bei der Spurführung. Ihre App kann diese sekundäre Kopfzeilenposition des Layouts für benutzerdefinierte Inhalte verwenden. Wenn Sie diese Funktion verwenden, deckt Ihre Steuerung jeden standardmäßigen sekundären Headerinhalt ab. Wenn Ihre Navigationsansicht einen Hintergrund hat, bleibt dieser Hintergrund an Ort und Stelle und wird vom sekundären Header verdeckt. Wenn das benutzerdefinierte Steuerelement durch Ihre Anwendung entfernt wird, kann stattdessen ein beliebiger sekundärer Standardheader angezeigt werden.
Die obere Kante des benutzerdefinierten sekundären Headers wird an der Unterkante 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.
- Erstelle eine Android View mit dem benutzerdefinierten UI-Element oder der ViewGroup.
- Maximieren Sie die XML-Datei oder instanziieren Sie die benutzerdefinierte Ansicht, um eine Instanz der Ansicht abzurufen, die als sekundären Header hinzugefügt werden kann.
Verwenden Sie
NavigationView.setCustomControl
oderSupportNavigationFragment.setCustomControl
mit CustomControlPosition als SECONDSARY_HEADER.Im folgenden Beispiel wird ein Fragment erstellt und an der sekundären Headerposition ein benutzerdefiniertes Steuerelement hinzugefügt.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER); ```
Sekundären Header entfernen
Mit der Methode setCustomControl
können Sie den sekundären Header entfernen und zum Standardinhalt zurückkehren.
Wenn Sie die Ansicht entfernen möchten, legen Sie für die Ansicht null
fest.
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Benutzerdefiniertes Steuerelement unten in der Navigationsansicht hinzufügen
In Ihrer App kann ein benutzerdefiniertes Steuerelement angegeben werden, das am unteren Rand der Navigationsansicht ausgerichtet ist. Wenn in deiner App das benutzerdefinierte Steuerelement hinzugefügt wird, werden die Schaltfläche zum erneuten Zentrieren und das Google-Logo nach oben verschoben.
- 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 einem 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.
Legen Sie als Ansicht für diese Position null
fest.
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 dem UI-Zubehör in der Google Maps for Android-App angezeigt wird. Sie können die Sichtbarkeit und das visuelle Erscheinungsbild dieser Steuerelemente wie in diesem Abschnitt beschrieben anpassen. Änderungen, die Sie hier vornehmen, werden für die nächste Navigationssitzung übernommen.
Auf der Seite Richtlinien finden Sie Informationen zu akzeptablen Änderungen an der Navigations-UI.
Code ansehen
Navigationsüberschrift ändern
Mit SupportNavigationFragment.setStylingOptions()
oder NavigationView.setStylingOptions()
können Sie das Design der Navigationskopfzeile und des „Nächster Abbiegepunkts“, der unter der Kopfzeile angezeigt wird, ändern, sofern verfügbar.
Sie können die folgenden Attribute festlegen:
Attributtyp | Attribute |
---|---|
Hintergrundfarbe |
|
Textelemente für Anweisungen |
|
Textelemente für die nächsten Schritte |
|
Manöversymbole |
|
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));
Verkehrsebene deaktivieren
Mit GoogleMap.setTrafficEnabled()
kannst du die Verkehrsebene auf der Karte aktivieren oder deaktivieren. Diese Einstellung wirkt sich auf die Anzeige der Verkehrsdichte aus, die auf der Karte als Ganzes angezeigt wird. Sie hat jedoch keine Auswirkungen auf die Verkehrshinweise auf der vom Navigator eingezeichneten Route.
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-UI aktivieren. Mit dieser Funktion kann der Nutzer die Anzeige von Ampel- oder Stoppschildern entlang der Route aktivieren und so einen besseren Kontext für effizientere und präzisere Fahrten liefern.
Standardmäßig sind Ampeln und Stoppschilder im Navigation SDK deaktiviert. Rufen Sie zum Aktivieren dieses Features für jedes Feature einzeln DisplayOptions
auf.
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 Google Maps API-Dokumentation.
Unverankerter Text
Sie können überall in Ihrer App unverankerten Text hinzufügen, sofern dies nicht die Google-Attribution abdeckt. Das Navigation SDK unterstützt nicht die Verankerung des Textes 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 das Symbol für die Geschwindigkeitsbegrenzung während der Navigation in der unteren Ecke angezeigt. Das Symbol zeigt die Höchstgeschwindigkeit auf der Straße an, auf der das Fahrzeug unterwegs ist. Das Symbol wird nur an Orten angezeigt, an denen zuverlässige Daten zu Geschwindigkeitsbegrenzungen verfügbar sind.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
Das Symbol für die Geschwindigkeitsbegrenzung ist vorübergehend ausgeblendet, wenn die Schaltfläche „Neu zentrieren“ angezeigt wird.
Nachtmodus festlegen
Sie können das Verhalten des Nachtmodus programmatisch steuern. Verwenden Sie NavigationView.setForceNightMode()
oder SupportNavigationFragment.setForceNightMode()
, um den Nachtmodus zu aktivieren oder zu deaktivieren, oder lassen Sie ihn vom Navigation SDK for Android steuern.
AUTO
Damit kann das Navigation SDK anhand des Gerätestandorts und der Ortszeit den geeigneten Modus ermitteln.FORCE_NIGHT
erzwingt die Aktivierung des Nachtmodus.FORCE_DAY
erzwingt die Aktivierung des Tagesmodus.
Das folgende Beispiel zeigt, wie Sie den Nachtmodus innerhalb eines Navigationsfragments aktivieren:
// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);
Liste der Wegbeschreibungen anzeigen
Erstellen Sie zuerst die Ansicht 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));
}
Leiten Sie Lebenszyklusereignisse genau wie bei NavigationView
an DirectionsListView
weiter. Beispiel:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Alternative Routen werden ausgeblendet
Wenn die Benutzeroberfläche mit zu vielen Informationen überladen ist, können Sie die Route reduzieren, indem Sie weniger alternative Routen als die Standardroute (zwei) oder gar keine alternativen Routen einblenden. Sie können diese Option vor dem Abrufen der Routen konfigurieren. Dazu rufen Sie die Methode RoutingOptions.alternateRoutesStrategy()
mit einem der folgenden Aufzählungswerte auf:
Aufzählungswert | Beschreibung |
---|---|
AlternateRoutesStrategy.SHOW_ALL | Standard. Es werden bis zu zwei alternative Routen angezeigt. |
AlternateRoutesStrategy.SHOW_ONE | Es wird eine alternative Route angezeigt (falls verfügbar). |
AlternateRoutesStrategy.SHOW_NONE | Alternative Routen werden ausgeblendet. |
Das folgende Codebeispiel zeigt, wie alternative Routen vollständig ausgeblendet werden.
RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);
Fortschrittsanzeige für Fahrt
Die Fortschrittsanzeige ist eine vertikale Leiste, die am rechten Rand der Karte zu sehen ist, wenn die Navigation beginnt. Wenn sie aktiviert ist, wird eine Übersicht für eine gesamte Fahrt zusammen mit dem Ziel und der aktuellen Position des Nutzers angezeigt.
Nutzer können damit bevorstehende Probleme wie den Verkehr schnell vorhersehen, ohne heranzoomen zu müssen. Bei Bedarf kann die Route dann neu berechnet werden. Wenn der Nutzer die Fahrt umleitet, wird die Fortschrittsanzeige zurückgesetzt, als ob an diesem Punkt eine neue Fahrt begonnen hat.
In der Fortschrittsanzeige werden die folgenden Statusanzeigen angezeigt:
Route verstrichen: Der verstrichene Teil der Fahrt.
Aktuelle Position: Der aktuelle Standort des Nutzers auf der Fahrt.
Verkehrsstatus: Der Status der nächsten Verkehrslage.
Endziel: 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);