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

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

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

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

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

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

  • SECONDARY_HEADER (отображается только в портретном режиме)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
Настраиваемые положения элементов управления для портретной ориентации.
Настраиваемые положения элементов управления для портретной ориентации
Настраиваемые положения элементов управления для альбомной ориентации.
Настраиваемые положения элементов управления для альбомной ориентации

Добавить пользовательский элемент управления

  1. Создайте представление Android с пользовательским элементом интерфейса или ViewGroup.
  2. Чтобы получить экземпляр представления, создайте XML-файл или инициализируйте пользовательское представление.
  3. Используйте NavigationView.setCustomControl или SupportNavigationFragment.setCustomControl , указав положение выбранного пользовательского элемента управления из перечисления CustomControlPosition .

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

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

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

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

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Позиции пользовательского управления

Вторичный заголовок

Положение дополнительного элемента управления в заголовке для портретной ориентации.
Положение дополнительного элемента управления в заголовке для портретной ориентации.

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

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

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

Начало снизу

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

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

Этот настраиваемый элемент управления располагается в нижнем начальном углу карты. Как в portrait mode , так и landscape mode он находится над карточкой предполагаемого времени прибытия и/или пользовательским нижним колонтитулом (или вдоль нижней части карты, если ни то, ни другое отсутствует), а элементы Nav SDK, включая кнопку центрирования и логотип Google, смещаются вверх, чтобы компенсировать высоту пользовательского элемента управления. Этот элемент управления расположен внутри видимых границ карты, поэтому любой отступ, добавленный к нижнему или начальному краю карты, также изменит его положение.

Нижний конец

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

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

Этот элемент управления располагается в нижнем углу карты. В portrait mode он находится над карточкой ETA и/или пользовательским нижним колонтитулом (или вдоль нижней части карты, если ни то, ни другое отсутствует), а в landscape mode он выравнивается по нижней части карты. Любые элементы Nav SDK, видимые вдоль торцевой стороны (справа в режиме LTR), смещаются вверх, чтобы компенсировать высоту элемента управления. Этот элемент управления расположен внутри видимых границ карты, поэтому любой отступ, добавленный к нижнему или торцевому краю карты, также изменит положение этого элемента управления.

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

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

Это пользовательское положение элемента управления предназначено для пользовательского отображения нижнего колонтитула. Если карточка Nav SDK ETA видна, этот элемент управления располагается над ней. В противном случае элемент управления выравнивается по нижнему краю карты. В отличие от пользовательских элементов управления BOTTOM_START_BELOW и BOTTOM_END_BELOW , этот элемент управления расположен за пределами видимых границ карты, а это значит, что любой добавленный к карте отступ не изменит его положение.

В portrait mode пользовательский нижний колонтитул занимает всю ширину страницы. Пользовательские элементы управления в позициях CustomControlPosition.BOTTOM_START_BELOW и CustomControlPosition.BOTTOM_END_BELOW , а также элементы пользовательского интерфейса Nav SDK, такие как кнопка центрирования и логотип Google, располагаются над пользовательским нижним колонтитулом. Положение стрелки по умолчанию учитывает высоту пользовательского нижнего колонтитула.

В landscape mode пользовательский нижний колонтитул имеет половинную ширину и выровнен по начальной стороне (левая сторона в режиме LTR), как и карточка ETA из Nav SDK. Пользовательские элементы управления в позиции CustomControlPosition.BOTTOM_START_BELOW и элементы пользовательского интерфейса Nav SDK, такие как кнопка центрирования и логотип Google, располагаются над пользовательским нижним колонтитулом. Пользовательские элементы управления в позиции CustomControlPosition.BOTTOM_END_BELOW и любые элементы пользовательского интерфейса Nav SDK вдоль конечной стороны (правая сторона в режиме LTR) остаются выровненными по нижнему краю карты. Положение стрелки по умолчанию не меняется при наличии пользовательского нижнего колонтитула, поскольку нижний колонтитул не выходит за пределы карты.

Пользовательские элементы управления, расположенные в позициях CustomControlPosition.BOTTOM_START_BELOW и CustomControlPosition.BOTTOM_END_BELOW , а также элементы пользовательского интерфейса Nav SDK, такие как кнопка центрирования и логотип Google, размещены над нижним колонтитулом пользовательского элемента управления.

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

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

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

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

Достопримечательности и входы.

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

Для создания пункта назначения с placeID ) используйте метод Waypoint.Builder.setPlaceIdString() .

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

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

Значение перечисления Описание
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);

Расположение индикатора выполнения поездки

  • Левая сторона полосы примерно совпадает с левой стороной спидометра, логотипа Google и кнопки «Перецентрировать» (если она видна). Ширина составляет 12 знаков после запятой.
  • Индикатор выполнения поездки имеет постоянную высоту. Для адаптации к ограничениям вертикального пространства на небольших устройствах видимость и высота индикатора выполнения поездки изменяются в зависимости от заданных точек перегиба по высоте экрана. Эти точки перегиба не зависят от ориентации устройства и фактического места, занимаемого картой на экране.
  • высота экрана Видимость индикатора выполнения поездки Высота индикатора выполнения поездки Положение индикатора выполнения поездки по оси Y
    Малый: 0–551 дП Не видно Н/Д Н/Д
    Средний: 552 дп. - 739 дп. Видимый 130 дп Элементы управления на стороне запуска (спидометр / логотип Google / кнопка "Перецентрировать") расположены над кнопкой запуска.
    Большой: 740 dp и выше Видимый 290 дп Элементы управления на стороне запуска (спидометр / логотип Google / кнопка "Перецентрировать") расположены над кнопкой запуска.
  • Если индикатор выполнения поездки перекрывает карточку поворота или другие элементы пользовательского интерфейса навигации, он отображается под этими элементами.

Компас

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

Если навигация включена и режим камеры установлен на «следование», компас остается видимым, а касание компаса переключает между наклонным и общим ракурсами камеры.

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

Компас поддерживает дневной и ночной режимы, а также темный режим.

Компас включен по умолчанию. Вы можете включить компас, используя метод ` comapassEnabled класса ` GoogleMapOptions .

Отключите 3D-моделирование зданий.

Для устройств с ограниченными возможностями производительности можно отключить отображение 3D-зданий, вызвав метод GoogleMap.setBuildingsEnabled(false) .

API для отображения подсказок (экспериментальная версия)

API Prompt Visibility позволяет избежать конфликтов между элементами пользовательского интерфейса, созданными Navigation SDK, и вашими собственными пользовательскими элементами интерфейса, добавив обработчик событий, который будет получать обратный вызов перед появлением элемента пользовательского интерфейса Navigation SDK и сразу после его удаления. Для получения дополнительной информации, включая примеры кода, см. раздел «API Prompt Visibility» на странице «Настройка сбоев в реальном времени» .