Navigations-UI ändern

Mithilfe des Navigation SDK für Android können Sie die Nutzererfahrung mit indem Sie festlegen, auf welchen der integrierten UI-Steuerelemente und -Elemente auf der Karte. Sie können auch die visuelle Darstellung der Navigations-UI anpassen. Verweis auf der Seite Richtlinien Richtlinien zu akzeptablen Änderungen an der Navigations-Benutzeroberfläche.

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. Die 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. Das benutzerdefinierte Steuerelement kann ein UI-Element oder, wenn Ihr Design mehr benötigen, können Sie ein ViewGroup mit mehreren UI-Elementen verwenden.

Die setCustomControl stellt Positionen gemäß der Definition in CustomControlPosition bereit Aufzählung:

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

Die folgenden Bilder zeigen Beispiele für verschiedene Positionen eines UI-Steuerelements die einen Mitfahrdienst-Fahrer über den Standort des Fahrgasts bei der Abholung informieren.

Benutzerdefinierte Steuerung
Positionen

Benutzerdefinierten sekundären Header hinzufügen

Standardmäßig stellen Bildschirmlayouts im Navigationsmodus eine Position für eine sekundäre unter der primären Kopfzeile. Dieser sekundäre Header wird angezeigt, wenn z. B. mit Spurführung. Ihre Anwendung kann diesen sekundären Header verwenden die Position des Layouts für benutzerdefinierten Content. Wenn Sie diese Funktion verwenden, deckt alle sekundären Standard-Header-Inhalte ab. Wenn in der Navigationsansicht ein Hintergrund, bleibt dieser an Ort und Stelle und wird vom sekundären Header verdeckt. Wenn das benutzerdefinierte Steuerelement durch Ihre App entfernt wird, kann jeder sekundäre Standardheader an ihrer Stelle erscheinen.

