Изменить интерфейс навигации

Используя Navigation SDK для Android, вы можете изменить взаимодействие пользователя с вашей картой, определив, какие из встроенных элементов управления и элементов пользовательского интерфейса будут отображаться на карте. Вы также можете настроить внешний вид пользовательского интерфейса навигации. На странице «Политики» приведены рекомендации по допустимым изменениям пользовательского интерфейса навигации.

В этом документе описывается, как изменить пользовательский интерфейс карты двумя способами:

• Элементы управления пользовательским интерфейсом карты
• Аксессуары пользовательского интерфейса карты

Элементы управления пользовательским интерфейсом карты

Элементы управления пользовательским интерфейсом карты расположены поверх навигационного представления. Навигационный SDK для Android автоматически меняет положение ваших пользовательских элементов управления при изменении встроенного макета. Для каждой позиции макета вы можете установить один пользовательский элемент управления. Пользовательский элемент управления может представлять собой один элемент пользовательского интерфейса или, если ваш дизайн требует большего, вы можете использовать ViewGroup с несколькими элементами пользовательского интерфейса.

Метод setCustomControl предоставляет позиции, определенные в перечислении CustomControlPosition :

• SECONDARY_HEADER (отображается только в портретном режиме)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW

Например, на изображениях ниже показаны примеры различных положений элемента управления пользовательского интерфейса, которые информируют водителя совместного пользования о местоположении пассажира во время посадки.

Добавить пользовательский дополнительный заголовок

По умолчанию макеты экрана в режиме навигации предусматривают положение вторичного заголовка, расположенного под основным заголовком. Этот вторичный заголовок появляется при необходимости, например, при указании полосы движения. Ваше приложение может использовать эту вторичную позицию заголовка макета для пользовательского контента. Когда вы используете эту функцию, ваш элемент управления охватывает любое содержимое вторичного заголовка по умолчанию. Если в вашем представлении навигации есть фон, этот фон остается на месте, покрытый вторичным заголовком. Когда ваше приложение удаляет настраиваемый элемент управления, на его месте может появиться любой вторичный заголовок по умолчанию.

Положение настраиваемого вторичного заголовка выравнивает его верхний край с нижним краем основного заголовка. Это положение поддерживается только в portrait mode . В landscape mode вторичный заголовок недоступен, а макет не меняется.

1. Создайте представление Android с помощью пользовательского элемента пользовательского интерфейса или ViewGroup.
2. Разверните XML или создайте экземпляр пользовательского представления, чтобы получить экземпляр представления, который можно добавить в качестве вторичного заголовка.

3. Используйте NavigationView.setCustomControl или SupportNavigationFragment.setCustomControl с CustomControlPosition как SECONDARY_HEADER.

   В приведенном ниже примере создается фрагмент и добавляется пользовательский элемент управления в позицию вторичного заголовка.

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

Удаление вторичного заголовка

Чтобы удалить дополнительный заголовок и вернуться к содержимому по умолчанию, используйте метод setCustomControl .

Установите для представления null чтобы удалить представление.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Добавьте пользовательский элемент управления в нижнюю часть представления навигации.

Ваше приложение может указать пользовательский элемент управления, выровненный по нижнему краю представления навигации. Когда ваше приложение добавляет настраиваемый элемент управления, кнопка повторного центрирования и логотип Google перемещаются вверх, чтобы разместить его.

1. Создайте представление Android с элементом пользовательского интерфейса или группой представлений, которые вы хотите добавить.
2. Создайте представление или фрагмент навигации.
3. Вызовите метод setCustomControl в представлении или фрагменте навигации и укажите элемент управления и позицию, которую нужно использовать.

В следующем примере показано пользовательское View , добавленное в 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);

Удаление пользовательского элемента управления

Чтобы удалить настраиваемый элемент управления, используйте метод setCustomControl и укажите положение элемента управления, который вы хотите удалить.

Установите для этой позиции значение null .

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Аксессуары пользовательского интерфейса карты

