Navigations-UI ändern

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:

Steuerelemente für die Kartenoberfläche

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. Sie können für jede Position des Layouts ein benutzerdefiniertes Steuerelement festlegen. Das benutzerdefinierte Steuerelement kann ein UI-Element sein. Wenn Ihr Design mehr erfordert, können Sie ein ViewGroup mit mehreren UI-Elementen verwenden.

Die setCustomControl-Methode gibt Positionen gemäß der Definition im CustomControlPosition-Enum zurück:

  • SECONDARY_HEADER (wird nur im Hochformat angezeigt)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

Die folgenden Bilder zeigen beispielsweise verschiedene Positionen eines Steuerelements auf der Benutzeroberfläche, das einen Fahrer eines Fahrdienstes über den Standort des Fahrgastes während einer Abholung informiert.

Positionen für benutzerdefinierte Steuerelemente

Benutzerdefinierten sekundären Header hinzufügen

Standardmäßig bieten Bildschirmlayouts im Navigationsmodus eine Position für eine sekundäre Überschrift unter der primären Überschrift. 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 erhalten 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.

  1. Erstellen Sie eine Android-Ansicht mit dem benutzerdefinierten UI-Element oder der ViewGroup.
  2. Erweitern Sie die XML-Datei oder erstellen Sie eine Instanz der benutzerdefinierten Ansicht, um eine Instanz der Ansicht zu erhalten, die Sie als sekundären Titel hinzufügen möchten.
  3. Verwenden Sie NavigationView.setCustomControl oder SupportNavigationFragment.setCustomControl mit CustomControlPosition als SECONDSARY_HEADER.

    Im folgenden Beispiel wird ein Fragment erstellt und ein benutzerdefiniertes Steuerelement an der Position des sekundären Headers eingefü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.

Legen Sie für die Ansicht den Wert null fest, um sie zu entfernen.

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.

  1. Erstellen Sie eine Android View mit dem UI-Element oder der Ansichtsgruppe, die Sie hinzufügen möchten.
  2. Erstellen Sie die Navigationsansicht oder das Navigationsfragment.
  3. Rufen Sie die Methode setCustomControl in der Navigationsansicht oder im Navigationsfragment auf und geben Sie das Steuerelement und die Position an, die verwendet werden soll.

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 Steuerelements an, das Sie entfernen möchten.

Legen Sie für diese Position die Ansicht auf null fest.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

UI-Zubehör für Karten

Das Navigation SDK for Android bietet UI-Zubehör, das während der Navigation angezeigt wird und dem in der Google Maps App für Android ähnelt. Sie können die Sichtbarkeit oder 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 der Markierung für die nächste Abbiegung unter der Kopfzeile ändern, sofern verfügbar.

Sie können die folgenden Attribute festlegen:

AttributtypAttribute
Hintergrundfarbe
  • Primärer Tagmodus – die Farbe der Navigationsleiste für den Tag
  • Sekundäre Farbe für den Tagmodus – die Tagesfarbe der Richtungsanzeige
  • Primärer Nachtmodus – die Nachtfarbe der Navigationsüberschrift
  • Sekundärer Nachtmodus – die Farbe der Richtungsanzeige bei 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
  • Schriftfarbe der Entfernungseinheiten
  • Textgröße der Entfernungseinheiten
Manöversymbole
  • Farbe des großen Manöversymbols
  • Farbe des kleinen Manöversymbols
Spurführung
  • Farbe der empfohlenen Fahrstreifen

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

Verwenden Sie GoogleMap.setTrafficEnabled(), um die Verkehrsebene auf der Karte zu aktivieren oder zu 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));

Ampel- und Stoppschilder aktivieren

Sie können Ampeln und Haltebuchten in der Kartenoberfläche aktivieren. Mit dieser Funktion kann der Nutzer die Anzeige von Ampeln oder Stoppschildsymbolen entlang der Route aktivieren. So erhält er einen besseren Kontext für effizientere und genauere Fahrten.

Im Navigation SDK sind Ampel- und Stoppschilder standardmäßig deaktiviert. Wenn Sie diese Funktion aktivieren möchten, rufen Sie DisplayOptions für jede Funktion separat 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 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. Verwenden Sie NavigationView.setSpeedLimitIconEnabled() oder SupportNavigationFragment.setSpeedLimitIconEnabled(), um das Symbol für die zulässige Höchstgeschwindigkeit ein- oder auszublenden. 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 einstellen

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 Ermöglicht es dem Navigations-SDK, den geeigneten Modus anhand des Gerätestandorts und der Ortszeit zu bestimmen.
  • FORCE_NIGHT erzwingt die Aktivierung des Nachtmodus.
  • FORCE_DAY erzwingt den Tagmodus.

Das folgende Beispiel zeigt, wie Sie den Nachtmodus innerhalb eines Navigationsfragments aktivieren:

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

Liste der Routen 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();
}

Ausweichrouten ausblenden

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, indem Sie die Methode RoutingOptions.alternateRoutesStrategy() mit einem der folgenden Aufzählungswerte aufrufen:

AufzählungswertBeschreibung
AlternateRoutesStrategy.SHOW_ALL Standard. Es werden bis zu zwei alternative Routen angezeigt.
AlternateRoutesStrategy.SHOW_ONE Eine alternative Route wird angezeigt, sofern 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 Fahrt

Die Fortschrittsanzeige für die Fahrt wurde der Navigation hinzugefügt.

Die Fortschrittsanzeige für die Fahrt ist eine vertikale Leiste, die rechts am Ende der Karte angezeigt wird, wenn die Navigation gestartet wird. Wenn sie aktiviert ist, wird eine Übersicht für eine gesamte Fahrt zusammen mit dem Ziel und der aktuellen Position des Nutzers angezeigt.

So können Nutzer schnell auf anstehende Probleme wie Staus reagieren, ohne heranzoomen zu müssen. Bei Bedarf kann die Route dann neu berechnet werden. Wenn der Nutzer die Route ändert, wird die Fortschrittsanzeige zurückgesetzt, als würde an diesem Punkt eine neue Fahrt gestartet.

In der Fahrtfortschrittsanzeige 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.

  • Zielort: Das endgültige Ziel.

Aktivieren Sie die Fortschrittsanzeige für Fahrten, indem Sie die Methode setTripProgressBarEnabled() auf NavigationView oder SupportNavigationFragment aufrufen. Beispiel:

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