Modyfikowanie interfejsu użytkownika

Za pomocą pakietu Navigation SDK na Androida możesz modyfikować wrażenia użytkowników związane z mapą, określając, które wbudowane elementy sterujące i elementy interfejsu mają się na niej pojawiać. Możesz też dostosować wygląd interfejsu nawigacji. Wskazówki dotyczące dopuszczalnych modyfikacji interfejsu nawigacji znajdziesz na stronie Zasady.

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

Elementy sterujące interfejsu mapy

Aby umieścić niestandardowe elementy interfejsu w widoku nawigacji, użyj elementów sterujących interfejsu mapy, aby zapewnić prawidłowe pozycjonowanie. Gdy wbudowany układ się zmieni, pakiet Navigation SDK na Androida automatycznie zmieni położenie niestandardowych elementów sterujących. W każdej pozycji możesz ustawić 1 niestandardowy widok elementu sterującego. Jeśli projekt wymaga użycia kilku elementów interfejsu, możesz umieścić je w elemencie ViewGroup i przekazać go do metody setCustomControl.

Metoda setCustomControl udostępnia pozycje zdefiniowane w CustomControlPosition wyliczeniu:

  • SECONDARY_HEADER (wyświetla się tylko w orientacji pionowej)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
Niestandardowe pozycje elementów sterujących w orientacji pionowej.
Pozycje niestandardowych elementów sterujących w orientacji pionowej
Niestandardowe pozycje elementów sterujących w orientacji poziomej.
Pozycje niestandardowych elementów sterujących w orientacji poziomej

Dodawanie niestandardowego elementu sterującego

  1. Utwórz widok Androida z niestandardowym elementem interfejsu lub elementem ViewGroup.
  2. Rozwiń kod XML lub utwórz instancję widoku niestandardowego, aby uzyskać instancję widoku.
  3. Użyj NavigationView.setCustomControl lub SupportNavigationFragment.setCustomControl z wybraną pozycją niestandardowego elementu sterującego z wyliczenia CustomControlPosition.

    W przykładzie poniżej tworzymy fragment i dodajemy niestandardowy element sterujący w pozycji nagłówka dodatkowego.

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

Usuwanie niestandardowego elementu sterującego

Aby usunąć niestandardowy element sterujący, wywołaj metodę setCustomControl z parametrem widoku null i wybraną pozycją niestandardowego elementu sterującego.

Na przykład ten fragment kodu usuwa niestandardowy nagłówek dodatkowy i przywraca domyślną treść:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Pozycje niestandardowych elementów sterujących

Nagłówek dodatkowy

Pozycja niestandardowego elementu sterującego w nagłówku dodatkowym w orientacji pionowej.
Pozycja niestandardowego elementu sterującego w nagłówku dodatkowym w orientacji pionowej

Aby użyć tej pozycji niestandardowego elementu sterującego, przekaż pozycję CustomControlPosition.SECONDARY_HEADER do metody setCustomControl.

Domyślnie układy ekranu w trybie nawigacji udostępniają pozycję nagłówka dodatkowego, która znajduje się pod nagłówkiem głównym. Ten nagłówek dodatkowy pojawia się w razie potrzeby, np. w przypadku asystenta pasa ruchu. Aplikacja może używać tej pozycji nagłówka dodatkowego w układzie do wyświetlania treści niestandardowych. Gdy używasz tej funkcji, element sterujący zakrywa domyślną treść nagłówka dodatkowego. Jeśli widok nawigacji ma tło, pozostaje ono na swoim miejscu, przykryte nagłówkiem dodatkowym. Gdy aplikacja usunie niestandardowy element sterujący, w jego miejscu może się pojawić domyślny nagłówek dodatkowy.

Pozycja niestandardowego nagłówka dodatkowego jest wyrównana do dolnej krawędzi nagłówka głównego. Ta pozycja jest obsługiwana tylko w portrait mode. W landscape mode, nagłówek dodatkowy jest niedostępny, a układ nie zmienia się.