Навигационный SDK для Android предоставляет аксессуары пользовательского интерфейса, которые появляются во время навигации, аналогично тем, которые есть в приложении Google Maps для Android. Вы можете настроить видимость или внешний вид этих элементов управления, как описано в этом разделе. Изменения, внесенные вами здесь, отразятся во время следующего сеанса навигации.

На странице «Политики» приведены рекомендации по допустимым изменениям пользовательского интерфейса навигации.

Посмотреть код

package com.example.navsdkcustomization;

import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CameraPerspective;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.Navigator;
import com.google.android.libraries.navigation.SimulationOptions;
import com.google.android.libraries.navigation.StylingOptions;
import com.google.android.libraries.navigation.SupportNavigationFragment;
import com.google.android.libraries.navigation.Waypoint;

/** An activity that displays a map and a customized navigation UI. */
public class NavigationActivityCustomization extends AppCompatActivity {

  private static final String TAG = NavigationActivityCustomization.class.getSimpleName();
  private Navigator mNavigator;
  private SupportNavigationFragment mNavFragment;
  private GoogleMap mMap;
  // Define the Sydney Opera House by specifying its place ID.
  private static final String SYDNEY_OPERA_HOUSE = "ChIJ3S-JXmauEmsRUcIaWtf4MzE";
  // Set fields for requesting location permission.
  private static final int PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION = 1;
  private boolean mLocationPermissionGranted;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Initialize the Navigation SDK.
    initializeNavigationSdk();
  }

  /**
   * Starts the Navigation SDK and sets the camera to follow the device's location. Calls the
   * navigateToPlace() method when the navigator is ready.
   */
  private void initializeNavigationSdk() {
    /*
     * Request location permission, so that we can get the location of the
     * device. The result of the permission request is handled by a callback,
     * onRequestPermissionsResult.
     */
    if (ContextCompat.checkSelfPermission(
            this.getApplicationContext(), android.Manifest.permission.ACCESS_FINE_LOCATION)
        == PackageManager.PERMISSION_GRANTED) {
      mLocationPermissionGranted = true;
    } else {
      ActivityCompat.requestPermissions(
          this,
          new String[] {android.Manifest.permission.ACCESS_FINE_LOCATION},
          PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION);
    }

    if (!mLocationPermissionGranted) {
      displayMessage(
          "Error loading Navigation SDK: " + "The user has not granted location permission.");
      return;
    }

    // Get a navigator.
    NavigationApi.getNavigator(
        this,
        new NavigationApi.NavigatorListener() {
          /** Sets up the navigation UI when the navigator is ready for use. */
          @Override
          public void onNavigatorReady(Navigator navigator) {
            displayMessage("Navigator ready.");
            mNavigator = navigator;
            mNavFragment =
                (SupportNavigationFragment)
                    getSupportFragmentManager().findFragmentById(R.id.navigation_fragment);

            // Get the map.
            mNavFragment.getMapAsync(
                new OnMapReadyCallback() {
                  @Override
                  public void onMapReady(GoogleMap map) {
                    mMap = map;
                    // Navigate to a place, specified by Place ID.
                    navigateToPlace(SYDNEY_OPERA_HOUSE);
                  }
                });
          }

          /**
           * Handles errors from the Navigation SDK.
           *
           * @param errorCode The error code returned by the navigator.
           */
          @Override
          public void onError(@NavigationApi.ErrorCode int errorCode) {
            switch (errorCode) {
              case NavigationApi.ErrorCode.NOT_AUTHORIZED:
                displayMessage(
                    "Error loading Navigation SDK: Your API key is "
                        + "invalid or not authorized to use the Navigation SDK.");
                break;
              case NavigationApi.ErrorCode.TERMS_NOT_ACCEPTED:
                displayMessage(
                    "Error loading Navigation SDK: User did not accept "
                        + "the Navigation Terms of Use.");
                break;
              case NavigationApi.ErrorCode.NETWORK_ERROR:
                displayMessage("Error loading Navigation SDK: Network error.");
                break;
              case NavigationApi.ErrorCode.LOCATION_PERMISSION_MISSING:
                displayMessage(
                    "Error loading Navigation SDK: Location permission " + "is missing.");
                break;
              default:
                displayMessage("Error loading Navigation SDK: " + errorCode);
            }
          }
        });
  }

  /** Customizes the navigation UI and the map. */
  private void customizeNavigationUI() {
    // Set custom colors for the navigator.
    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));

    mMap.setTrafficEnabled(false);

    // 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(BitmapDescriptorFactory.fromBitmap(destinationMarkerIcon))
              .title("Destination marker"));

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

              // The event has been handled.
              return true;
            }
          });
    }

    // Set the camera to follow the device location with 'TILTED' driving view.
    mMap.followMyLocation(CameraPerspective.TILTED);
  }

  /**
   * Requests directions from the user's current location to a specific place (provided by the
   * Google Places API).
   */
  private void navigateToPlace(String placeId) {
    Waypoint destination;
    try {
      destination =
          Waypoint.builder().setPlaceIdString(placeId).build();
    } catch (Waypoint.UnsupportedPlaceIdException e) {
      displayMessage("Error starting navigation: Place ID is not supported.");
      return;
    }

    // Create a future to await the result of the asynchronous navigator task.
    ListenableResultFuture<Navigator.RouteStatus> pendingRoute =
        mNavigator.setDestination(destination);

    // Define the action to perform when the SDK has determined the route.
    pendingRoute.setOnResultListener(
        new ListenableResultFuture.OnResultListener<Navigator.RouteStatus>() {
          @Override
          public void onResult(Navigator.RouteStatus code) {
            switch (code) {
              case OK:
                // Hide the toolbar to maximize the navigation UI.
                if (getActionBar() != null) {
                  getActionBar().hide();
                }

                // Customize the navigation UI.
                customizeNavigationUI();

                // Enable voice audio guidance (through the device speaker).
                mNavigator.setAudioGuidance(Navigator.AudioGuidance.VOICE_ALERTS_AND_GUIDANCE);

                // Simulate vehicle progress along the route for demo/debug builds.
                if (BuildConfig.DEBUG) {
                  mNavigator
                      .getSimulator()
                      .simulateLocationsAlongExistingRoute(
                          new SimulationOptions().speedMultiplier(5));
                }

                // Start turn-by-turn guidance along the current route.
                mNavigator.startGuidance();
                break;
              // Handle error conditions returned by the navigator.
              case NO_ROUTE_FOUND:
                displayMessage("Error starting navigation: No route found.");
                break;
              case NETWORK_ERROR:
                displayMessage("Error starting navigation: Network error.");
                break;
              case ROUTE_CANCELED:
                displayMessage("Error starting navigation: Route canceled.");
                break;
              default:
                displayMessage("Error starting navigation: " + String.valueOf(code));
            }
          }
        });
  }

  /** Handles the result of the request for location permissions. */
  @Override
  public void onRequestPermissionsResult(
      int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    mLocationPermissionGranted = false;
    switch (requestCode) {
      case PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION:
        {
          // If request is canceled, the result arrays are empty.
          if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            mLocationPermissionGranted = true;
          }
        }
    }
  }

  /**
   * Shows a message on screen and in the log. Used when something goes wrong.
   *
   * @param errorMessage The message to display.
   */
  private void displayMessage(String errorMessage) {
    Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
    Log.d(TAG, errorMessage);
  }
}

