修改導覽 UI

使用 Android 專用的 Navigation SDK，您就可以 在地圖上決定要顯示哪些內建 UI 控制項和元素 即可。您也可以調整導覽 UI 的視覺外觀。推薦 到政策頁面 導覽 UI 的可接受修改指南

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

地圖 UI 控制項

地圖 UI 控制項位於導覽檢視上方。 Android 版 Navigation SDK 會自動調整自訂控制項的位置 內建版面配置變更時。您可以設定版面配置的每個位置 單一自訂控制項自訂控制項可以是單一 UI 元素，或如果您的設計 需要更多空間，您可以使用 ViewGroup 搭配多個 UI 元素。

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

  • SECONDARY_HEADER (僅以直向模式顯示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

例如，下圖顯示 UI 控制項的各種位置範例 ，在上車地點向代僱駕駛服務司機告知乘客所在位置。

自訂控制項 位置

新增自訂次要標頭

根據預設，導覽模式下的畫面版面配置會提供次要項目的位置 位於主要標頭下方這個次要標頭 ，例如車道指引您的應用程式可以使用這個次要標頭 自訂內容的版面配置位置。使用這項功能時，您的 控制項會涵蓋所有預設的次要標頭內容。如果您的導覽檢視畫面 背景就會保持運作，次要標題遮住背景 應用程式移除自訂控制項後，預設的次要標頭就能 出現在原地

自訂次要標頭位置的上邊緣與 做為主要標頭這個位置僅支援 portrait mode。於 landscape mode，次要標頭無法使用，版面配置也沒有 變更。

  1. 建立 Android 檢視畫面 自訂 UI 元素或 ViewGroup
  2. 加載 XML 或將自訂檢視區塊執行個體化，以取得 並新增為次要標頭

  3. 使用NavigationView.setCustomControl或 將「SupportNavigationFragment.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 檢視畫面 也就是您要新增的 UI 元素或檢視區塊群組。
  2. 建立導覽檢視畫面或片段。
  3. 在導覽檢視畫面或片段上呼叫 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);

地圖 UI 配件

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

啟用紅綠燈和停車標誌

你可以在地圖 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() 開啟或關閉夜間模式，或讓 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);

行程進度列

行程進度列已新增至導覽。

行程進度列是顯示於右側邊緣的垂直列 。啟用後，會顯示 完整行程，以及使用者的目的地和目前位置。

使用者可快速預測將出現的問題，例如 無需放大地圖。再視情況重新規劃路線 無從得知如果使用者重新規劃行程，進度列會重設，就像是新的 行程從該時間點開始。

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

  • 路線已經過了 - 行程的經過部分。

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

  • 流量狀態：近期流量的狀態。

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

呼叫 setTripProgressBarEnabled() 方法，啟用行程進度列 為 NavigationView 或 SupportNavigationFragment. 例如：

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