修改导航界面

使用 Navigation SDK for Android,您可以通过确定将哪些内置界面控件和元素显示在地图上,来修改地图的用户体验。您还可以调整导航界面的视觉外观。请参阅“政策”页面,了解关于导航界面可接受的修改的准则。

本文档介绍了如何以两种方式修改地图界面:

地图界面控件

地图界面控件位于导航视图之上。当内置布局发生更改时,Navigation SDK for Android 会自动重新定位您的自定义控件。对于布局的每个位置,您都可以设置一个自定义控件。自定义控件可以是一个界面元素;如果您的设计需要更多界面元素,可以将 ViewGroup 与多个界面元素结合使用。

setCustomControl 方法提供 CustomControlPosition 枚举中定义的位置:

  • SECONDARY_HEADER(仅在纵向模式下显示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

此图片显示了界面控件的各个位置示例,这些控件会将乘客位置告知驾驶员。

自定义控件位置

添加自定义辅助标头

默认情况下,导航模式下的屏幕布局会为位于主标题下方的辅助标题提供一个位置。此辅助标头会在必要时(例如在车道引导下)显示。您的应用可以将布局的这个辅助标头位置用于自定义内容。使用此功能时,您的控件会涵盖所有默认的辅助标头内容。如果导航视图具有背景,则该背景会保留在原位,并被辅助标题覆盖。当您的应用移除自定义控件后,任何默认的辅助标头都可以显示在相应位置。

自定义辅助标头位置使其上边缘与主标头的下边缘对齐。仅portrait mode支持此位置。在 landscape mode 中,辅助头文件不可用,布局也不会改变。

  1. 使用自定义界面元素或 ViewGroup 创建 Android 视图
  2. 膨胀 XML 或实例化自定义视图,以获取视图的实例以将其添加为辅助标头。
  3. 使用 NavigationView.setCustomControlSupportNavigationFragment.setCustomControl,将 CustomControlPosition 用作 SECONDARY_HEADER。

    下例就创建了一个 fragment,并在辅助标头位置添加了一个自定义控件。

     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. 创建导航视图或 fragment。
  3. 对导航视图或 fragment 调用 setCustomControl 方法,并指定要使用的控件和位置。

以下示例展示了添加到 SupportNavigationFragment 的自定义 View

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

地图界面配件

Navigation SDK for Android 提供了在导航期间显示的界面配件,类似于 Android 版 Google 地图应用中的配件。您可以按照本部分中的说明调整这些控件的可见性或视觉外观。您在此处所做的更改会反映到驾驶员下次出行期间。

如需获取有关导航界面可接受修改的指南,请参阅“政策”页面

查看代码

修改导航标题

使用 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 for Android 现在为标记使用 Google Maps API。如需了解详情,请参阅 Maps API 文档

浮动文本

您可以在应用中的任意位置添加浮动文本,但前提是该文本未涵盖 Google 提供方说明。Navigation SDK 不支持将文本锚定到地图上的纬度/经度或标签。如需了解详情,请前往信息窗口

显示速度限制

您可以通过编程方式显示或隐藏速度限制图标。使用 NavigationView.setSpeedLimitIconEnabled()SupportNavigationFragment.setSpeedLimitIconEnabled() 显示或隐藏速度限制图标。启用后,在导航期间,速度限制图标将显示在底部角落。该图标会显示车辆行驶的道路的速度限制。该图标仅会在有可靠速度限制数据的位置显示。

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

显示“重新居中”按钮时,速度限制图标会暂时隐藏。

设置夜间模式

您可以通过编程方式控制夜间模式的行为。使用 NavigationView.setForceNightMode()SupportNavigationFragment.setForceNightMode() 开启或关闭夜间模式,或让 Navigation SDK for Android 控制此模式。

  • AUTO:让 Navigation SDK 根据设备位置和当地时间确定适当的模式。
  • FORCE_NIGHT 会强制开启夜间模式。
  • FORCE_DAY会强制开启日间模式。

以下示例展示了如何在导航 fragment 中强制开启夜间模式:

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

请务必像处理 NavigationView 时一样将生命周期事件转发到 DirectionsListView。例如:

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

行程进度条

添加到导航中的行程进度条。

行程进度条是一个竖线,在导航开始时,显示在地图尾部右侧边缘。启用后,它会显示整个行程的概览,以及司机的目的地和当前位置。

这有助于驾驶员快速预测任何即将发生的问题,例如路况,而无需放大。然后,他们可以根据需要重新规划行程。如果驾驶员重新规划行程,进度条会重置,就像从该点开始了新行程一样。

行程进度条会显示以下状态指示器:

  • 已用路线 - 行程的已用部分。

  • 当前位置 - 驾驶员在行程中的当前位置。

  • 路况 - 即将到来的流量的状态。

  • 最终目的地 - 最终的行程目的地。

通过在 NavigationViewSupportNavigationFragment 上调用 setTripProgressBarEnabled() 方法,可以启用行程进度条。例如:

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