Navigationsbenutzeroberfläche anpassen

Sie können Elemente der Benutzeroberfläche für die Navigation und die Karte anpassen und der Karte benutzerdefinierte Markierungen hinzufügen. Weitere Informationen zu akzeptablen Änderungen an der Navigations-UI findest du auf der Seite „Richtlinien“.

Code

Navigationsüberschrift anpassen

Mit NavigationFragment.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 NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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 NavigationMap.setTrafficEnabled(), um die Verkehrsebene auf der Karte zu aktivieren oder zu deaktivieren. Diese Einstellung wirkt sich auf die Verkehrsdichte auf der gesamten Karte aus, nicht aber auf die Verkehrshinweise auf der Route, die im Navigator angezeigt wird.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

Benutzerdefinierte Markierungen hinzufügen

Sie können der Karte benutzerdefinierte Markierungen hinzufügen, um POIs für Ihre Anwendung oder Nutzer anzugeben. Beispielsweise können Sie den Abholpunkt am Ende der Route angeben. Mit NavigationMap.addMarker() können Sie eine Markierung hinzufügen und mit NavigationMap.setOnMarkerClickListener() auf das Antippen einer Markierung warten.

Im folgenden Code wird ein Symbol verwendet, das in den Drawable-Ressourcen des Projekts (R.drawable.ic_person_pin_48dp) gespeichert ist. Sie können jedes beliebige Bild verwenden, das zu Ihrer Anwendung passt.

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

Sie können ein benutzerdefiniertes Bild als Markierung angeben. Das SDK unterstützt jedoch derzeit nicht das Labeling dieser Bilder mit Text. Weitere Informationen finden Sie unter Markierungen anpassen.

Unverankerter Text

Sie können überall in Ihrer App unverankerten Text hinzufügen, solange die Google-Attribution nicht abgedeckt wird. 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. Verwenden Sie NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() oder SupportNavigationFragment.setSpeedLimitIconEnabled(), um das Symbol für die Geschwindigkeitsbegrenzung ein- oder auszublenden. 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 NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() oder SupportNavigationFragment.setForceNightMode(), um den Nachtmodus ein- oder auszuschalten, oder lassen Sie ihn vom Navigation SDK 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.

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 NaviagtionView an DirectionsListView weiter. 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.

Beispiel

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