Dostosowywanie interfejsu nawigacji

Możesz dostosowywać elementy interfejsu użytkownika i mapy, a także dodawać do mapy znaczniki niestandardowe. Wskazówki dotyczące akceptowanych modyfikacji interfejsu nawigacji znajdziesz na stronie Zasady.

Wyświetl kod

Dostosowywanie nagłówka nawigacyjnego

Użyj elementu NavigationFragment.setStylingOptions() lub NavigationView.setStylingOptions(), aby zmienić motyw nagłówka nawigacyjnego i wskaźnika następnego zakrę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 dzienny – kolor dzienny nagłówka nawigacji
  • Dodatkowy tryb dzienny – kolor dzienny wskaźnika następnego zakrętu
  • Główny tryb nocny – kolor nagłówka nawigacji w nocy
  • Dodatkowy tryb nocny - kolor nocny wskaźnika następnego zakrętu
Elementy tekstowe instrukcji
  • Kolor tekstu
  • Czcionka
  • Rozmiar tekstu w pierwszym wierszu
  • Rozmiar tekstu w drugim wierszu
Elementy tekstowe dotyczące 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 skrętu
  • Kolor dużej ikony manewru
  • Kolor małej ikony manewru
Asystent pasa ruchu
  • Kolor zalecanych pasów lub pasów

Z przykładu poniżej dowiesz się, jak ustawić opcje stylu:

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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 opcji NavigationMap.setTrafficEnabled(). To ustawienie wpływa na wskaźniki natężenia ruchu widoczne na całej mapie, ale nie ma wpływu na informacje o natężeniu ruchu na trasie wyznaczonej przez nawigatora.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

Dodaj znaczniki niestandardowe

Do mapy możesz dodawać znaczniki niestandardowe, aby wskazywać ciekawe miejsca dla aplikacji lub użytkowników. Możesz na przykład wskazać punkt odbioru na końcu trasy. Użyj NavigationMap.addMarker(), aby dodać znacznik, i NavigationMap.setOnMarkerClickListener(), aby nasłuchiwać jego kliknięć.

W poniższym kodzie używana jest ikona zapisana w zasobach możliwych do utworzenia projektu R.drawable.ic_person_pin_48dp. Możesz użyć dowolnego obrazu, który pasuje do Twojej aplikacji.

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

Jako znacznik możesz określić obraz niestandardowy, ale pakiet SDK nie obsługuje obecnie oznaczania tych obrazów etykietami tekstu. Więcej informacji znajdziesz w artykule Dostosowywanie znaczników.

Tekst pływający

Możesz umieścić tekst w dowolnym miejscu w aplikacji, o ile nie zostanie uwzględniona atrybucja Google. Pakiet SDK nawigacji nie obsługuje kotwicy tekstu na szerokości i długości geograficznej na mapie ani do etykiety. Więcej informacji znajdziesz w artykule o oknach informacyjnych.

Wyświetl ograniczenie prędkości

Możesz automatycznie wyświetlać lub ukrywać ikonę ograniczenia prędkości. Użyj NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() lub SupportNavigationFragment.setSpeedLimitIconEnabled(), aby wyświetlić lub ukryć ikonę ograniczenia prędkości. Po włączeniu tej funkcji w dolnym rogu wyświetla się ikona ograniczenia prędkości. Pokazuje ona ograniczenie prędkości na drodze, po której porusza się pojazd. Ta 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 wygładzania.

Ustaw tryb nocny

Możesz zaprogramować działanie trybu nocnego. Użyj NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() lub SupportNavigationFragment.setForceNightMode(), aby włączyć lub wyłączyć tryb nocny. Możesz też pozwolić, aby pakiet SDK do nawigacji był nim sterowany.

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

Poniższy przykład pokazuje wymuszanie włączenia trybu nocnego w fragmencie nawigacji:

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

Wyświetl listę wskazówek dojazdu

Najpierw utwórz widok i dodaj go do hierarchii.

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

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

Ukrywam trasy alternatywne

Gdy interfejs użytkownika jest zapełniony nadmiarem informacji, można go zmniejszyć, wyświetlając mniej tras alternatywnych niż domyślna (2) 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 wyliczeniowych:

Wartość wyliczeniaOpis
AlternateRoutesStrategy.SHOW_ALL Domyślny: Wyświetla maksymalnie dwie alternatywne trasy.
AlternateRoutesStrategy.SHOW_ONE Wyświetla jedną alternatywną trasę (jeśli jest dostępna).
AlternateRoutesStrategy.SHOW_NONE Ukrywa trasy alternatywne.

Przykład

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