Modyfikowanie interfejsu użytkownika

Za pomocą pakietu Navigation SDK na Androida możesz zmodyfikować wrażenia użytkownika związane z mapą, określając, które z wbudowanych elementów i elementów interfejsu użytkownika mają się wyświetlać na mapie. Możesz też dostosować wygląd interfejsu nawigacji. Zasady dotyczące dozwolonych modyfikacji interfejsu nawigacji znajdziesz na stronie zasad.

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

Elementy sterujące mapy

Elementy sterujące interfejsu mapy to zalecany sposób umieszczania niestandardowych elementów interfejsu w widoku nawigacji, aby zapewnić prawidłowe pozycjonowanie. Gdy wbudowany układ ulegnie zmianie, pakiet Navigation SDK na Androida automatycznie zmieni położenie elementów sterujących. W przypadku każdej pozycji możesz ustawić jeden widok niestandardowych ustawień. Jeśli Twój projekt wymaga wielu elementów interfejsu, możesz umieścić je w elementach ViewGroup i przekazać je metodzie setCustomControl.

Metoda setCustomControl udostępnia pozycje zdefiniowane w enumeracji CustomControlPosition:

  • 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.
Niestandardowe pozycje elementów sterujących w orientacji pionowej
Niestandardowe pozycje elementów sterujących w orientacji poziomej.
Niestandardowe pozycje elementów sterujących w orientacji poziomej

Dodawanie elementu sterującego niestandardowego

  1. Utwórz element Android View za pomocą niestandardowego elementu interfejsu lub grupy ViewGroup.
  2. Rozwinąć kod XML lub utworzyć instancję widoku niestandardowego, aby uzyskać instancję widoku.
  3. Użyj wartości NavigationView.setCustomControl lub SupportNavigationFragment.setCustomControl z wybraną pozycją elementu sterującego niestandardowego z CustomControlPosition enum.

    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 elementu sterującego niestandardowego

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

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Niestandardowe pozycje elementów sterujących

Nagłówek dodatkowy

Pozycja elementów sterujących w niestandardowym nagłówku w orientacji pionowej
Położenie elementów sterujących w nagłówku dodatkowym w orientacji pionowej

Aby użyć tej niestandardowej pozycji elementu sterującego, prześlij pozycję CustomControlPosition.SECONDARY_HEADER do setCustomControl.

Domyślnie układy ekranu w trybie nawigacji zawierają miejsce na dodatkowy nagłówek znajdujący się pod nagłówkiem głównym. Ten nagłówek dodatkowy pojawia się w razie potrzeby, np. w przypadku wskazywania pasa ruchu. Aplikacja może używać tego drugiego nagłówka w tym miejscu układu na potrzeby treści niestandardowych. Gdy korzystasz z tej funkcji, masz kontrolę nad domyślnymi treściami w nagłówku dodatkowym. Jeśli widok nawigacji ma tło, to tło pozostaje na swoim miejscu, przykryte przez nagłówek dodatkowy. Gdy aplikacja usunie element sterujący niestandardowy, na jego miejscu może pojawić się dowolny domyślny nagłówek dodatkowy.

Górna krawędź niestandardowej pozycji nagłówka drugorzędnego jest wyrównana 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.

Zacznij od dołu

Pozycja dolnego elementu sterującego w orientacji pionowej
Pozycja elementów sterujących w domyślnej pozycji na dole w orientacji pionowej
Dolna pozycja niestandardowego elementu sterującego w orientacji poziomej
Położenie elementów sterujących w poziomie na dole

Aby użyć tej niestandardowej pozycji elementu sterującego, prześlij pozycję CustomControlPosition.BOTTOM_START_BELOW do setCustomControl.

