Modyfikowanie interfejsu użytkownika

Korzystając z pakietu Navigation SDK na Androida, możesz modyfikować sposób, w jaki użytkownicy korzystają z na mapie, określając, które z wbudowanych elementów interfejsu mapę. Możesz też dostosować wygląd interfejsu nawigacji. Poleć wejdź na stronę Zasady wytycznych dotyczących dopuszczalnych modyfikacji interfejsu nawigacyjnego.

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. W przypadku każdej pozycji układu możesz określić jeden niestandardowy element sterujący. Elementem niestandardowym może być jeden element interfejsu wymaga więcej, możesz użyć elementu ViewGroup z wieloma elementami interfejsu.

setCustomControl zapewnia pozycje zdefiniowane w CustomControlPosition wyliczenie:

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

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

Kontrola niestandardowa
Pozycje

Dodawanie niestandardowego nagłówka dodatkowego

Domyślnie układy ekranu w trybie nawigacji umożliwiają znajduje się pod nagłówkiem głównym. Ten dodatkowy nagłówek pojawia się, gdy: np. przy korzystaniu z asystenta pasa ruchu. Twoja aplikacja może używać tego dodatkowego nagłówka pozycji układu dla treści niestandardowej. Gdy korzystasz z tej funkcji, obejmuje całą domyślną treść dodatkowego nagłówka. Jeśli widok nawigacji zawiera Tło pozostanie na swoim miejscu, zakryte dodatkowym nagłówkiem. Gdy aplikacja usunie niestandardową element sterujący, każdy domyślny nagłówek dodatkowy może w ich miejscu.

Pozycja niestandardowego dodatkowego nagłówka wyrównuje jego górną krawędź do dolnej krawędzi głównego nagłówka. Ta pozycja jest obsługiwana tylko w języku: portrait mode. W landscape mode, dodatkowy nagłówek jest niedostępny, a układ nie .

  1. Utwórz widok Androida. niestandardowym elementem interfejsu lub ViewGroup.
  2. Zwiększ rozmiar pliku XML lub utwórz instancję widoku niestandardowego, aby uzyskać instancję który ma zostać dodany jako dodatkowy nagłówek.
  3. Użyj formy płatności NavigationView.setCustomControl lub SupportNavigationFragment.setCustomControl z parametrem CustomControlPosition jako DRUGER_NAGŁÓWKA.

    W przykładzie poniżej tworzy się fragment i dodaje do niego niestandardową kontrolkę 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 Metoda 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 okna widok nawigacji. Gdy aplikacja doda niestandardowe elementy sterujące, przycisk wyśrodkuj ekran i logo Google przesuwa 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 i określić element sterujący i pozycję, która ma być używana.

Poniższy przykład pokazuje niestandardowe pole View dodane 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 pozycji elementu sterującego, 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ę nawigacji podobnej do tych w aplikacji Mapy Google na Androida. Możesz dostosować widoczność i wygląd tych elementów sterujących, opisane w tej sekcji. Wprowadzone tutaj zmiany zostaną odzwierciedlone przez sesji nawigacji.

Zapoznaj się z Zasadami z wytycznymi dotyczącymi akceptowalne modyfikacje interfejsu użytkownika.

Wyświetl kod

Modyfikowanie nagłówka nawigacyjnego

Używaj SupportNavigationFragment.setStylingOptions() lub NavigationView.setStylingOptions() aby zmienić motyw nagłówka nawigacji i wskaźnika następnego zakrętu, jest wyświetlana pod nagłówkiem, gdy jest dostępna.

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żywaj GoogleMap.setTrafficEnabled() aby włączyć lub wyłączyć na mapie warstwę natężenia ruchu. To ustawienie wpływa na oznaczenia natężenia ruchu widoczne na mapie jako całość. Nie powoduje to jednak mają wpływ 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 swoim .

Domyślnie sygnalizacja świetlna i znaki stopu są wyłączone Pakiet SDK do nawigacji. Aby włączyć tę funkcję, wywołaj DisplayOptions 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. Przejdź do Dokumentacja interfejsu API Map Google .

Tekst pływający

Tekst pływający możesz dodać w dowolnym miejscu w aplikacji, pod warunkiem że nie zasłania on Atrybucja Google. Pakiet Navigation SDK nie obsługuje zakotwiczenia tekstu szerokości i długości geograficznej na mapie lub etykiety. Otwórz stronę Informacje Windows i informacjami o nich.

Wyświetlanie ograniczenia prędkości

Możesz programowo wyświetlać lub ukrywać ikonę ograniczenia prędkości. Używaj NavigationView.setSpeedLimitIconEnabled() lub SupportNavigationFragment.setSpeedLimitIconEnabled() aby wyświetlić lub ukryć ikonę ograniczenia prędkości. Gdy ta opcja jest włączona, ikona ograniczenia prędkości w dolnym rogu. Ikona wyświetla ograniczenie prędkości drogi, po której porusza się pojazd. Ikona pojawia się tylko w wybranych lokalizacjach gdzie 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 przycisk ponownego wyśrodkowania jest wyświetlenie.

Ustaw tryb nocny

Możesz automatycznie sterować działaniem trybu nocnego. Używaj NavigationView.setForceNightMode() lub SupportNavigationFragment.setForceNightMode() , by włączyć lub wyłączyć tryb nocny, albo pozwolić pakietowi Navigation SDK na Androida i ją kontrolować.

  • AUTO Pozwala pakietowi Navigation SDK określić odpowiednio do 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 nawigacji fragment:

// 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));
}

Przekazuj zdarzenia cyklu życia do DirectionsListView w taki sam sposób jak są z użytkownikami NavigationView. Na przykład:

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

Ukrywam trasy alternatywne

Gdy interfejs użytkownika zapełnia się za dużo informacji, możesz zmniejsz bałagan, wyświetlając mniej alternatywnych tras niż domyślne (2) lub nie wyświetlając żadnych tras alternatywnych. Możesz skonfigurować tę opcję przed pobierasz trasy, wywołując funkcję 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 prawym końcu, widoku mapy po rozpoczęciu nawigacji. Po włączeniu wyświetla się przegląd całą podróż, wraz z miejscem docelowym i bieżącym miejscem użytkownika.

Zapewnia to użytkownikom możliwość szybkiego przewidywania nadchodzących problemów, takich jak bez konieczności powiększania widoku. Może on zmienić trasę, jeśli niezbędną. Jeśli użytkownik zmieni trasę, pasek postępu zostanie zresetowany tak, jakby nowy rozpoczął 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łączono NavigationView lub SupportNavigationFragment. Na przykład:

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