修改導覽 UI

您可以使用 Navigation SDK for Android,指定要在地圖上顯示的內建 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 View。
  2. 加載 XML 或例項化自訂檢視畫面,取得檢視畫面的例項。
  3. 使用 NavigationView.setCustomControl 或 NavigationFragment.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 mode 和 landscape mode 中,自訂控制項檢視畫面會位於預計到達時間資訊卡和/或自訂頁尾上方 (如果兩者都不存在,則沿著地圖底部顯示),而 Navigation SDK 元素 (包括重新置中按鈕和 Google 標誌) 會向上移動,以配合自訂控制項檢視畫面的高度。這個控制項位於地圖可見範圍內,因此在地圖底部或起始邊緣新增的任何邊框間距,也會變更這個控制項的位置。

底部

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

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

這個自訂控制項位置位於地圖的底部末端角落。在 portrait mode 中,這個按鈕會顯示在預計到達時間資訊卡和/或自訂頁尾上方 (如果兩者都不存在,則沿著地圖底部顯示),但在 landscape mode 中,這個按鈕會與地圖底部對齊。沿著末端 (由左至右語言的右側) 顯示的任何導航 SDK 元素,都會向上移動,以配合自訂控制項檢視畫面的高度。這個控制項位於可見地圖範圍內,因此在地圖底部或末端邊緣加入任何邊框間距,也會變更這個控制項的位置。

直向模式的頁尾自訂控制項位置。
直向模式的頁尾自訂控制項位置
橫向模式的頁尾自訂控制項位置。
橫向頁尾自訂控制項位置

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

這個自訂控制項位置適用於自訂頁尾檢視畫面。如果 Nav SDK 預計到達時間資訊卡顯示,這個控制項會位於其上方。否則,控制項會與地圖底部對齊。與 BOTTOM_START_BELOW 和 BOTTOM_END_BELOW 自訂控制項不同,這個控制項位於可見地圖範圍之外,因此在地圖中加入任何邊框間距,都不會改變這個控制項的位置。

在 portrait mode 中,自訂頁尾為全寬。CustomControlPosition.BOTTOM_START_BELOW 和 CustomControlPosition.BOTTOM_END_BELOW 位置的自訂控制項,以及 Nav SDK UI 元素 (例如重新置中按鈕和 Google 標誌),都會位於自訂控制項頁尾上方。人字號的預設位置會考量自訂頁尾高度。

在 landscape mode 中,自訂頁尾為半寬,並靠起始側 (LTR 語言為左側) 對齊,就像 Nav SDK 預計到達時間資訊卡一樣。CustomControlPosition.BOTTOM_START_BELOW 位置的自訂控制項,以及 Nav SDK UI 元素 (例如重新置中按鈕和 Google 標誌),都會位於自訂控制項頁尾上方。CustomControlPosition.BOTTOM_END_BELOW 位置的自訂控制項,以及沿著結尾側 (LTR 語言為右側) 的任何 Nav SDK UI 元素,都會與地圖底部對齊。自訂頁尾不會延伸到地圖末端,因此不會影響 V 形符號的預設位置。

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

地圖 UI 輔助工具

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

請參閱政策頁面,瞭解導航 UI 的可接受修改規範。

查看程式碼

醒目顯示目的地和入口

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

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

修改導覽標頭

使用 NavigationFragment.setStylingOptions() 或 NavigationView.setStylingOptions() 變更導覽標頭和下一個轉彎指標 (如有,會顯示在標頭下方) 的主題。

您可以設定下列屬性:

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

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getSupportFragmentManager()
  .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));

交通號誌和停車標誌

導航路線上的交通號誌和停車標誌圖示。

導航期間,地圖會顯示交通號誌和停止標誌,讓使用者進一步瞭解路線和後續駕駛動作。自 8.0.0 版起,這項功能無法關閉。

新增自訂標記

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

浮動文字