To niestandardowe położenie elementu sterującego znajduje się w lewym dolnym rogu mapy. W przypadku zarówno portrait mode, jak i landscape mode widok ten znajduje się nad kartą ETA lub niestandardowym stopem strony (lub u dołu mapy, jeśli żadne z tych elementów nie jest obecne), a elementy pakietu SDK nawigacji, w tym przycisk ponownego wyśrodkowania i logo Google, przesuwają się w górę, aby uwzględnić wysokość widoku niestandardowych elementów sterujących. To ustawienie znajduje się w widocznych granicach mapy, więc wszelkie wcięcia dodane do dolnej lub górnej krawędzi mapy również zmienią pozycję tego ustawienia.

Dolna krawędź

Pozycja dolnego końca elementów sterujących w orientacji pionowej
Pozycja elementów sterujących w dolnej części ekranu w orientacji pionowej
Pozycja dolnego końca niestandardowego elementu sterującego w orientacji poziomej.
Pozycja elementów sterujących w dolnej części ekranu w orientacji poziomej

Aby użyć tej niestandardowej pozycji elementu sterującego, prześlij pozycję CustomControlPosition.BOTTOM_END_BELOW do setCustomControl.

Ta pozycja elementu sterującego znajduje się w prawym dolnym rogu mapy. W trybie portrait mode znajduje się nad kartą szacowanego czasu dotarcia lub niestandardowym stopniem dolnym (lub u dołu mapy, jeśli żadne z tych elementów nie są obecne), ale w trybie landscape mode jest wyrównany z dołem mapy. Wszystkie elementy pakietu SDK nawigacji widoczne po prawej stronie (po lewej stronie w przypadku języków zapisywanych od lewej do prawej) przesuwają się w górę, aby uwzględnić wysokość widoku niestandardowych elementów sterujących. To ustawienie znajduje się w widocznych granicach mapy, więc dodanie wypełnień do dolnej lub bocznej krawędzi mapy spowoduje również zmianę pozycji tego ustawienia.

Pozycja niestandardowego elementu sterującego w stopce w orientacji pionowej
Pozycja elementów sterujących w stopce w orientacji pionowej
Pozycja niestandardowego elementu sterującego w stopce w orientacji poziomej
Pozycja elementów sterujących w stopce w orientacji poziomej

Aby użyć tej niestandardowej pozycji elementu sterującego, prześlij pozycję CustomControlPosition.FOOTER do setCustomControl.

Ta pozycja kontrolera jest przeznaczona do niestandardowego widoku stopki. Jeśli widoczna jest karta z szacowanym czasem dotarcia na miejsce w pakiecie SDK nawigacji, to ustawienie znajduje się nad nią. W przeciwnym razie element jest wyrównany do dołu mapy. W przeciwieństwie do elementów sterujących BOTTOM_START_BELOWBOTTOM_END_BELOW ten element jest umieszczony poza widocznymi granicami mapy, co oznacza, że dodanie do mapy jakiegokolwiek marginesu nie spowoduje zmiany położenia tego elementu.

portrait mode niestandardowa stopka ma pełną szerokość. Elementy sterujące niestandardowe w pozycjach CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW, a także elementy interfejsu użytkownika w pakiecie Nav SDK, takie jak przycisk ponownego wyśrodkowania i logo Google, znajdują się nad stopką elementu sterującego niestandardowego. Domyślna pozycja strzałki uwzględnia niestandardową wysokość stopki.

landscape mode niestandardowy stopka ma połowę szerokości i jest wyrównany do lewej strony (w językach z kierunkiem pisania od lewej do prawej), tak jak karta ETA w Nav SDK. Elementy niestandardowe w pozycji CustomControlPosition.BOTTOM_START_BELOW i elementy interfejsu użytkownika pakietu SDK nawigacji, takie jak przycisk ponownego wyśrodkowania i logo Google, znajdują się nad stopką elementu niestandardowego. Elementy sterujące niestandardowe w pozycji CustomControlPosition.BOTTOM_END_BELOW i wszystkie elementy interfejsu SDK nawigacji na końcu (po prawej stronie w przypadku języków zapisywanych od lewej do prawej) pozostają wyrównane z dolną krawędzią mapy. Domyślna pozycja strzałki nie zmienia się, gdy jest widoczna niestandardowa stopka, ponieważ nie sięga ona do końca mapy.

