修改導覽 UI

使用 Android 版 Navigation SDK,您可以決定要在地圖上顯示哪些內建 UI 控制項和元素,進而修改地圖的使用者體驗。您也可以調整導覽 UI 的視覺外觀。如要瞭解導覽 UI 可接受的修改規範,請參閱政策頁面

本文件說明如何以兩種方式修改地圖的使用者介面:

地圖 UI 控制項

地圖 UI 控制項位於導覽檢視的上方。當內建版面配置變更時,Android 版 Navigation SDK 會自動重新調整自訂控制項的位置。您可以為每個版面配置位置設定一個自訂控制項。自訂控制項可以是一個 UI 元素,如果您的設計需要更多元素,則可以使用含有多個 UI 元素的 ViewGroup

setCustomControl 方法提供 CustomControlPosition 列舉中定義的位置:

  • SECONDARY_HEADER (只會在直向模式下顯示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

這張圖片顯示 UI 控制項的各種位置範例,該控制項會通知乘客位置的駕駛人。

自訂控制項位置

新增自訂次要標頭

根據預設,導覽模式中的畫面版面配置會為位於主要標頭下方的次要標頭提供位置。系統會在必要時 (例如車道指引) 顯示這個次要標頭。應用程式可將版面配置的這個次要標頭位置用於自訂內容。使用這項功能時,您的控制項會涵蓋所有預設的次要標頭內容。如果導覽檢視區塊有背景,背景就會保持不變,並受到次要標頭遮擋。應用程式移除自訂控制項時,所有預設的次要標頭都會顯示在其位置。

自訂次要標頭位置會與主要標頭的底部邊緣對齊。只有 portrait mode 支援這個位置。在 landscape mode 中無法使用次要標頭,且版面配置不會變更。

  1. 使用自訂 UI 元素或 ViewGroup 建立 Android View
  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. 根據您要新增的 UI 元素或檢視區塊群組,建立 Android View
  2. 建立導覽檢視畫面或片段。
  3. 在導覽檢視畫面或片段上呼叫 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);

地圖 UI 配件

Android 版 Navigation SDK 提供在導覽期間顯示的 UI 配件,與在 Android 版 Google 地圖應用程式中找到的配件類似。您可以按照本節的說明,調整這些控制項的顯示設定或視覺外觀。你在這裡所做的變更會反映在司機的下一趟行程中。

如要瞭解系統接受的導覽 UI 修改方式,請參閱政策頁面

查看程式碼

修改導覽標題

使用 SupportNavigationFragment.setStylingOptions()NavigationView.setStylingOptions() 即可變更導覽標頭的主題,以及顯示在標頭下方的下一個轉彎指標 (如有)。

您可以設定下列屬性:

屬性類型屬性
背景顏色
  • 主要日模式 - 導覽標題的日間顏色
  • 次要日模式 - 下一個轉彎指標的日間顏色
  • 主要夜間模式 - 導航標題的夜間顏色
  • 次要夜間模式 - 下一個轉彎指標的夜間顏色
操作說明文字元素
  • 文字顏色
  • Font
  • 第一列的文字大小
  • 第二列的文字大小
後續步驟的文字元素
  • Font
  • 距離值的文字顏色
  • 距離值的文字大小
  • 距離單位的文字顏色
  • 距離單位的文字大小
車輛圖示
  • 大型動作圖示的顏色
  • 小型動作圖示的顏色
車道指引
  • 建議車道的顏色

以下範例說明如何設定樣式選項:

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

啟用紅綠燈和停車標誌

您可以在地圖 UI 中啟用紅綠燈及停車標誌。有了這項功能,駕駛人就能顯示沿途交通號燈或停靠站圖示,提供更有幫助、更準確的行程。

根據預設,Navigation SDK 會停用紅綠燈和停止標誌。如要啟用這項功能,請分別呼叫各項功能的 DisplayOptions

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

新增自訂標記

Android 版 Navigation SDK 現在使用 Google Maps API 來處理標記。詳情請參閱 Maps API 說明文件

浮動文字

您可以在應用程式的任意位置新增浮動文字,只要文字不涵蓋 Google 歸因即可。Navigation SDK 不支援將文字錨定在地圖上的經緯度或標籤。詳情請參閱資訊視窗

顯示速限

您可以透過程式輔助方式顯示或隱藏速限圖示。 使用 NavigationView.setSpeedLimitIconEnabled()SupportNavigationFragment.setSpeedLimitIconEnabled() 可顯示或隱藏速限圖示。啟用後,在指引期間的底部角落會顯示速限圖示。這個圖示代表車輛行駛的道路速限。這個圖示只會顯示在可取得可靠速限資料的位置。

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

系統顯示較近期的按鈕時,會暫時隱藏速限圖示。

設定夜間模式

您可以透過程式輔助,控制夜間模式的行為。使用 NavigationView.setForceNightMode()SupportNavigationFragment.setForceNightMode() 可開啟或關閉夜間模式,或讓 Android 版 Navigation SDK 控制該模式。

  • AUTO 可讓 Navigation 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();
}

隱藏替代路線

當使用者介麵包含太多資訊時,您可以選擇顯示比預設 (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);