您可以在應用程式中的任何位置加入浮動文字,只要不遮蓋 Google 著作權聲明即可。Navigation SDK 不支援將文字錨定在地圖上的經緯度或標籤。詳情請參閱「資訊視窗」。

顯示速限

您可以透過程式輔助方式顯示或隱藏速限圖示。使用 NavigationView.setSpeedLimitIconEnabled() 或 NavigationFragment.setSpeedLimitIconEnabled() 顯示或隱藏速限圖示。啟用後,速限圖示會在導航期間顯示在底部角落。圖示會顯示車輛行駛道路的速限。只有在可取得可靠速限資料的地點,才會顯示這個圖示。

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

顯示「重新置中」按鈕時,速限圖示會暫時隱藏。

設定夜間模式

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

行程進度列

導覽畫面中新增的行程進度列。

行程進度列是垂直長條,會在導航開始時顯示在地圖的起始/前側。啟用後,系統會顯示整趟行程的總覽,以及使用者的目的地和目前位置。

這樣一來,使用者不必放大地圖,就能預先掌握路況等即將發生的問題。並視需要重新規劃路線。如果使用者重新規劃路線,進度列會重設,就像從該點開始新行程一樣。

行程進度列會顯示下列狀態指標:

  • Route elapsed:行程中已完成的部分。

  • 目前位置:使用者在行程中的目前位置。

  • 路況:前方路況。

  • 最終目的地:行程的最終目的地。

在 NavigationView 或 NavigationFragment 上呼叫 setTripProgressBarEnabled() 方法,即可啟用行程進度列。例如:

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

行程進度列位置

  • 搜尋列左側大致與車速表、Google 標誌和「重新置中」按鈕 (如有顯示) 的左側對齊。寬度為 12 dp。
  • 行程進度列的高度固定不變。為因應小型裝置的垂直空間限制,行程進度列的顯示設定和高度會根據指定的螢幕高度中斷點調整。這些中斷點與裝置方向和地圖在螢幕上實際占用的空間無關:
  • 螢幕高度 行程進度列顯示設定 行程進度列高度 行程進度列 Y 軸位置
    小型:0 dp - 551 dp 隱藏 不適用 不適用
    中:552 dp - 739 dp 顯示 130 dp 起始側控制項上方 (車速表 / Google 標誌 / 重新置中按鈕)
    大型:740 dp 以上 顯示 290 dp 起始側控制項上方 (車速表 / Google 標誌 / 重新置中按鈕)
  • 如果行程進度列與轉彎資訊卡或其他導航 UI 元素重疊,則會顯示在這些元素下方。

指南針

在某些情況下,Navigation SDK 會提供指南針圖形 (顯示在地圖右上角),但只有在啟用時才會顯示。使用者按一下指南針後,攝影機會移動回航向為零的位置 (預設方向),指南針隨後也會消失。

如果啟用導航功能,且相機模式設為「追蹤」,指南針會保持顯示,輕觸指南針即可在傾斜和總覽相機視角之間切換。

為避免駕駛人分心,如果標頭 (在直向模式下) 展開並與指南針的預設位置衝突,指南針會保持在相同位置。如果您新增次要標頭自訂控制項或標頭附屬檢視畫面,系統會隱藏指南針,避免 UI 衝突。

指南針支援日間、夜間和深色模式。

指南針預設為啟用。您可以使用 GoogleMapOptions 類別的 compassEnabled 方法,設定是否啟用指南針。

關閉 3D 建築物

如果裝置效能有限,您可以呼叫 GoogleMap.setBuildingsEnabled(false),關閉 3D 建築物顯示功能。

Prompt Visibility API (實驗版)

Prompt Visibility API 可讓您新增事件監聽器,在 Navigation SDK UI 元素即將顯示前和移除後接收回呼,避免 Navigation SDK 產生的 UI 元素與自訂 UI 元素發生衝突。如需更多資訊 (包括程式碼範例),請參閱「設定即時中斷」頁面的「提示顯示設定 API」一節。