Za pomocą pakietu Navigation SDK na Androida możesz modyfikować sposób, w jaki użytkownicy korzystają z mapy, określając, które wbudowane elementy interfejsu i elementy sterujące mają się wyświetlać na mapie. Możesz też dostosować wygląd interfejsu nawigacji. Wskazówki dotyczące dopuszczalnych modyfikacji interfejsu użytkownika znajdziesz na stronie z zasadami.
W tym dokumencie opisano, jak zmodyfikować interfejs użytkownika mapy na 2 sposoby:
Elementy sterujące interfejsu mapy
Elementy sterujące interfejsu mapy znajdują się nad widokiem nawigacji. Pakiet SDK nawigacji na Androida automatycznie zmienia położenie niestandardowych elementów sterujących po zmianie układu wbudowanego. Dla każdej pozycji układu możesz ustawić jedną niestandardową kontrolkę. Element sterujący może być 1 elementem interfejsu lub, jeśli Twój projekt wymaga dodatkowych elementów, możesz użyć ViewGroup
z wieloma elementami interfejsu.
Metoda setCustomControl
zapewnia pozycje zgodnie z definicją w wyliczeniu CustomControlPosition
:
SECONDARY_HEADER
(wyświetlany tylko w trybie pionowym)BOTTOM_START_BELOW
BOTTOM_END_BELOW
Obraz przedstawia przykłady różnych pozycji elementu sterującego interfejsu informującego kierowcę o lokalizacji pasażera.
Dodaj niestandardowy nagłówek dodatkowy
Domyślnie układy ekranu w trybie nawigacji zapewniają pozycję dodatkowego nagłówka pod nagłówkiem głównym. Pojawia się on wtedy, gdy jest potrzebny, np. przy asystencie pasa ruchu. Aplikacja może korzystać z dodatkowej pozycji nagłówka w układzie niestandardowych treści. Gdy używasz tej funkcji, element sterujący obejmuje domyślną dodatkową treść nagłówka. Jeśli widok nawigacji ma tło, pozostanie ono bez zmian i będzie zasłonięte nagłówkiem dodatkowym. Gdy aplikacja usunie element sterujący niestandardowy, w jego miejscu może pojawić się dowolny domyślny nagłówek dodatkowy.
Dodatkowy niestandardowy nagłówek wyrównuje jego górną krawędź do dolnej krawędzi nagłówka podstawowego. Ta pozycja jest obsługiwana tylko w języku portrait mode
. W landscape mode
nagłówek dodatkowy jest niedostępny, a układ się nie zmienia.
- Utwórz widok Android View z niestandardowym elementem interfejsu użytkownika lub grupą widoków danych.
- Ulepsz plik XML lub utwórz wystąpienie widoku niestandardowego, aby uzyskać instancję widoku do dodania jako nagłówek dodatkowy.
Użyj właściwości
NavigationView.setCustomControl
lubSupportNavigationFragment.setCustomControl
z elementem CustomControlPosition jako SECONDARY_HEADER.Poniższy przykład tworzy fragment i dodaje niestandardową kontrolkę w pozycji dodatkowego nagłówka.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER);
Usuwanie dodatkowego nagłówka
Aby usunąć nagłówek dodatkowy i wrócić do treści domyślnej, użyj metody setCustomControl
.
Aby go usunąć, ustaw widok na null
.
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Dodaj element sterujący u dołu widoku nawigacyjnego
W aplikacji możesz określić element sterujący wyrównany do dolnej krawędzi widoku nawigacyjnego. Gdy aplikacja doda element sterujący, przycisk ponownego wyśrodkowania i logo Google przesuwają się w górę, aby je zmieścić.
- Utwórz Widok Androida z elementem interfejsu lub grupą widoków, który chcesz dodać.
- Utwórz widok nawigacyjny lub fragment.
- Wywołaj metodę
setCustomControl
w widoku lub fragmencie nawigacyjnym oraz określ element sterujący i pozycję do użycia.
Ten przykład pokazuje niestandardowy element View
dodany do elementu 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);
Usuwanie elementu sterującego niestandardowego
Aby usunąć element sterujący, użyj metody setCustomControl
i określ pozycję elementu sterującego, który chcesz usunąć.
Dla tej pozycji ustaw widok na null
.
mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);
Akcesoria do interfejsu Map
Pakiet Navigation SDK na Androida zawiera akcesoria interfejsu, które wyświetlają się podczas nawigacji, podobne do tych w aplikacji Mapy Google na Androida. Możesz dostosować widoczność lub wygląd tych elementów sterujących w sposób opisany w tej sekcji. Wprowadzone tu zmiany będą odzwierciedlane podczas następnej podróży kierowcy.
Wskazówki dotyczące akceptowanych modyfikacji interfejsu użytkownika znajdziesz na stronie Zasady.
Wyświetl kod
Modyfikowanie nagłówka nawigacyjnego
Użyj elementu SupportNavigationFragment.setStylingOptions()
lub NavigationView.setStylingOptions()
, aby zmienić motyw nagłówka nawigacyjnego i wskaźnika następnego zakrętu, który pojawia się pod nagłówkiem, jeśli jest dostępny.
Możesz ustawić te atrybuty:
Typ atrybutu | Atrybuty |
---|---|
Kolor tła |
|
Elementy tekstowe instrukcji |
|
Elementy tekstowe dotyczące następnych kroków |
|
Ikony skrętu |
|
Asystent pasa ruchu |
|
Z przykładu poniżej dowiesz się, jak ustawić opcje stylu:
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));
Wyłączanie warstwy natężenia ruchu
Aby włączyć lub wyłączyć warstwę natężenia ruchu na mapie, użyj opcji GoogleMap.setTrafficEnabled()
. To ustawienie wpływa na wskaźniki gęstości ruchu wyświetlane na całej mapie. Nie ma to jednak wpływu na informacje o ruchu drogowym na trasie wyznaczonej przez nawigacji.
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));
Włącz sygnalizację świetlną i znaki „Stop”
Sygnalizację świetlną i znaki stopu możesz włączyć w interfejsie mapy. Dzięki tej funkcji kierowca może włączyć wyświetlanie sygnalizacji świetlnej lub ikon znaków stopu na trasie, co zapewni lepszy kontekst i lepszą kontrolę nad trasą.
sygnalizacja świetlna i znaki „Stop” są domyślnie wyłączone w pakiecie SDK nawigacji. Aby włączyć tę funkcję, wywołaj dla każdej z nich niezależnie wywołanie metody DisplayOptions
.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Dodaj znaczniki niestandardowe
Pakiet SDK nawigacji na Androida używa teraz interfejsów API Map Google do obsługi znaczników. Więcej informacji znajdziesz w dokumentacji interfejsu API Map Google.
Tekst pływający
Tekst pływający możesz umieścić w dowolnym miejscu aplikacji, o ile nie zasłoni on źródła danych Google. Pakiet SDK nawigacji nie obsługuje kotwicy tekstu na szerokości i długości geograficznej na mapie ani do etykiety. Więcej informacji znajdziesz w sekcji Okna informacyjne.
Wyświetl ograniczenie prędkości
Możesz automatycznie wyświetlać lub ukrywać ikonę ograniczenia prędkości.
Użyj NavigationView.setSpeedLimitIconEnabled()
lub SupportNavigationFragment.setSpeedLimitIconEnabled()
, aby wyświetlić lub ukryć ikonę ograniczenia prędkości. Po włączeniu tej funkcji w dolnym rogu
wyświetla się ikona ograniczenia prędkości. Pokazuje ona ograniczenie prędkości na drodze, po której porusza się pojazd. Ta ikona pojawia się tylko w miejscach, w których dostępne są wiarygodne dane o ograniczeniach prędkości.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
Ikona ograniczenia prędkości jest tymczasowo ukryta, gdy wyświetlany jest przycisk wygładzania.
Ustaw tryb nocny
Możesz zaprogramować działanie trybu nocnego.
Użyj NavigationView.setForceNightMode()
lub SupportNavigationFragment.setForceNightMode()
, aby włączyć lub wyłączyć tryb nocny. Możesz też pozwolić pakietowi SDK nawigacji na Androida nim zarządzać.
AUTO
Pozwala pakietowi SDK nawigacji wybrać odpowiedni tryb na podstawie lokalizacji urządzenia i czasu lokalnego.FORCE_NIGHT
wymusza włączenie trybu nocnego.FORCE_DAY
wymusza włączenie trybu dziennego.
Poniższy przykład pokazuje wymuszanie włączenia trybu nocnego w fragmencie nawigacji:
// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);
Wyświetl listę wskazówek dojazdu
Najpierw utwórz widok i dodaj go do hierarchii.
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));
}
Pamiętaj, aby przekazywać zdarzenia cyklu życia do usługi DirectionsListView
tak samo jak w przypadku NavigationView
. Na przykład:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Ukrywam trasy alternatywne
Gdy interfejs użytkownika jest zapełniony nadmiarem informacji, można go zmniejszyć, wyświetlając mniej tras alternatywnych niż domyślna (2) lub nie wyświetlając ich wcale. Możesz skonfigurować tę opcję przed pobraniem tras, wywołując metodę RoutingOptions.alternateRoutesStrategy()
z jedną z tych wartości wyliczeniowych:
Wartość wyliczenia | Opis |
---|---|
AlternateRoutesStrategy.SHOW_ALL | Domyślny: Wyświetla maksymalnie dwie alternatywne trasy. |
AlternateRoutesStrategy.SHOW_ONE | Wyświetla jedną alternatywną trasę (jeśli jest dostępna). |
AlternateRoutesStrategy.SHOW_NONE | Ukrywa trasy alternatywne. |
Poniższy przykładowy kod pokazuje, jak całkowicie ukryć alternatywne trasy.
RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);
Pasek postępu podróży
Pasek postępu podróży to pionowy pasek, który pojawia się na końcu mapy przy prawej krawędzi mapy po rozpoczęciu nawigacji. Po włączeniu wyświetla ogólny przegląd całej podróży, a także miejsce docelowe i bieżącą pozycję kierowcy.
Umożliwia kierowcom szybkie przewidzenie nadchodzących problemów, np. korków, bez konieczności powiększania widoku. W razie potrzeby mogą wtedy zmienić trasę podróży. Jeśli kierowca zmieni trasę, pasek postępu resetuje się tak, jakby od tego momentu rozpoczęła się nowa podróż.
Na pasku postępu podróży wyświetlane są następujące wskaźniki stanu:
Ukończona trasa – czas, który upłynął od przejazdu.
Bieżąca pozycja – aktualna lokalizacja kierowcy na trasie.
Stan ruchu – stan nadchodzącego ruchu.
Ostatnie miejsce docelowe – miejsce docelowe podróży.
Włącz pasek postępu podróży, wywołując metodę setTripProgressBarEnabled()
w NavigationView lub SupportNavigationFragment.
Na przykład:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);