Modyfikowanie interfejsu użytkownika

Za pomocą pakietu Navigation SDK na Androida możesz modyfikować sposób obsługi mapy, określając, które z wbudowanych elementów interfejsu i elementów interfejsu mają się pojawić na mapie. Możesz też dostosować wygląd interfejsu nawigacji. Aby poznać wytyczne dotyczące dozwolonych modyfikacji interfejsu nawigacji, odwiedź stronę zasad.

Z tego dokumentu dowiesz się, jak zmodyfikować interfejs mapy na 2 sposoby:

Elementy sterujące mapy

Elementy sterujące interfejsu mapy znajdują się u góry widoku nawigacji. Pakiet Navigation SDK na Androida automatycznie zmienia położenie elementów sterujących, gdy zmienia się wbudowany układ. Dla każdej pozycji układu możesz ustawić jeden niestandardowy element sterujący. Elementem sterującym niestandardowym może być 1 element interfejsu. Jeśli Twój projekt wymaga więcej, możesz użyć ViewGroup z wieloma elementami interfejsu.

Metoda setCustomControl udostępnia pozycje zdefiniowane w enumeracji CustomControlPosition:

  • SECONDARY_HEADER (wyświetla się tylko w trybie pionowym)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

Na przykład poniższe obrazy przedstawiają przykłady różnych pozycji elementów sterujących interfejsu, które informują kierowcę o lokalizacji pasażera podczas odbioru.

Niestandardowe pozycje elementów sterujących

Dodawanie niestandardowego nagłówka dodatkowego

Domyślnie układy ekranu w trybie nawigacji umożliwiają umieszczenie dodatkowego nagłówka znajdującego się pod nagłówkiem głównym. Ten dodatkowy nagłówek pojawia się, gdy jest to potrzebne, np. przy rozpoznawaniu pasa ruchu. Aplikacja może używać tego drugiego nagłówka w tym miejscu układu na potrzeby treści niestandardowych. Gdy używasz tej funkcji, element sterujący obejmuje domyślną treść dodatkowego nagłówka. Jeśli widok nawigacyjny ma tło, pozostanie ono bez zmian i zakryje dodatkowy nagłówek. Gdy aplikacja usunie element sterujący, na jego miejscu może pojawić się dowolny domyślny nagłówek.

Niestandardowe położenie dodatkowego nagłówka wyrównuje jego górną krawędź do dolnej krawędzi nagłówka głównego. Ta pozycja jest obsługiwana tylko w portrait mode. W przypadku landscape mode nagłówek dodatkowy jest niedostępny, a układ się nie zmienia.

  1. Utwórz widok Androida za pomocą niestandardowego elementu interfejsu lub ViewGroup.
  2. Rozwiń plik XML lub utwórz instancję widoku niestandardowego, aby uzyskać jego instancję do dodania jako nagłówka dodatkowego.

  3. Użyj wartości NavigationView.setCustomControl lub SupportNavigationFragment.setCustomControl z wartością CustomControlPosition = SECONDARY_HEADER.

    Przykład poniżej tworzy fragment i dodaje element sterujący niestandardowy w pozycji nagłówka dodatkowego.

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

Usuwanie dodatkowego nagłówka

Aby usunąć dodatkowy nagłówek i wrócić do treści domyślnej, użyj metody setCustomControl.

Aby usunąć widok, ustaw go na null.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Dodaj niestandardowy element sterujący u dołu widoku nawigacji

Aplikacja może określić element sterujący niestandardowy wyrównany do dolnej krawędzi widoku nawigacji. Gdy aplikacja doda niestandardowy element sterujący, przycisk wyśrodkuj i logo Google przesuwają się do góry, aby je zmieścić.

  1. Utwórz widok Androida z elementem interfejsu lub grupą widoków, które chcesz dodać.
  2. Utwórz widok lub fragment nawigacji.
  3. Wywołaj metodę setCustomControl w widoku nawigacji lub jego fragmencie i określ element sterujący oraz pozycję, której chcesz użyć.

Ten przykład pokazuje niestandardową View dodaną do 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 niestandardowy, użyj metody setCustomControl i wskaż pozycję elementu, który chcesz usunąć.

Ustaw widok na null dla tej pozycji.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Akcesoria do interfejsu Map

Pakiet Navigation SDK na Androida udostępnia akcesoria interfejsu, które pojawiają się podczas nawigacji podobne do tych w aplikacji Mapy Google na Androida. Możesz dostosować widoczność i wygląd tych elementów sterujących w sposób opisany w tej sekcji. Zmiany, które tu wprowadzisz, będą widoczne podczas następnej sesji nawigacji.

Wskazówki dotyczące dozwolonych modyfikacji interfejsu nawigacji znajdziesz na stronie zasad.

Wyświetlanie kodu

Modyfikowanie nagłówka nawigacji

Użyj przycisku SupportNavigationFragment.setStylingOptions() lub NavigationView.setStylingOptions(), aby zmienić motyw nagłówka nawigacyjnego i wskaźnik następnego zakrętu wyświetlany pod nagłówkiem (jeśli jest dostępny).

Możesz ustawić te atrybuty:

Typ atrybutuAtrybuty
Kolor tła
  • Główny tryb dnia – kolor nagłówka nawigacji w ciągu dnia.
  • Tryb dnia dodatkowego – kolor dnia wskaźnika następnego skrętu.
  • Tryb nocny podstawowy – kolor nagłówka nawigacji w nocy
  • Tryb nocny dodatkowy – kolor wskaźnika następnego skrętu w nocy
