Modyfikowanie interfejsu użytkownika

Za pomocą pakietu Navigation SDK na Androida możesz modyfikować sposób korzystania z mapy, określając, które z wbudowanych elementów interfejsu i elementów mają się pojawiać na mapie. Możesz też dostosować wygląd interfejsu nawigacji. Wskazówki na temat dopuszczalnych modyfikacji interfejsu nawigacyjnego znajdziesz na stronie Zasady.

W tym dokumencie opisano, jak modyfikować interfejs użytkownika mapy na dwa sposoby:

Elementy sterujące interfejsu mapy

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

Metoda setCustomControl podaje pozycje zgodnie z definicją za pomocą wyliczenia CustomControlPosition:

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

Obraz przedstawia przykłady różnych pozycji elementu sterującego interfejsu, który informuje kierowcę o lokalizacji pasażera.

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 dodatkowego pozycji nagłówka w układzie dla 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, pozostaje ono na swoim miejscu i zasłonięte nagłówkiem dodatkowym. Gdy aplikacja usunie niestandardowy element sterujący, w jego miejscu może pojawić się dowolny domyślny nagłówek dodatkowy.

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 języku: portrait mode. W landscape mode dodatkowy nagłówek jest niedostępny, a układ się nie zmienia.

  1. Utwórz widok Androida za pomocą niestandardowego elementu interfejsu lub ViewGroup.
  2. Rozszerz plik XML lub utwórz instancję widoku niestandardowego, aby pobrać instancję widoku, którą chcesz dodać jako nagłówek dodatkowy.
  3. Użyj właściwości NavigationView.setCustomControl lub SupportNavigationFragment.setCustomControl z opcją CustomControlPosition jako SECONDARY_HEADER.

    W przykładzie poniżej tworzymy fragment i dodaje on niestandardową opcję w pozycji dodatkowego nagłówka.

     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 go usunąć, ustaw widok na null.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

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

Aplikacja może mieć niestandardowy element sterujący 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 lub fragmencie nawigacji i określ element sterujący oraz pozycję, która ma być używana.

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ąć niestandardowy element sterujący, użyj metody setCustomControl i określ jego pozycję, którą 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 zawiera 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. Wprowadzone tu zmiany będą widoczne podczas kolejnej podróży kierowcy.

Wskazówki na temat dopuszczalnych modyfikacji interfejsu nawigacyjnego znajdziesz na stronie Zasady.

Wyświetl kod

Modyfikowanie nagłówka nawigacyjnego

Użyj klawiszy SupportNavigationFragment.setStylingOptions() lub NavigationView.setStylingOptions(), aby zmienić motyw nagłówka nawigacji i wskaźnik następnego skrętu, który pojawia się 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.
  • Główny tryb nocny – kolor nocny nagłówka nawigacji
  • Dodatkowy tryb nocny – kolor nocny wskaźnika następnego skrętu.
Elementy tekstowe instrukcji
  • Kolor tekstu
  • Czcionka
  • Rozmiar tekstu w pierwszym wierszu
  • Rozmiar tekstu w drugim wierszu
Elementy tekstowe kolejnych 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 przesuwania
  • Kolor dużej ikony manewru
  • Kolor małej ikony manewru
Asystent pasa ruchu
  • Kolor zalecanego pasa

Ten przykład pokazuje, 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

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 ma jednak wpływu na informacje o natężeniu ruchu na trasie wyznaczonej przez nawigację.

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łączanie sygnalizacji świetlnej i znaków stopu

Możesz włączyć sygnalizację świetlną i znaki stopu w interfejsie mapy. Dzięki tej funkcji kierowca 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 sygnalizacja świetlna i znaki stopu w pakiecie SDK nawigacji są wyłączone. Aby włączyć tę funkcję, wywołaj metodę DisplayOptions w przypadku każdej z nich z osobna.

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 API Map Google.

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 do szerokości i długości geograficznej na mapie ani etykiety. Więcej informacji znajdziesz w oknach informacyjnych.

Wyświetlanie ograniczenia prędkości

Możesz programowo wyświetlać lub ukrywać ikonę ograniczenia prędkości. Użyj przycisku NavigationView.setSpeedLimitIconEnabled() lub SupportNavigationFragment.setSpeedLimitIconEnabled(), aby wyświetlić lub ukryć ikonę ograniczenia prędkości. Gdy ta funkcja jest włączona, w dolnym rogu podczas prowadzenia pojazdu wyświetla się ikona ograniczenia prędkości. Ikona wyświetla ograniczenie prędkości na drodze, po której porusza się pojazd. 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 ponownego wyśrodkowania.

Ustaw tryb nocny

Możesz automatycznie sterować działaniem trybu nocnego. Użyj przycisku NavigationView.setForceNightMode() lub SupportNavigationFragment.setForceNightMode(), aby włączyć lub wyłączyć tryb nocny, albo pozwolić, aby sterował nim pakiet SDK nawigacji na Androida.

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

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 swojej 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 NavigationView. Na przykład:

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

Ukrywam trasy alternatywne

Gdy interfejs użytkownika zaśmieca się za dużo informacji, możesz zwiększyć przejrzystość informacji, wyświetlając mniej tras alternatywnych niż domyślne (2) lub nie wyświetlając żadnych tras alternatywnych. 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 dwie alternatywne trasy.
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 wyświetlany na prawej krawędzi mapy po rozpoczęciu nawigacji. Gdy ta opcja jest włączona, wyświetlany jest przegląd całej podróży wraz z miejscem docelowym kierowcy i bieżącą pozycją.

Dzięki temu kierowcy mogą szybko przewidywać nadchodzące problemy, np. natężenie ruchu, bez konieczności powiększania widoku. W razie potrzeby mogą zmienić trasę. Jeśli kierowca zmieni trasę, pasek postępu zostanie zresetowany tak, jakby rozpoczynała się nowa podróż.

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

  • Upływ trasy – pozostały czas podróży.

  • Aktualna pozycja – bieżąca lokalizacja kierowcy na trasie.

  • Stan ruchu – stan nadchodzącego ruchu.

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

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

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