Dół po lewej

Niestandardowa pozycja elementu sterującego u dołu w orientacji pionowej.
Pozycja niestandardowego elementu sterującego w dole po lewej w orientacji pionowej
Niestandardowa pozycja elementu sterującego u dołu w orientacji poziomej.
Pozycja niestandardowego elementu sterującego w dole po lewej w orientacji poziomej

Aby użyć tej pozycji niestandardowego elementu sterującego, przekaż pozycję CustomControlPosition.BOTTOM_START_BELOW do metody setCustomControl.

Ta pozycja niestandardowego elementu sterującego znajduje się w lewym dolnym rogu mapy. Zarówno w portrait mode jak i landscape mode, znajduje się ona nad kartą z szacowanym czasem dotarcia na miejsce i/lub niestandardową stopką (lub u dołu mapy, jeśli żadna z tych opcji nie jest dostępna), a elementy pakietu SDK Nav w tym przycisk ponownego wyśrodkowania i logo Google, przesuwają się w górę, aby uwzględnić wysokość widoku niestandardowego elementu sterującego. Ten element sterujący jest umieszczony w widocznych granicach mapy, więc wszelkie dopełnienie dodane do dolnej lub lewej krawędzi mapy zmieni też położenie tego elementu sterującego.

Dół po prawej

Niestandardowa pozycja elementu sterującego na dole w orientacji pionowej.
Pozycja niestandardowego elementu sterującego w dole po prawej w orientacji pionowej
Niestandardowa pozycja elementu sterującego na dole w orientacji poziomej.
Pozycja niestandardowego elementu sterującego w dole po prawej w orientacji poziomej

Aby użyć tej pozycji niestandardowego elementu sterującego, przekaż pozycję CustomControlPosition.BOTTOM_END_BELOW do metody setCustomControl.

Ta pozycja niestandardowego elementu sterującego znajduje się w prawym dolnym rogu mapy. W portrait mode znajduje się ona nad kartą z szacowanym czasem dotarcia na miejsce i/lub niestandardową stopką (lub u dołu mapy, jeśli żadna z tych opcji nie jest dostępna), ale w landscape mode jest wyrównana do dołu mapy. Wszystkie elementy pakietu Nav SDK widoczne po prawej stronie (w przypadku języków pisanych od lewej do prawej) przesuwają się w górę, aby uwzględnić wysokość widoku niestandardowego elementu sterującego. Ten element sterujący jest umieszczony w widocznych granicach mapy, więc wszelkie dopełnienie dodane do dolnej lub prawej krawędzi mapy zmieni też położenie tego elementu sterującego.

Położenie niestandardowego elementu sterującego w stopce w orientacji pionowej.
Pozycja niestandardowego elementu sterującego w stopce w orientacji pionowej
Pozycja niestandardowego elementu sterującego w stopce w orientacji poziomej.
Pozycja niestandardowego elementu sterującego w stopce w orientacji poziomej

Aby użyć tej pozycji niestandardowego elementu sterującego, przekaż pozycję CustomControlPosition.FOOTER do metody setCustomControl.

Ta pozycja niestandardowego elementu sterującego jest przeznaczona dla niestandardowego widoku stopki. Jeśli widoczna jest karta z szacowanym czasem dotarcia pakietu Nav SDK, ten element sterujący znajduje się nad nią. W przeciwnym razie element sterujący jest wyrównany do dołu mapy. W przeciwieństwie do niestandardowych elementów sterujących BOTTOM_START_BELOW i BOTTOM_END_BELOW ten element sterujący jest umieszczony poza widocznymi granicami mapy, co oznacza, że wszelkie dopełnienie dodane do mapy nie zmieni położenia tego elementu sterującego.