Elementy sterujące niestandardowe w pozycjach CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW, a także elementy interfejsu użytkownika pakietu Nav SDK, takie jak przycisk ponownego wyśrodkowania i logo Google, znajdują się nad stopką elementu sterującego niestandardowego.

Akcesoria mapy w interfejsie

Pakiet SDK do nawigacji na Androida udostępnia elementy interfejsu użytkownika, które pojawiają się podczas nawigacji i są podobne do tych, które można znaleźć w aplikacji Mapy Google na Androida. Możesz dostosować widoczność lub wygląd tych elementów sterujących zgodnie z opisem 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

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

Możesz ustawić te atrybuty:

Typ atrybutuAtrybuty
Kolor tła
  • Tryb dzienny główny – kolor nagłówka nawigacji w dzień
  • Tryb dzienny dodatkowy – kolor wskaźnika następnego skrętu w dniu
  • Podstawowy tryb nocny – kolor nagłówka menu w nocy
  • Tryb nocny dodatkowy – kolor wskaźnika następnego skrętu w nocy
Elementy tekstowe instrukcji
  • Kolor tekstu
  • Czcionka
  • Rozmiar tekstu w pierwszej linii
  • Rozmiar tekstu w drugiej linii
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 rekomendowanych pasów

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 danych o natężeniu ruchu

Użyj opcji GoogleMap.setTrafficEnabled(), aby włączyć lub wyłączyć warstwę natężenia ruchu na mapie. To ustawienie wpływa na wskazania gęstości ruchu wyświetlane na mapie jako całości. Nie wpływa jednak na wskazania dotyczące 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.

W interfejsie mapy możesz włączyć sygnalizację świetlną i znaki stop. Dzięki tej funkcji użytkownik może włączyć wyświetlanie sygnalizacji świetlnej lub ikony znaków drogowych na trasie, co zapewnia lepszy kontekst dla bardziej wydajnych i dokładnych podróży.

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

Dodawanie znaczników niestandardowych

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

tekst pływający,

Tekst unoszący się nad innymi elementami możesz dodawać w dowolnym miejscu w aplikacji, o ile nie zasłania informacji o Google. Pakiet SDK nawigacji nie obsługuje zakotwiczenia tekstu do współrzędnych geograficznych na mapie ani do etykiety. Aby dowiedzieć się więcej, otwórz okno Informacje.

Wyświetlanie ograniczeń 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(). Gdy ta opcja jest włączona, podczas wskazywania trasy w prawym dolnym rogu wyświetla się ikona limitu prędkości. Ikona wyświetla ograniczenie prędkości obowiązujące na drodze, po której porusza się pojazd. Ikona jest widoczna 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 recentrowania.

Ustawianie trybu nocnego

Tryb nocny możesz kontrolować programowo. Użyj NavigationView.setForceNightMode() lub SupportNavigationFragment.setForceNightMode(), aby włączyć lub wyłączyć tryb nocny, albo pozwól pakietowi SDK do 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 włącza tryb nocny.
  • FORCE_DAY włącza tryb dzienny.

Ten przykład pokazuje, jak wymusić włączenie trybu nocnego w fragmentie 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 przekazać zdarzenia z cyklu życia do usługi DirectionsListView tak samo jak do usługi 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 wyliczenia:

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 alternatywne trasy.

Poniższy przykład kodu 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 przejazdu 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.

Umożliwia użytkownikom szybkie przewidywanie nadchodzących problemów, takich jak korki, bez konieczności przybliżania mapy. W razie potrzeby może zmienić trasę przejazdu. Jeśli użytkownik zmieni trasę przejazdu, 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:

  • Przebyty odcinek trasy – przebyty odcinek trasy.

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

  • Stan ruchu – stan zbliżającego się ruchu.

  • Ostateczny cel podróży – końcowy cel podróży.

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

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