Navigations-UI ändern

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.

Positionen von benutzerdefinierten Steuerelementen

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.

  1. Erstellen Sie eine Android-Ansicht mit dem benutzerdefinierten UI-Element oder ViewGroup.
  2. 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.
  3. Verwenden Sie NavigationView.setCustomControl oder SupportNavigationFragment.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.

  1. Erstellen Sie eine Android-Ansicht mit dem UI-Element oder der Ansichtsgruppe, die Sie hinzufügen möchten.
  2. Erstellen Sie die Navigationsansicht oder das Fragment.
  3. 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:

AttributtypAttribute
Hintergrundfarbe
  • Primärer Tag-Modus: die Farbe der Navigationsüberschrift während des Tages
  • Sekundärer Tag-Modus: die Farbe der Tagesanzeige für die nächste Abbiegung
  • Primärer Nachtmodus: Farbe der Navigationsüberschrift in der Nacht
  • Sekundärer Nachtmodus: die Farbe der nächsten Abbiegung in der Nacht
Textelemente für Anweisungen
  • Schriftfarbe
  • Schriftart
  • Textgröße der ersten Zeile
  • Textgröße der zweiten Zeile
Textelemente für die nächsten Schritte
  • Schriftart
  • Textfarbe des Entfernungswerts
  • Textgröße des Entfernungswerts
  • Textfarbe der Entfernungseinheiten
  • Textgröße der Entfernungseinheiten
Symbole für Manöver
  • Farbe des großen Symbols für Fahrbahnbewegungen
  • Farbe des kleinen Bewegungssymbols
Spurführung
  • Farbe der empfohlenen Spuren

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ählungswertBeschreibung
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 wurde zur Navigation hinzugefügt.

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);