W portrait mode niestandardowa stopka ma pełną szerokość. Niestandardowe elementy sterujące w pozycjach CustomControlPosition.BOTTOM_START_BELOW i CustomControlPosition.BOTTOM_END_BELOW, a także elementy interfejsu pakietu Nav SDK, takie jak przycisk ponownego wyśrodkowania i logo Google, są umieszczone nad niestandardową stopką elementu sterującego. Domyślna pozycja szewronu uwzględnia wysokość niestandardowej stopki.

W landscape mode niestandardowa stopka ma połowę szerokości i jest wyrównana do lewej strony (w przypadku języków pisanych od lewej do prawej), tak jak karta z szacowanym czasem dotarcia pakietu Nav SDK. Niestandardowe elementy sterujące w pozycji CustomControlPosition.BOTTOM_START_BELOW oraz elementy interfejsu pakietu Nav SDK, takie jak przycisk ponownego wyśrodkowania i logo Google, są umieszczone nad niestandardową stopką elementu sterującego. Niestandardowe elementy sterujące w pozycji CustomControlPosition.BOTTOM_END_BELOW oraz wszystkie elementy interfejsu pakietu Nav SDK po prawej stronie (w przypadku języków pisanych od lewej do prawej) pozostają wyrównane do dołu mapy. Domyślna pozycja szewronu nie zmienia się, gdy jest obecna niestandardowa stopka, ponieważ nie rozciąga się ona do prawej strony mapy.

Niestandardowe elementy sterujące w pozycjach CustomControlPosition.BOTTOM_START_BELOW i CustomControlPosition.BOTTOM_END_BELOW, a także elementy interfejsu pakietu Nav SDK, takie jak przycisk ponownego wyśrodkowania i logo Google, są umieszczone nad niestandardową stopką elementu sterującego.

Dodatki do interfejsu mapy

Pakiet Navigation SDK na Androida udostępnia dodatki do interfejsu, które pojawiają się podczas nawigacji podobnie jak w aplikacji Mapy Google na Androida. Widoczność lub wygląd tych elementów sterujących możesz dostosować zgodnie z opisem w tej sekcji. Wprowadzone tu zmiany będą widoczne podczas następnej sesji nawigacji.

Wskazówki dotyczące dopuszczalnych modyfikacji interfejsu nawigacji znajdziesz na stronie Zasady.

Wyświetlanie kodu

Wyróżnianie miejsca docelowego i wejść

Gdy miejsce docelowe zostanie utworzone za pomocą parametru placeID, budynek docelowy zostanie wyróżniony, a ikona wejścia będzie wyświetlana, jeśli to możliwe. Te wskazówki wizualne pomagają użytkownikom rozróżniać miejsca docelowe i do nich nawigować.

Aby utworzyć miejsce docelowe za pomocą parametru placeID, użyj metody.Waypoint.Builder.setPlaceIdString()

Modyfikowanie nagłówka nawigacji

Aby zmienić motyw nagłówka nawigacji i wskaźnika następnego skrętu, który pojawia się pod nagłówkiem, gdy jest dostępny, użyj metody SupportNavigationFragment.setStylingOptions() lub NavigationView.setStylingOptions().

Możesz ustawić te atrybuty:

Typ atrybutuAtrybuty
Kolor tła
  • Kolor podstawowy w trybie dziennym – kolor nagłówka nawigacji w ciągu dnia
  • Kolor dodatkowy w trybie dziennym – kolor wskaźnika następnego skrętu w ciągu dnia
  • Kolor podstawowy w trybie nocnym – kolor nagłówka nawigacji w nocy
  • Kolor dodatkowy w trybie nocnym – 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 następnych 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 lub pasów

W przykładzie poniżej pokazujemy, 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 metody GoogleMap.setTrafficEnabled(). To ustawienie wpływa na wskazania natężenia ruchu wyświetlane 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łączanie sygnalizacji świetlnej i znaków stop

