修改導覽 UI

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

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

地圖 UI 控制項

建議使用地圖 UI 控制項將自訂 UI 元素放在導覽檢視畫面中,確保能正確定位。內建版面配置變更時,Android 適用的 Navigation SDK 會自動重新調整自訂控制項的位置。您可以為每個位置一次設定一個自訂控制項檢視畫面。如果設計需要多個 UI 元素,可以將其放在 ViewGroup 中,並將其傳遞至 setCustomControl 方法。

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

  • SECONDARY_HEADER (僅以直向模式顯示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
直向的自訂控制項位置。
直向方向的自訂控制項位置
橫向模式的自訂控制項位置。
橫向的自訂控制項位置

新增自訂控制項

  1. 使用自訂 UI 元素或 ViewGroup 建立 Android 檢視畫面
  2. 以 XML 格式顯示或以例項化方式取得自訂檢視畫面的例項。
  3. NavigationView.setCustomControlSupportNavigationFragment.setCustomControl 與從 CustomControlPosition 列舉中選定的自訂控制項位置搭配使用。

    以下範例會建立片段,並在次要標頭位置新增自訂控制項。

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
     ```
    

移除自訂控制項

如要移除自訂控制項,請使用 null 檢視畫面參數和所選自訂控制項位置,呼叫 setCustomControl 方法。

舉例來說,以下程式碼片段會移除所有自訂次要標頭,並傳回預設內容:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

自訂控制項位置

次要標頭

直向模式的次要標頭自訂控制項位置。
直向模式的次要標題自訂控制項位置

如要使用這個自訂控制項位置,請將位置 CustomControlPosition.SECONDARY_HEADER 傳遞至 setCustomControl

根據預設,導覽模式中的畫面版面配置會為次要標題提供一個位於主要標題下方的位址。必要時 (例如在車道導航時),系統會顯示這個次要標頭。應用程式可以使用這個次要標題位置,為自訂內容安排版面配置。使用這項功能時,控制項會覆蓋任何預設的次要標頭內容。如果導覽畫面含有背景,則該背景會保留在原位,並由次要標頭覆蓋。當應用程式移除自訂控制項時,任何預設的次要標頭都會顯示在該位置。

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

從底部開始

直向模式的底部自訂控制項位置。
在直向模式下,自訂控制項的底部起始位置
橫向模式的底部開始自訂控制項位置。
橫向啟動的自訂控制項位置

如要使用這個自訂控制項位置,請將位置 CustomControlPosition.BOTTOM_START_BELOW 傳遞至 setCustomControl

這個自訂控制項位置位於地圖的底部起始角落。在 portrait modelandscape mode 中,這會位於預估到達時間資訊卡和/或自訂頁尾上方 (如果兩者皆不存在,則會位於地圖底部),而 Nav SDK 元素 (包括重新置中按鈕和 Google 標誌) 會向上移動,以便考量自訂控制項檢視畫面的高度。這個控制項會置於可見地圖邊界內,因此新增至地圖底部或起始邊緣的任何邊距,也會變更這個控制項的位置。

底端

直向的底部自訂控制項位置。
直向的底部自訂控制項位置
橫向模式的底端自訂控制項位置。
橫向螢幕方向的底部自訂控制項位置

如要使用這個自訂控制項位置,請將位置 CustomControlPosition.BOTTOM_END_BELOW 傳遞至 setCustomControl

這個自訂控制項位置位於地圖的底端角落。在 portrait mode 中,資訊卡會位於預計到達時間資訊卡和/或自訂頁尾上方 (如果兩者皆不存在,則會沿著地圖底部),但在 landscape mode 中,資訊卡會與地圖底部對齊。任何在底部 (LTR 中的右側) 可見的 Nav SDK 元素都會向上移動,以納入自訂控制項檢視畫面的高度。這個控制項會置於可見地圖邊界內,因此新增至地圖底部或端邊的任何邊框間距,也會變更這個控制項的位置。

直向的頁尾自訂控制項位置。
直向螢幕方向的自訂控制項位置
橫向模式的頁尾自訂控制項位置。
橫向螢幕方向的底部自訂控制項位置

如要使用這個自訂控制項位置,請將位置 CustomControlPosition.FOOTER 傳遞至 setCustomControl

這個自訂控制項位置專為自訂頁尾檢視畫面而設計。如果您看到 Nav SDK ETA 資訊卡,這個控制項會顯示在資訊卡上方。如果不是,控制項會與地圖底部對齊。與 BOTTOM_START_BELOWBOTTOM_END_BELOW 自訂控制項不同,這個控制項會置於可見地圖邊界之外,也就是說,新增至地圖的任何邊框都不會變更這個控制項的位置。

portrait mode 中,自訂頁尾會是全寬。CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW 位置的自訂控制項,以及重新置準鈕和 Google 標誌等 Nav SDK UI 元素,會位於自訂控制項頁尾上方。箭頭的預設位置會考量自訂頁尾高度。

landscape mode 中,自訂頁尾寬度為一半寬度,並與開始側 (LTR 的左側) 對齊,就像 Nav SDK ETA 資訊卡一樣。CustomControlPosition.BOTTOM_START_BELOW 位置中的自訂控制項,以及重新置中按鈕和 Google 標誌等 Nav SDK UI 元素,會位於自訂控制項頁尾的上方。CustomControlPosition.BOTTOM_END_BELOW 位置中的自訂控制項,以及尾端 (LTR 中的右側) 所有 Nav SDK UI 元素,都會與地圖底部對齊。自訂頁尾不會延伸至地圖的結尾,因此在自訂頁尾存在時,箭頭的預設位置不會改變。

CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW 位置中的自訂控制項,以及重新置按鈕和 Google 標誌等 Nav SDK UI 元素,會位於自訂控制項頁尾的上方。

地圖 UI 配件

Navigation SDK for Android 提供 UI 配件,在導航期間會顯示類似 Google Maps for Android 應用程式中的 UI 配件。您可以按照本節所述調整這些控制項的顯示設定或外觀。您在這裡所做的變更會反映到下一個導航工作階段。

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

查看程式碼

修改導覽標頭

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

啟用紅綠燈和停車標誌

您可以在地圖 UI 中啟用紅綠燈和停車標誌。這項功能可讓使用者在路線上顯示交通號誌或停止標誌圖示,藉此提供更好、更準確的行程相關資訊。

根據預設,Navigation SDK 會停用交通號誌和停車標誌。如要啟用這項功能,請為每個地圖項目個別呼叫 DisplayOptions

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

新增自訂標記

Navigation SDK for Android 現在會使用 Google 地圖 API 做為標記。詳情請參閱 Maps API 說明文件

浮動文字

您可以在應用程式中的任何位置新增浮動文字,前提是該文字不包含 Google 歸因。Navigation SDK 不支援將文字錨定至地圖上的經緯度或標籤。詳情請參閱「資訊視窗」。

顯示速限

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

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

顯示 recenter 按鈕時,速限圖示會暫時隱藏。

設定夜間模式

您可以透過程式輔助方式控制夜間模式的行為。您可以使用 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();
}

隱藏替代路線

如果使用者介面因資訊過多而顯得雜亂,您可以減少顯示的替代路線數量 (比預設值少),或是完全不顯示替代路線,以減少雜亂感。您可以在擷取路線之前設定這個選項,方法是呼叫 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);