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

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

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

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

Внимание! Android Navigation SDK не поддерживает оформление облачных карт с использованием идентификаторов карт.

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

Элементы управления пользовательским интерфейсом карты расположены поверх навигационного представления. Навигационный 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. Вы можете настроить видимость или внешний вид этих элементов управления, как описано в этом разделе. Изменения, которые вы вносите здесь, отражаются во время следующей поездки водителя.

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

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

< > Показать/скрыть код Java для действия навигации.

package com.example.navsdkcustomization;

import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import com.google.android.libraries.navigation.Camera;
import com.google.android.libraries.navigation.LatLng;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.Marker;
import com.google.android.libraries.navigation.MarkerOptions;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationMap;
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 NavigationMap 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) getFragmentManager()
                                .findFragmentById(R.id.navigation_fragment);

                        // 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));
        // Get the map.
        mMap = mNavFragment.getMap();
        // Turn off the traffic layer on the map.
        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(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);
                }
            });
        }


        // Set the camera to follow the device location with 'TILTED' driving view.
        mNavFragment.getCamera().followMyLocation(Camera.Perspective.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.fromPlaceId(placeId, null);
        } 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);

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

Примечание. Водители должны следовать всем установленным на дороге знакам. Данные, размещенные на значке ограничения скорости, служат только для справки. Точность данных об ограничении скорости не может быть гарантирована. Вы можете сообщить о неточностях в наших данных об ограничении скорости, отправив заявку на странице поддержки Google Cloud .

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

Вы можете программно управлять поведением ночного режима. Используйте 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() с одним из следующих значений перечисления:

Значение перечисления	Описание
AlternateRoutesStrategy.SHOW_ALL	По умолчанию. Отображает до двух альтернативных маршрутов.
AlternateRoutesStrategy.SHOW_ONE	Отображает один альтернативный маршрут (если он доступен).
AlternateRoutesStrategy.SHOW_NONE	Скрывает альтернативные маршруты.

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

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