修改导航界面

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

本文档介绍了如何通过以下两种方式修改地图的用户界面:

地图界面控件

地图界面控件位于导航视图之上。当内置布局发生变化时,Android 版 Navigation SDK 会自动重新定位自定义控件。对于布局的每个位置,您可以设置一个自定义控件。自定义控件可以是一个界面元素,如果您的设计需要更多元素,您可以将 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 地图 API 来创建标记。如需了解详情,请参阅 Google 地图 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));
}

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

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

隐藏备选路线

如果界面因信息过多而显得杂乱无序,您可以通过显示的备选路线数量少于默认值(2 条)或根本不显示备选路线来减少杂乱。您可以在提取路线之前配置此选项,方法是使用以下枚举值之一调用 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);