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. Wskazówki na temat dopuszczalnych modyfikacji interfejsu nawigacji 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 niestandardowych elementów sterujących po zmianie wbudowanego układu. Dla każdej pozycji układu możesz ustawić jeden niestandardowy element sterujący. Niestandardowy element sterujący może być 1 elementem interfejsu lub, jeśli Twój projekt wymaga więcej, możesz użyć ViewGroup z wieloma elementami interfejsu.

Metoda setCustomControl podaje pozycje zdefiniowane w CustomControlPositionwyliczeniu:

  • 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 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, pozostanie ono bez zmian i zakryje dodatkowy nagłówek. Gdy aplikacja usunie ustawienie niestandardowe, 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ć wystąpienie widoku do dodania jako nagłówek dodatkowy.
  3. Użyj właściwości NavigationView.setCustomControl lub SupportNavigationFragment.setCustomControl z parametrem 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 nawigacji lub jego fragmencie i określ element sterujący oraz pozycję, której chcesz używać.

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 zostaną odzwierciedlone podczas kolejnej sesji nawigacji.

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

Wyświetl kod

Modyfikowanie nagłówka nawigacyjnego

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.
  • 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 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 sygnalizacja świetlna i znaki stopu w pakiecie SDK nawigacji są wyłączone. Aby włączyć tę funkcję, wywołaj 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 na szerokości i długości geograficznej na mapie ani do etykiety. Więcej informacji znajdziesz w sekcji Okna informacyjne.

Wyświetlanie ograniczenia prędkości

Możesz programowo 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. Jeśli ta opcja jest włączona, w dolnym rogu 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.

// Wyświetl ikonę ograniczenia prędkości mNavFragment.setSpeedLimitIconEnabled(true);

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

Ustaw tryb nocny

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

  • 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świetlane są informacje ogólne dotyczące 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:

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

  • 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 podróży, wywołując metodę setTripProgressBarEnabled() w obiekcie NavigationView lub SupportNavigationFragment. Na przykład:

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