Bei der benutzerdefinierten Position des sekundären Headers wird der obere Rand an der Unterkante des in der primären Kopfzeile. Diese Position wird nur in portrait mode unterstützt. In landscape mode, ist die sekundäre Kopfzeile nicht verfügbar und das Layout auch nicht ändern können.

  1. Android-Ansicht erstellen mit dem benutzerdefinierten UI-Element oder ViewGroup.
  2. Maximieren Sie die XML-Datei oder instanziieren Sie die benutzerdefinierte Ansicht, um eine Instanz des Ansicht, die als sekundären Header hinzugefügt werden soll.
  3. Verwende NavigationView.setCustomControl oder SupportNavigationFragment.setCustomControl mit CustomControlPosition als SECONDARY_HEADER.

    Im folgenden Beispiel wird ein Fragment erstellt und ein benutzerdefiniertes Steuerelement in der sekundäre Kopfzeilenposition.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
     ```
    

Sekundären Header entfernen

Um den sekundären Header zu entfernen und zum Standardinhalt zurückzukehren, verwenden Sie die Methode setCustomControl-Methode.

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

Ihre App kann ein benutzerdefiniertes Steuerelement angeben, das am unteren Rand des in der Navigationsansicht. Wenn Ihre App das benutzerdefinierte Steuerelement hinzufügt, die Schaltfläche zum erneuten Zentrieren und das Google-Logo nach oben schieben.

  1. Android-Ansicht erstellen mit dem UI-Element oder der Ansichtsgruppe, das bzw. die Sie hinzufügen möchten.
  2. Erstellen Sie die Navigationsansicht oder das Fragment.
  3. Rufen Sie die Methode setCustomControl für die Navigationsansicht oder das Fragment auf. das Steuerelement und die zu verwendende Position an.

Das folgende Beispiel zeigt eine benutzerdefinierte View, die einem 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);

Benutzerdefiniertes Steuerelement entfernen

Wenn Sie das benutzerdefinierte Steuerelement entfernen möchten, verwenden Sie die Methode setCustomControl und geben Sie die Methode Position des Steuerelements, das Sie entfernen möchten.

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 ähnlich wie in der Google Maps App für Android. Sie können die Sichtbarkeit und die visuelle Darstellung dieser Steuerelemente wie folgt anpassen: die in diesem Abschnitt beschrieben werden. Änderungen, die Sie hier vornehmen, werden in den nächsten Navigationssitzung.

Weitere Informationen finden Sie in den Richtlinien. finden Sie Richtlinien zu akzeptable Änderungen an der Navigations-UI.

Code ansehen

Navigationsüberschrift ändern

Verwenden Sie SupportNavigationFragment.setStylingOptions() oder NavigationView.setStylingOptions() Design der Navigationskopfzeile und der Anzeige für den nächsten Abbiegepunkt, die wird unterhalb der Kopfzeile angezeigt, sofern verfügbar.

Sie können die folgenden Attribute festlegen:

AttributtypAttribute
Hintergrundfarbe
  • Primärer Tagmodus - die Tagesfarbe der Navigationsüberschrift
  • Sekundärer Tagesmodus - die Tagesfarbe des nächsten Richtungsindikators
  • Primärer Nachtmodus – die Nachtfarbe der Navigationsüberschrift
  • Sekundärer Nachtmodus – die Farbe der Nachtanzeige des nächsten Richtungsschalters
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
Manöversymbole
  • Farbe des großen Manöversymbols
  • Farbe des kleinen Manöversymbols
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));

Verkehrsebene deaktivieren

Verwenden Sie GoogleMap.setTrafficEnabled() um die Verkehrsebene auf der Karte zu aktivieren oder zu deaktivieren. Diese Einstellung wirkt sich auf die der Verkehrsdichte, die auf der Karte als Ganzes dargestellt wird. Sie wird jedoch nicht die Verkehrshinweise auf der vom Navigator eingezeichneten Route beeinflussen.

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 können Nutzende die Anzeige von Ampel- oder Stoppschildersymbolen und bietet so einen besseren Kontext für effizientere und präzisere Fahrten.

Standardmäßig sind Ampeln und Stoppschilder im Navigation SDK Rufen Sie zum Aktivieren dieser Funktion DisplayOptions für jede Funktion unabhängig.

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. Gehen Sie zur Google Maps API-Dokumentation .

Unverankerter Text

Sie können an einer beliebigen Stelle Ihrer App unverankerten Text hinzufügen, sofern dieser den Bereich Google Attribution Das Navigation SDK unterstützt die Verankerung des Textes nicht. zu einem Breiten- und Längengrad auf der Karte oder zu einem Label. Zu Info Windows Informationen.

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 Geschwindigkeitsbegrenzung ein- oder auszublenden. Wenn diese Option aktiviert ist, wird während der Navigation in der unteren Ecke angezeigt. Das Symbol zeigt die Geschwindigkeitsbegrenzung an. auf der sich das Fahrzeug befindet. Das Symbol erscheint nur an Orten, wo zuverlässige Daten zur Geschwindigkeitsbegrenzung 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.

Nachtmodus festlegen

Sie können das Verhalten des Nachtmodus programmatisch steuern. Verwenden Sie NavigationView.setForceNightMode() oder SupportNavigationFragment.setForceNightMode() den Nachtmodus ein- oder ausschalten oder das Navigation SDK für Android steuern können.

  • AUTO Erlaubt das Navigation SDK, die je nach Gerätestandort und Ortszeit den entsprechenden Modus verwenden.
  • FORCE_NIGHT erzwingt die Aktivierung des Nachtmodus.
  • FORCE_DAY erzwingt die Aktivierung des Tagesmodus.

Das folgende Beispiel zeigt, wie Sie den Nachtmodus in einer Navigation erzwingen. Fragment:

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

Routenliste 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 diese an DirectionsListView weiter sind bei NavigationView. 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 Sie sorgen für mehr Ordnung, indem weniger alternative Routen als die Standardroute angezeigt werden (zwei). dass keine Alternativrouten angezeigt werden. Sie können diese Option konfigurieren, bevor rufen Sie die Routen durch Aufrufen der RoutingOptions.alternateRoutesStrategy() mit einem der folgenden Aufzählungswerte:

AufzählungswertBeschreibung
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 für die Fahrt wurde der Navigation hinzugefügt.

Der Fahrtfortschrittsbalken ist ein vertikaler Balken, der am hinteren rechten Rand angezeigt wird. der Karte zu sehen, wenn die Navigation beginnt. Wenn sie aktiviert ist, wird eine Übersicht für eine der gesamten Fahrt, zusammen mit dem Ziel und der aktuellen Position des Nutzers.

Das bietet Nutzenden die Möglichkeit, anstehende Probleme schnell vorherzusehen, z. B. als Verkehr angezeigt wird, ohne heranzoomen zu müssen. Sie können die Route dann neu berechnen, notwendig ist. Wenn der Nutzer die Fahrt umleitet, wird die Fortschrittsanzeige zurückgesetzt, als wäre die Fahrt an diesem Punkt 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.

  • Zielort: Das endgültige Ziel.

Fahrtfortschrittsanzeige durch Aufrufen der setTripProgressBarEnabled()-Methode aktivieren am NavigationView oder SupportNavigationFragment. Beispiel:

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