Podczas aktywnej nawigacji możesz włączyć wyświetlanie sygnalizacji świetlnej i znaków stop na mapie, co zapewnia dodatkowy kontekst dla tras i manewrów.

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

W przykładzie poniżej pokazujemy, jak ukryć sygnalizację świetlną i znaki stop:

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

Dodawanie niestandardowych znaczników

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

Pływający tekst

Możesz dodać pływający tekst w dowolnym miejscu aplikacji, o ile nie zakrywa on atrybucji Google. Pakiet Navigation SDK nie obsługuje zakotwiczania tekstu do szerokości i długości geograficznej na mapie ani do etykiety. Więcej informacji znajdziesz w artykule Info windows.

Wyświetlanie ograniczenia prędkości

Możesz programowo wyświetlać lub ukrywać ikonę ograniczenia prędkości. Aby wyświetlić lub ukryć ikonę ograniczenia prędkości, użyj metody NavigationView.setSpeedLimitIconEnabled() lub SupportNavigationFragment.setSpeedLimitIconEnabled(). Gdy ta opcja jest włączona, ikona ograniczenia prędkości wyświetla się w dolnym rogu podczas nawigacji. Ikona pokazuje ograniczenie prędkości na drodze, po której porusza się pojazd. Ikona pojawia się tylko w lokalizacjach, 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świetla się przycisk ponownego wyśrodkowania.

Ustawianie trybu nocnego

Możesz programowo sterować działaniem trybu nocnego. Aby włączyć lub wyłączyć tryb nocny albo pozwolić pakietowi Navigation SDK na Androida na sterowanie nim, użyj NavigationView.setForceNightMode() lub SupportNavigationFragment.setForceNightMode().

  • AUTO – pakiet Navigation SDK określa odpowiedni tryb na podstawie lokalizacji urządzenia i czasu lokalnego.
  • FORCE_NIGHT – wymusza włączenie trybu nocnego.
  • FORCE_DAY – wymusza włączenie trybu dziennego.

W przykładzie poniżej pokazujemy, jak wymusić włączenie trybu nocnego we fragmencie nawigacji:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Wyświetlanie listy 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 elementu DirectionsListView tak samo jak w przypadku elementu NavigationView. Na przykład:

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

Ukrywanie tras alternatywnych

Gdy interfejs użytkownika jest przeładowany zbyt dużą ilością informacji, możesz zmniejszyć bałagan, wyświetlając mniej tras alternatywnych niż domyślne (2) lub nie wyświetlając ich wcale. Tę opcję możesz skonfigurować przed pobraniem tras, wywołując metodę RoutingOptions.alternateRoutesStrategy() z jedną z tych wartości wyliczeniowych:

Wartość wyliczeniowaOpis
AlternateRoutesStrategy.SHOW_ALL Domyślna. Wyświetla maksymalnie 2 trasy alternatywne.
AlternateRoutesStrategy.SHOW_ONE Wyświetla 1 trasę alternatywną (jeśli jest dostępna).
AlternateRoutesStrategy.SHOW_NONE Ukrywa trasy alternatywne.

W tym przykładzie kodu pokazujemy, jak całkowicie ukryć trasy alternatywne.

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

Pasek postępu podróży

Pasek postępu podróży został dodany do nawigacji.

Pasek postępu podróży to pionowy pasek, który pojawia się po lewej stronie mapy po rozpoczęciu nawigacji. Gdy ta opcja jest włączona, wyświetla się podsumowanie całej podróży wraz z miejscem docelowym użytkownika i jego bieżącą pozycją.

Umożliwia użytkownikom szybkie przewidywanie nadchodzących problemów, takich jak natężenie ruchu, bez konieczności powiększania. W razie potrzeby mogą zmienić trasę. Jeśli użytkownik zmieni trasę, pasek postępu zostanie zresetowany tak, jakby od tego momentu rozpoczęła się nowa podróż.