Изменить заголовок навигации

Используйте SupportNavigationFragment.setStylingOptions() или NavigationView.setStylingOptions() чтобы изменить тему заголовка навигации и индикатор следующего поворота, который появляется под заголовком, если он доступен.

Вы можете установить следующие атрибуты:

В следующем примере показано, как установить параметры стиля:

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

Отключить слой трафика

Используйте GoogleMap.setTrafficEnabled() чтобы включить или отключить слой трафика на карте. Данная настройка влияет на показания плотности трафика, отображаемые на карте в целом. Однако это не влияет на показания трафика на маршруте, проложенном навигатором.

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

Включить светофоры и знаки остановки

Вы можете включить светофоры и знаки остановки в пользовательском интерфейсе карты. С помощью этой функции пользователь может включить отображение светофоров или значков знаков остановки на своем маршруте, обеспечивая лучший контекст для более эффективных и точных поездок.

По умолчанию светофоры и знаки остановки отключены в Navigation SDK. Чтобы включить эту функцию, вызовите DisplayOptions для каждой функции отдельно.

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

Добавить пользовательские маркеры

Навигационный SDK для Android теперь использует API Google Maps для маркеров. Дополнительную информацию можно найти в документации API Карт .

Плавающий текст

Вы можете добавить плавающий текст в любое место вашего приложения, при условии, что он не содержит атрибуции Google. Navigation SDK не поддерживает привязку текста к широте и долготе на карте или к метке. Перейдите к информационным окнам для получения дополнительной информации.

