修改导航界面

使用 Navigation SDK for Android,您可以通过 来确定在哪些内置界面控件和元素上显示 地图。您还可以调整导航界面的视觉外观。推荐 访问“政策”页面 有关可接受的导航界面修改的指南。

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

地图界面控件

地图界面控件位于导航视图的顶部。通过 Navigation SDK for Android 会自动调整自定义控件的位置 在内置布局更改时触发对于布局的每个位置,您可以设置 一个自定义控件自定义控件可以是一个界面元素;或者,如果您的设计 需要更多,您可以将 ViewGroup 与多个界面元素一起使用。

setCustomControl 方法 用于提供 CustomControlPosition 中定义的位置, 枚举

  • SECONDARY_HEADER(仅在竖屏模式下显示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

例如,下面的图片显示了界面控件的不同位置的示例 。

自定义控件
位置

添加自定义辅助标头

默认情况下,导航模式下的屏幕布局为次要元素提供位置 标头。当出现以下情况时,该次级标题会显示 例如使用车道导航。您的应用可以使用此辅助标头 自定义内容的布局位置。使用此功能时,您的 控件会涵盖所有默认的辅助标头内容。如果您的导航视图有 背景,该背景仍保留在原位,并被次要标题覆盖。 当应用移除自定义控件后,任何默认的辅助标头都可以 它就会出现在相应的位置上

自定义的辅助标题位置使其上边缘与 主要标头仅 portrait mode 支持此位置。在 landscape mode,辅助标题不可用,并且布局也不可用 更改。

  1. 创建 Android View 自定义界面元素或 ViewGroup。
  2. 扩充 XML 或实例化自定义视图,以获取 视图添加为辅助标题
  3. 使用NavigationView.setCustomControlSupportNavigationFragment.setCustomControl,其中 CustomControlPosition 为 SECONDARY_HEADER。

    以下示例将创建一个片段,并在 次要标题位置。

     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 方法; 指定要使用的控件和位置。

以下示例展示了如何将自定义 View 添加到 SupportNavigationFragment

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

请务必将生命周期事件转发给 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() 方法启用行程进度条 已开启 NavigationViewSupportNavigationFragment. 例如:

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