修改導覽 UI

使用 Navigation SDK for Android,您可以決定要在地圖上顯示哪些內建 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 View
  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

這個自訂控制項位置是為自訂頁尾檢視畫面設計,如果導航 SDK 預計抵達時間資訊卡顯示中,這個控制項會位於資訊卡上方。如果沒有,控制項會與地圖底部對齊。與 BOTTOM_START_BELOWBOTTOM_END_BELOW 自訂控制項不同,這個控制項位於可見地圖邊界外,因此加到地圖的任何邊框間距都不會改變這個控制項的位置。

portrait mode 中,自訂頁尾會顯示完整寬度。CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW 位置的自訂控制項,以及重新置中按鈕和 Google 標誌等 Nav SDK UI 元素,都會顯示在自訂控制項頁尾上方。系統會將自訂頁尾高度納入考量,決定 Chevron 的預設位置。

landscape mode 中,自訂頁尾的寬度為一半,並對齊開頭側 (LTR 模式下為左側),就像 Nav SDK 預計抵達時間資訊卡一樣。CustomControlPosition.BOTTOM_START_BELOW 位置的自訂控制項和 Nav SDK UI 元素 (例如重新置中按鈕和 Google 標誌) 會顯示在自訂控制項頁尾上方。CustomControlPosition.BOTTOM_END_BELOW 位置的自訂控制項和結尾側 (LTR 模式為右側) 的任何 Nav SDK UI 元素,都會與地圖底部對齊。如果顯示自訂頁尾,由於頁尾不會延伸至地圖的尾端,因此人字形圖示的預設位置不會改變。

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

地圖 UI 配件

Navigation SDK for Android 提供導航期間顯示的 UI 配件,與 Google 地圖 Android 應用程式中的配件類似。如要調整這些控制項的顯示設定或外觀,請參閱本節說明。您在這裡所做的變更,會在下一個導航工作階段中生效。

如需導覽使用者介面可接受的修改方式相關指引,請參閱「政策」頁面。

查看程式碼

目的地醒目顯示和入口

如果目的地是使用 placeID 建立,系統會盡可能醒目顯示目的地建築物,並顯示入口圖示。這些視覺提示可協助使用者辨識目的地並前往。

如要使用 placeID 建立目的地,請使用 Waypoint.Builder.setPlaceIdString() 方法。

修改導覽標頭

使用 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 會強制開啟日間模式。

以下範例說明如何在導覽片段中強制開啟夜間模式:

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

行程進度列位置

  • 左側的橫條大致會與速度計、Google 標誌和「重新置中」按鈕 (顯示時) 的左側對齊。寬度為 12 dp。
  • 行程進度列的高度固定不變。為配合小型裝置的垂直空間限制,行程進度列的可見度和高度會根據螢幕高度中指定的斷點進行調整。這些中斷點與裝置方向無關,也不會受到地圖在畫面上實際佔用空間的影響:
  • 螢幕高度 行程進度列顯示設定 行程進度列高度 行程進度列的 Y 軸位置
    小:0 dp - 551 dp 隱藏 N/A N/A
    中:552 dp - 739 dp 顯示 130 dp 開始側邊控制項上方 (速度計 / Google 標誌 / 重新置中按鈕)
    大型:740 dp 以上 顯示 290 dp 開始側邊控制項上方 (速度計 / Google 標誌 / 重新置中按鈕)
  • 如果行程進度列與迴轉卡或其他導航 UI 元素重疊,系統會將進度列顯示在這些元素下方。

提示瀏覽權限 API (實驗性)

您可以透過「提示顯示 API」新增監聽器,在 Navigation SDK UI 元素即將顯示前和移除後立即接收回呼,避免 Navigation SDK 產生的 UI 元素與自訂 UI 元素發生衝突。如需程式碼範例等詳細資訊,請參閱「設定即時中斷」頁面的「提示顯示 API」一節。