Отображение ограничения скорости

Вы можете программно показать или скрыть значок ограничения скорости. Используйте NavigationView.setSpeedLimitIconEnabled() или SupportNavigationFragment.setSpeedLimitIconEnabled() чтобы отобразить или скрыть значок ограничения скорости. Если эта функция включена, во время навигации в нижнем углу отображается значок ограничения скорости. Значок отображает ограничение скорости дороги, по которой движется автомобиль. Значок появляется только в тех местах, где доступны надежные данные об ограничении скорости.

 // Display the Speed Limit icon
 mNavFragment.setSpeedLimitIconEnabled(true);

Значок ограничения скорости временно скрыт, когда отображается кнопка возврата в центр.

Установить ночной режим

Вы можете программно управлять поведением ночного режима. Используйте NavigationView.setForceNightMode() или SupportNavigationFragment.setForceNightMode() , чтобы включить или выключить ночной режим, или позвольте навигационному SDK для Android управлять им.

• AUTO Позволяет навигационному SDK определить подходящий режим в зависимости от местоположения устройства и местного времени.
• FORCE_NIGHT включает ночной режим.
• FORCE_DAY включает дневной режим.

В следующем примере показано принудительное включение ночного режима внутри фрагмента навигации:

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

Показать список направлений

Сначала создайте представление и добавьте его в свою иерархию.

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

Обязательно пересылайте события жизненного цикла в DirectionsListView так же, как и в NavigationView . Например:

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

Скрытие альтернативных маршрутов

Когда пользовательский интерфейс перегружен слишком большим количеством информации, вы можете уменьшить беспорядок, отображая меньше альтернативных маршрутов, чем по умолчанию (два), или вообще не отображая альтернативные маршруты. Вы можете настроить эту опцию перед получением маршрутов, вызвав метод RoutingOptions.alternateRoutesStrategy() с одним из следующих значений перечисления:

В следующем примере кода показано, как полностью скрыть альтернативные маршруты.

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

Индикатор выполнения поездки

Индикатор выполнения поездки — это вертикальная полоса, которая появляется на правом конце карты при запуске навигации. Если этот параметр включен, он отображает обзор всей поездки, а также пункт назначения и текущее положение пользователя.

Это дает пользователям возможность быстро предвидеть любые предстоящие проблемы, такие как пробки, без необходимости увеличения масштаба. При необходимости они могут изменить маршрут поездки. Если пользователь меняет маршрут поездки, индикатор выполнения сбрасывается, как если бы с этой точки началась новая поездка.

На индикаторе хода поездки отображаются следующие индикаторы состояния:

• Пройденный маршрут — пройденный отрезок пути.

• Текущая позиция — текущее местоположение пользователя в поездке.

• Статус трафика — статус предстоящего трафика.

• Конечный пункт — конечный пункт поездки.

Включите индикатор выполнения поездки, вызвав метод setTripProgressBarEnabled() в NavigationView или SupportNavigationFragment . Например:

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