修改导航界面

使用 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 View
  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 View
  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() 可显示或隐藏速度限制图标。启用后,在导航期间,速度限制图标会显示在底部角落。该图标显示车辆行驶的道路的限速。该图标仅在具有可靠限速数据的位置显示。

// 显示速度限制图标 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));
}

请务必将生命周期事件转发到 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);

行程进度条

向导航中添加了行程进度条。

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

该 API 让用户能够快速预测任何即将发生的问题,例如路况信息,而无需放大。如有必要,他们可以更改行程路线。如果用户重新规划行程路线,进度条将重置,就好像从该位置开始了新的行程一样。

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

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

  • 当前位置:用户在行程中的当前位置。

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

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

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

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