Pasek postępu podróży wyświetla te wskaźniki stanu:

  • Czas podróży – czas, który upłynął od rozpoczęcia podróży.

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

  • Natężenie ruchu – stan nadchodzącego natężenia ruchu.

  • Ostateczny cel podróży – ostateczny cel podróży.

Aby włączyć pasek postępu podróży, wywołaj metodę setTripProgressBarEnabled() w NavigationView lub SupportNavigationFragment. Na przykład:

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

Położenie paska postępu podróży

  • Lewa strona paska jest w przybliżeniu wyrównana do lewej strony prędkościomierza, logo Google i przycisku ponownego wyśrodkowania (gdy są widoczne). Szerokość wynosi 12 dp.
  • Pasek postępu podróży ma stałą wysokość. Aby dostosować się do ograniczeń miejsca w pionie na mniejszych urządzeniach, widoczność i wysokość paska postępu podróży dostosowują się na podstawie określonych punktów przerwania wysokości ekranu. Te punkty przerwania są niezależne od orientacji urządzenia i ilości miejsca, jaką mapa zajmuje na ekranie:
  • Wysokość ekranu Widoczność paska postępu podróży Wysokość paska postępu podróży Położenie paska postępu podróży na osi Y
    Mała: 0 dp – 551 dp Niewidoczna Nie dotyczy Nie dotyczy
    Średnia: 552 dp – 739 dp Widoczna 130 dp Nad elementami sterującymi po lewej stronie (prędkościomierz / logo Google / przycisk ponownego wyśrodkowania)
    Duża: 740 dp i więcej Widoczna 290 dp Nad elementami sterującymi po lewej stronie (prędkościomierz / logo Google / przycisk ponownego wyśrodkowania)
  • Jeśli pasek postępu podróży nakłada się na kartę skrętu lub inne elementy interfejsu nawigacji, pojawia się pod nimi.

Kompas

Pakiet Navigation SDK udostępnia grafikę kompasu, która w określonych okolicznościach pojawia się w prawym górnym rogu mapy i tylko wtedy, gdy jest włączona. Gdy użytkownik kliknie kompas, kamera animuje się z powrotem do pozycji z kursem zero (orientacja domyślna), a kompas znika po chwili.

Jeśli nawigacja jest włączona, a tryb kamery jest ustawiony na „śledzenie”, kompas pozostaje widoczny, a kliknięcie kompasu przełącza między perspektywą pochyloną a perspektywą ogólną.

Aby nie rozpraszać kierowcy, kompas pozostaje w tej samej pozycji, jeśli nagłówek (w orientacji pionowej) rozszerza się i koliduje z domyślną pozycją kompasu. Jeśli dodasz niestandardowy element sterujący nagłówka dodatkowego lub widok dodatku do nagłówka, kompas zostanie ukryty, aby uniknąć konfliktów w interfejsie.

Kompas obsługuje tryb dzienny i nocny oraz tryb ciemny.

Kompas jest domyślnie włączony. Czy kompas jest włączony, możesz ustawić za pomocą metody compassEnabled w klasie GoogleMapOptions.

Wyłączanie budynków 3D

Na urządzeniach o ograniczonej wydajności możesz wyłączyć wyświetlanie budynków 3D, wywołując metodę GoogleMap.setBuildingsEnabled(false).

Interfejs Prompt Visibility API (eksperymentalny)

Interfejs Prompt Visibility API umożliwia unikanie konfliktów między elementami interfejsu generowanymi przez pakiet Navigation SDK a własnymi elementami interfejsu niestandardowego przez dodanie odbiornika, który będzie otrzymywać wywołanie zwrotne przed pojawieniem się elementu interfejsu pakietu Navigation SDK i zaraz po jego usunięciu. Więcej informacji, w tym przykłady kodu, znajdziesz w sekcji Prompt Visibility API na stronie Konfigurowanie zakłóceń w czasie rzeczywistym.