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

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

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

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

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

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

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

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

  1. Создайте Android View с помощью пользовательского элемента пользовательского интерфейса или 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 он находится над картой ETA и/или пользовательским нижним колонтитулом (или вдоль нижней части карты, если ни то, ни другое отсутствует), а элементы 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), как и карта Nav SDK ETA. Пользовательские элементы управления в позиции 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, располагаются над нижним колонтитулом пользовательского элемента управления.

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

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

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

Navigation SDK для Android теперь использует API Google Maps для маркеров. Перейдите к документации API Карт для получения дополнительной информации.

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

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

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

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

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

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

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

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

Значение перечисления Описание
АльтернативныеМаршрутыСтратегия.SHOW_ALL По умолчанию. Отображает до двух альтернативных маршрутов.
АльтернативныеМаршрутыСтратегия.SHOW_ONE Отображает один альтернативный маршрут (если он доступен).
АльтернативныеМаршрутыСтратегия.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 и кнопки Re-center (если она видна). Ширина — 12 dp.
  • Полоса хода поездки сохраняет статическую высоту. Чтобы адаптироваться к ограничениям вертикального пространства на небольших устройствах, видимость и высота полосы хода поездки адаптируются на основе указанных контрольных точек по высоте экрана. Эти контрольные точки не зависят от ориентации устройства и от того, сколько места карта фактически занимает на экране:
  • Высота экрана Видимость полосы хода поездки Высота полосы хода поездки Положение полосы хода поездки по оси Y
    Маленький: 0 дп - 551 дп Не видно Н/Д Н/Д
    Средний: 552 дп - 739 дп Видимый 130 дп Элементы управления над стартовой площадкой (спидометр/логотип Google/кнопка повторного центрирования)
    Большой: 740 dp и больше Видимый 290 дп Элементы управления над стартовой площадкой (спидометр/логотип Google/кнопка повторного центрирования)
  • Если индикатор выполнения поездки перекрывается карточкой поворота или другими элементами навигационного интерфейса, он отображается под этими элементами.

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

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