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.
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.
- Android-Ansicht erstellen mit dem benutzerdefinierten UI-Element oder ViewGroup.
- 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.
Verwende
NavigationView.setCustomControl
oderSupportNavigationFragment.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.
- Android-Ansicht erstellen mit dem UI-Element oder der Ansichtsgruppe, das bzw. die Sie hinzufügen möchten.
- Erstellen Sie die Navigationsansicht oder das Fragment.
- 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:
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
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ä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
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);