Elementy tekstowe instrukcji
  • Kolor tekstu
  • Czcionka
  • Rozmiar tekstu w pierwszym wierszu
  • Rozmiar tekstu w drugim wierszu
Elementy tekstowe dotyczące dalszych kroków
  • Czcionka
  • Kolor tekstu wartości odległości
  • Rozmiar tekstu wartości odległości
  • Kolor tekstu jednostek odległości
  • Rozmiar tekstu jednostek odległości
Ikony manewrów
  • Kolor dużej ikony manewru
  • Kolor małej ikony manewru
Asystent pasa ruchu
  • Kolor zalecanego pasa

Ten przykład pokazuje, jak ustawić opcje stylizacji:

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

Użyj GoogleMap.setTrafficEnabled(), aby włączyć lub wyłączyć warstwę natężenia ruchu na mapie. To ustawienie wpływa na wskaźniki natężenia ruchu widoczne na całej mapie. Nie wpływa jednak na wskazania natężenia ruchu na trasie wyznaczonej przez nawigatora.

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 światła i znaki stop.

Możesz włączyć sygnalizację świetlną i znaki stop na mapie. Dzięki tej funkcji użytkownik może włączyć wyświetlanie ikon sygnalizacji świetlnej lub znaków stopu na trasie, co zapewnia lepszy kontekst dla bardziej efektywnego i precyzyjnego przejazdu.

Domyślnie światła i znaki stop są wyłączone w pakiecie SDK nawigacji. Aby włączyć tę funkcję, wywołaj funkcję DisplayOptions dla każdej funkcji osobno.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Dodaj znaczniki niestandardowe

Pakiet Navigation SDK na Androida używa teraz interfejsów API Map Google na potrzeby znaczników. Więcej informacji znajdziesz w dokumentacji interfejsu Maps API.

tekst pływający,

Tekst pływający możesz dodać w dowolnym miejscu w aplikacji, o ile nie zasłania on danych atrybucji Google. Pakiet Navigation SDK nie obsługuje zakotwiczenia tekstu na szerokości i długości geograficznej na mapie ani do etykiety. Aby dowiedzieć się więcej, otwórz okno Informacje.

Wyświetlanie ograniczenia prędkości

Możesz programowo wyświetlać lub ukrywać ikonę ograniczenia prędkości. Aby wyświetlić lub ukryć ikonę limitu prędkości, kliknij NavigationView.setSpeedLimitIconEnabled() lub SupportNavigationFragment.setSpeedLimitIconEnabled(). Jeśli ta opcja jest włączona, w dolnym rogu wyświetla się ikona ograniczenia prędkości Ikona przedstawia ograniczenie prędkości obowiązujące na drodze, po której porusza się pojazd. Ikona pojawia się tylko w miejscach, w których dostępne są wiarygodne dane o ograniczeniu prędkości.

 // Display the Speed Limit icon
 mNavFragment.setSpeedLimitIconEnabled(true);

Ikona ograniczenia prędkości jest tymczasowo ukryta, gdy wyświetlany jest przycisk ponownego wyrównywania prędkości.

Ustawianie trybu nocnego

Możesz automatycznie sterować działaniem trybu nocnego. Użyj NavigationView.setForceNightMode() lub SupportNavigationFragment.setForceNightMode(), aby włączyć lub wyłączyć tryb nocny, albo pozwól pakietowi SDK nawigacji na Androida sterować trybem nocnym.

  • AUTO Pozwala pakietowi SDK Nawigacji określić odpowiedni tryb na podstawie lokalizacji urządzenia i czasu lokalnego.
  • FORCE_NIGHT wymusza włączenie trybu nocnego.
  • FORCE_DAY włącza tryb dzienny.

Ten przykład pokazuje wymuszanie włączenia trybu nocnego w ramach fragmentu 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, by przekazywać zdarzenia cyklu życia do DirectionsListView w taki sam sposób jak w NavigationView. Na przykład:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Ukrywanie tras alternatywnych

Gdy interfejs użytkownika jest zbyt zatłoczony, możesz ograniczyć ilość wyświetlanych informacji, wyświetlając mniej tras alternatywnych niż domyślnie (2 trasy) 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ść wyliczeniaOpis
AlternateRoutesStrategy.SHOW_ALL Domyślny: Wyświetla maksymalnie 2 trasy alternatywne.
AlternateRoutesStrategy.SHOW_ONE Wyświetla jedną trasę alternatywną (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

Dodano pasek postępu podróży do nawigacji.

Pasek postępu podróży to pionowy pasek, który pojawia się na prawym skraju mapy po rozpoczęciu nawigacji. Po włączeniu wyświetla ona ogólny widok całej podróży wraz z miejscem docelowym i bieżącą pozycją użytkownika.

Dzięki temu użytkownicy mogą szybko przewidywać nadchodzące problemy, takie jak natężenie ruchu, bez konieczności powiększania widoku. W razie potrzeby mogą zmienić trasę. Jeśli użytkownik wyznaczy inną trasę, pasek postępu zostanie zresetowany tak, jakby nowa podróż rozpoczęła się od tego miejsca.

Pasek postępu podróży zawiera następujące wskaźniki stanu:

  • Przebyty odcinek trasy – przebyty odcinek trasy.

  • Bieżąca pozycja – bieżąca lokalizacja użytkownika w podróży.

  • Stan ruchu – stan nadchodzącego ruchu.

  • Ostatnie miejsce docelowe – ostateczne miejsce podróży.

Włącz pasek postępu przejazdu, wywołując metodę setTripProgressBarEnabled() w NavigationView lub SupportNavigationFragment. Na przykład:

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