Sửa đổi giao diện người dùng điều hướng

Bằng Navigation SDK cho Android, bạn có thể sửa đổi trải nghiệm người dùng với bản đồ bằng cách xác định những thành phần và chế độ điều khiển giao diện người dùng tích hợp nào xuất hiện trên bản đồ. Bạn cũng có thể điều chỉnh giao diện trực quan của giao diện người dùng điều hướng. Hãy tham khảo trang Chính sách để biết hướng dẫn về những sửa đổi được phép đối với giao diện người dùng điều hướng.

Tài liệu này mô tả cách sửa đổi giao diện người dùng của bản đồ theo 2 cách:

• Các chế độ điều khiển giao diện người dùng bản đồ
• Các thành phần bổ trợ giao diện người dùng bản đồ

Các chế độ điều khiển giao diện người dùng bản đồ

Để đặt các phần tử trên giao diện người dùng tuỳ chỉnh trên khung hiển thị điều hướng, hãy sử dụng các thành phần điều khiển trên giao diện người dùng bản đồ để định vị đúng cách. Khi bố cục tích hợp thay đổi, Navigation SDK cho Android sẽ tự động định vị lại các chế độ điều khiển tuỳ chỉnh. Bạn có thể đặt một khung hiển thị chế độ điều khiển tuỳ chỉnh tại một thời điểm cho mỗi vị trí. Nếu thiết kế của bạn yêu cầu nhiều thành phần giao diện người dùng, bạn có thể đặt các thành phần đó trong một ViewGroup và truyền thành phần đó đến phương thức setCustomControl.

Phương thức setCustomControl cung cấp các vị trí như được xác định trong CustomControlPosition enum:

• SECONDARY_HEADER (chỉ xuất hiện ở chế độ dọc)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

Thêm chế độ điều khiển tuỳ chỉnh

1. Tạo một Khung hiển thị Android bằng phần tử trên giao diện người dùng tuỳ chỉnh hoặc ViewGroup.
2. Tăng cường XML hoặc tạo thực thể khung hiển thị tuỳ chỉnh để lấy một thực thể của khung hiển thị.

3. Sử dụng NavigationView.setCustomControl hoặc SupportNavigationFragment.setCustomControl với vị trí của chế độ điều khiển tuỳ chỉnh đã chọn từ CustomControlPosition enum.

   Ví dụ dưới đây tạo một phân đoạn và thêm một chế độ điều khiển tuỳ chỉnh ở vị trí tiêu đề phụ.

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

Xoá chế độ điều khiển tuỳ chỉnh

Để xoá một chế độ điều khiển tuỳ chỉnh, hãy gọi phương thức setCustomControl bằng tham số khung hiển thị null và vị trí của chế độ điều khiển tuỳ chỉnh đã chọn.

Ví dụ: đoạn mã sau đây sẽ xoá mọi tiêu đề phụ tuỳ chỉnh và quay lại nội dung mặc định:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Vị trí của chế độ điều khiển tuỳ chỉnh

Tiêu đề phụ

Để sử dụng vị trí của chế độ điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.SECONDARY_HEADER đến setCustomControl.

Theo mặc định, bố cục màn hình ở chế độ thao tác cung cấp một vị trí cho tiêu đề phụ nằm bên dưới tiêu đề chính. Tiêu đề phụ này xuất hiện khi cần thiết, chẳng hạn như khi có hướng dẫn làn đường. Ứng dụng của bạn có thể sử dụng vị trí tiêu đề phụ này của bố cục cho nội dung tuỳ chỉnh. Khi bạn sử dụng tính năng này, chế độ điều khiển của bạn sẽ bao gồm mọi nội dung tiêu đề phụ mặc định. Nếu khung hiển thị điều hướng có nền, thì nền đó vẫn ở nguyên vị trí, được tiêu đề phụ bao phủ. Khi ứng dụng của bạn xoá chế độ điều khiển tuỳ chỉnh, mọi tiêu đề phụ mặc định đều có thể xuất hiện ở vị trí đó.

Vị trí tiêu đề phụ tuỳ chỉnh căn chỉnh cạnh trên cùng với cạnh dưới cùng của tiêu đề chính. Vị trí này chỉ được hỗ trợ ở portrait mode. Ở landscape mode, tiêu đề phụ không có sẵn và bố cục không thay đổi.

Bắt đầu từ dưới lên

Để sử dụng vị trí của chế độ điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.BOTTOM_START_BELOW đến setCustomControl.

Vị trí của chế độ điều khiển tuỳ chỉnh này nằm ở góc bắt đầu từ dưới lên của bản đồ. Ở cả portrait mode và landscape mode, vị trí này nằm phía trên thẻ Thời gian đến dự kiến (ETA) và/hoặc chân trang tuỳ chỉnh (hoặc dọc theo cuối bản đồ nếu không có thẻ ETA và chân trang tuỳ chỉnh), đồng thời các thành phần Nav SDK (bao gồm cả nút căn giữa lại và biểu trưng Google) sẽ di chuyển lên để tính đến chiều cao của khung hiển thị chế độ điều khiển tuỳ chỉnh. Chế độ điều khiển này được đặt bên trong ranh giới trên bản đồ hiển thị, vì vậy, mọi khoảng đệm được thêm vào cạnh dưới cùng hoặc cạnh bắt đầu của bản đồ cũng sẽ thay đổi vị trí của chế độ điều khiển này.

Kết thúc từ dưới lên

Để sử dụng vị trí của chế độ điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.BOTTOM_END_BELOW đến setCustomControl.

Vị trí của chế độ điều khiển tuỳ chỉnh này nằm ở góc kết thúc từ dưới lên của bản đồ. Ở portrait mode, vị trí này nằm phía trên thẻ ETA và/hoặc chân trang tuỳ chỉnh (hoặc dọc theo cuối bản đồ nếu không có thẻ ETA và chân trang tuỳ chỉnh), nhưng ở landscape mode, vị trí này được căn chỉnh với cuối bản đồ. Mọi thành phần Nav SDK hiển thị dọc theo cạnh kết thúc (cạnh phải trong chế độ từ trái sang phải) sẽ di chuyển lên để tính đến chiều cao của khung hiển thị chế độ điều khiển tuỳ chỉnh. Chế độ điều khiển này được đặt bên trong ranh giới trên bản đồ hiển thị, vì vậy, mọi khoảng đệm được thêm vào cạnh dưới cùng hoặc cạnh kết thúc của bản đồ cũng sẽ thay đổi vị trí của chế độ điều khiển này.

Footer

Để sử dụng vị trí của chế độ điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.FOOTER đến setCustomControl.

Vị trí của chế độ điều khiển tuỳ chỉnh này được thiết kế cho khung hiển thị chân trang tuỳ chỉnh. Nếu thẻ ETA của Nav SDK hiển thị, thì chế độ điều khiển này sẽ nằm phía trên thẻ đó. Nếu không, chế độ điều khiển sẽ được căn chỉnh với cuối bản đồ. Không giống như các chế độ điều khiển tuỳ chỉnh BOTTOM_START_BELOW và BOTTOM_END_BELOW, chế độ điều khiển này được đặt bên ngoài ranh giới trên bản đồ hiển thị, nghĩa là mọi khoảng đệm được thêm vào bản đồ sẽ không thay đổi vị trí của chế độ điều khiển này.

Ở portrait mode, chân trang tuỳ chỉnh có chiều rộng đầy đủ. Các chế độ điều khiển tuỳ chỉnh ở cả vị trí CustomControlPosition.BOTTOM_START_BELOW và CustomControlPosition.BOTTOM_END_BELOW, cũng như các thành phần giao diện người dùng Nav SDK như nút căn giữa lại và biểu trưng Google, được đặt phía trên chân trang của chế độ điều khiển tuỳ chỉnh. Vị trí mặc định của dấu mũ nhọn sẽ tính đến chiều cao của chân trang tuỳ chỉnh.

Ở landscape mode, chân trang tuỳ chỉnh có chiều rộng bằng một nửa và được căn chỉnh với cạnh bắt đầu (cạnh trái trong chế độ từ trái sang phải), giống như thẻ ETA của Nav SDK. Các chế độ điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_START_BELOW và các thành phần giao diện người dùng Nav SDK như nút căn giữa lại và biểu trưng Google được đặt phía trên chân trang của chế độ điều khiển tuỳ chỉnh. Các chế độ điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_END_BELOW và mọi thành phần giao diện người dùng Nav SDK dọc theo cạnh kết thúc (cạnh phải trong chế độ từ trái sang phải) vẫn được căn chỉnh với cuối bản đồ. Vị trí mặc định của dấu mũ nhọn không thay đổi khi có chân trang tuỳ chỉnh vì chân trang không kéo dài đến cạnh kết thúc của bản đồ.

Các chế độ điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_START_BELOW và CustomControlPosition.BOTTOM_END_BELOW, cũng như các thành phần giao diện người dùng Nav SDK như nút căn giữa lại và biểu trưng Google được đặt phía trên chân trang của chế độ điều khiển tuỳ chỉnh.

Các thành phần bổ trợ giao diện người dùng bản đồ

Navigation SDK cho Android cung cấp các thành phần bổ trợ giao diện người dùng xuất hiện trong quá trình điều hướng, tương tự như các thành phần có trong ứng dụng Google Maps dành cho Android. Bạn có thể điều chỉnh khả năng hiển thị hoặc giao diện trực quan của các bộ điều khiển này như mô tả trong phần này. Những thay đổi bạn thực hiện ở đây sẽ được phản ánh trong phiên điều hướng tiếp theo.

Hãy tham khảo trang Chính sách để biết hướng dẫn về những sửa đổi được phép đối với giao diện người dùng điều hướng.

Xem mã

package com.example.navsdkcustomization;

import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CameraPerspective;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.Navigator;
import com.google.android.libraries.navigation.SimulationOptions;
import com.google.android.libraries.navigation.StylingOptions;
import com.google.android.libraries.navigation.SupportNavigationFragment;
import com.google.android.libraries.navigation.Waypoint;

/** An activity that displays a map and a customized navigation UI. */
public class NavigationActivityCustomization extends AppCompatActivity {

  private static final String TAG = NavigationActivityCustomization.class.getSimpleName();
  private Navigator mNavigator;
  private SupportNavigationFragment mNavFragment;
  private GoogleMap mMap;
  // Define the Sydney Opera House by specifying its place ID.
  private static final String SYDNEY_OPERA_HOUSE = "ChIJ3S-JXmauEmsRUcIaWtf4MzE";
  // Set fields for requesting location permission.
  private static final int PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION = 1;
  private boolean mLocationPermissionGranted;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Initialize the Navigation SDK.
    initializeNavigationSdk();
  }

  /**
   * Starts the Navigation SDK and sets the camera to follow the device's location. Calls the
   * navigateToPlace() method when the navigator is ready.
   */
  private void initializeNavigationSdk() {
    /*
     * Request location permission, so that we can get the location of the
     * device. The result of the permission request is handled by a callback,
     * onRequestPermissionsResult.
     */
    if (ContextCompat.checkSelfPermission(
            this.getApplicationContext(), android.Manifest.permission.ACCESS_FINE_LOCATION)
        == PackageManager.PERMISSION_GRANTED) {
      mLocationPermissionGranted = true;
    } else {
      ActivityCompat.requestPermissions(
          this,
          new String[] {android.Manifest.permission.ACCESS_FINE_LOCATION},
          PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION);
    }

    if (!mLocationPermissionGranted) {
      displayMessage(
          "Error loading Navigation SDK: " + "The user has not granted location permission.");
      return;
    }

    // Get a navigator.
    NavigationApi.getNavigator(
        this,
        new NavigationApi.NavigatorListener() {
          /** Sets up the navigation UI when the navigator is ready for use. */
          @Override
          public void onNavigatorReady(Navigator navigator) {
            displayMessage("Navigator ready.");
            mNavigator = navigator;
            mNavFragment =
                (SupportNavigationFragment)
                    getSupportFragmentManager().findFragmentById(R.id.navigation_fragment);

            // Get the map.
            mNavFragment.getMapAsync(
                new OnMapReadyCallback() {
                  @Override
                  public void onMapReady(GoogleMap map) {
                    mMap = map;
                    // Navigate to a place, specified by Place ID.
                    navigateToPlace(SYDNEY_OPERA_HOUSE);
                  }
                });
          }

          /**
           * Handles errors from the Navigation SDK.
           *
           * @param errorCode The error code returned by the navigator.
           */
          @Override
          public void onError(@NavigationApi.ErrorCode int errorCode) {
            switch (errorCode) {
              case NavigationApi.ErrorCode.NOT_AUTHORIZED:
                displayMessage(
                    "Error loading Navigation SDK: Your API key is "
                        + "invalid or not authorized to use the Navigation SDK.");
                break;
              case NavigationApi.ErrorCode.TERMS_NOT_ACCEPTED:
                displayMessage(
                    "Error loading Navigation SDK: User did not accept "
                        + "the Navigation Terms of Use.");
                break;
              case NavigationApi.ErrorCode.NETWORK_ERROR:
                displayMessage("Error loading Navigation SDK: Network error.");
                break;
              case NavigationApi.ErrorCode.LOCATION_PERMISSION_MISSING:
                displayMessage(
                    "Error loading Navigation SDK: Location permission " + "is missing.");
                break;
              default:
                displayMessage("Error loading Navigation SDK: " + errorCode);
            }
          }
        });
  }

  /** Customizes the navigation UI and the map. */
  private void customizeNavigationUI() {
    // Set custom colors for the navigator.
    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));

    mMap.setTrafficEnabled(false);

    // Place a marker at the final destination.
    if (mNavigator.getCurrentRouteSegment() != null) {
      LatLng destinationLatLng = mNavigator.getCurrentRouteSegment().getDestinationLatLng();

      Bitmap destinationMarkerIcon =
          BitmapFactory.decodeResource(getResources(), R.drawable.ic_person_pin_48dp);

      mMap.addMarker(
          new MarkerOptions()
              .position(destinationLatLng)
              .icon(BitmapDescriptorFactory.fromBitmap(destinationMarkerIcon))
              .title("Destination marker"));

      // Listen for a tap on the marker.
      mMap.setOnMarkerClickListener(
          new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
              displayMessage(
                  "Marker tapped: "
                      + marker.getTitle()
                      + ", at location "
                      + marker.getPosition().latitude
                      + ", "
                      + marker.getPosition().longitude);

              // The event has been handled.
              return true;
            }
          });
    }

    // Set the camera to follow the device location with 'TILTED' driving view.
    mMap.followMyLocation(CameraPerspective.TILTED);
  }

  /**
   * Requests directions from the user's current location to a specific place (provided by the
   * Google Places API).
   */
  private void navigateToPlace(String placeId) {
    Waypoint destination;
    try {
      destination =
          Waypoint.builder().setPlaceIdString(placeId).build();
    } catch (Waypoint.UnsupportedPlaceIdException e) {
      displayMessage("Error starting navigation: Place ID is not supported.");
      return;
    }

    // Create a future to await the result of the asynchronous navigator task.
    ListenableResultFuture<Navigator.RouteStatus> pendingRoute =
        mNavigator.setDestination(destination);

    // Define the action to perform when the SDK has determined the route.
    pendingRoute.setOnResultListener(
        new ListenableResultFuture.OnResultListener<Navigator.RouteStatus>() {
          @Override
          public void onResult(Navigator.RouteStatus code) {
            switch (code) {
              case OK:
                // Hide the toolbar to maximize the navigation UI.
                if (getActionBar() != null) {
                  getActionBar().hide();
                }

                // Customize the navigation UI.
                customizeNavigationUI();

                // Enable voice audio guidance (through the device speaker).
                mNavigator.setAudioGuidance(Navigator.AudioGuidance.VOICE_ALERTS_AND_GUIDANCE);

                // Simulate vehicle progress along the route for demo/debug builds.
                if (BuildConfig.DEBUG) {
                  mNavigator
                      .getSimulator()
                      .simulateLocationsAlongExistingRoute(
                          new SimulationOptions().speedMultiplier(5));
                }

                // Start turn-by-turn guidance along the current route.
                mNavigator.startGuidance();
                break;
              // Handle error conditions returned by the navigator.
              case NO_ROUTE_FOUND:
                displayMessage("Error starting navigation: No route found.");
                break;
              case NETWORK_ERROR:
                displayMessage("Error starting navigation: Network error.");
                break;
              case ROUTE_CANCELED:
                displayMessage("Error starting navigation: Route canceled.");
                break;
              default:
                displayMessage("Error starting navigation: " + String.valueOf(code));
            }
          }
        });
  }

  /** Handles the result of the request for location permissions. */
  @Override
  public void onRequestPermissionsResult(
      int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    mLocationPermissionGranted = false;
    switch (requestCode) {
      case PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION:
        {
          // If request is canceled, the result arrays are empty.
          if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            mLocationPermissionGranted = true;
          }
        }
    }
  }

  /**
   * Shows a message on screen and in the log. Used when something goes wrong.
   *
   * @param errorMessage The message to display.
   */
  private void displayMessage(String errorMessage) {
    Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
    Log.d(TAG, errorMessage);
  }
}

Điểm đến nổi bật và lối vào

Khi một điểm đến được tạo bằng a placeID, toà nhà điểm đến sẽ được làm nổi bật và biểu tượng lối vào sẽ xuất hiện (nếu có thể). Các dấu hiệu trực quan này giúp người dùng phân biệt và di chuyển đến điểm đến của họ.

Để tạo một điểm đến bằng placeID, hãy sử dụng Waypoint.Builder.setPlaceIdString() phương thức.

Sửa đổi tiêu đề điều hướng

Sử dụng SupportNavigationFragment.setStylingOptions() hoặc NavigationView.setStylingOptions() để thay đổi giao diện của tiêu đề điều hướng và chỉ báo rẽ tiếp theo xuất hiện bên dưới tiêu đề (nếu có).

Bạn có thể đặt các thuộc tính sau:

Ví dụ sau đây cho thấy cách đặt các tuỳ chọn kiểu:

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

Tắt lớp thông tin về giao thông

Sử dụng GoogleMap.setTrafficEnabled() để bật hoặc tắt lớp thông tin về giao thông trên bản đồ. Chế độ cài đặt này ảnh hưởng đến các chỉ báo về mật độ giao thông hiển thị trên toàn bộ bản đồ. Tuy nhiên, chế độ cài đặt này không ảnh hưởng đến các chỉ báo về giao thông trên tuyến đường do trình điều hướng vẽ.

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

Bật đèn giao thông và biển báo dừng

Bạn có thể bật tính năng hiển thị đèn giao thông và biển báo dừng trên bản đồ trong quá trình điều hướng đang hoạt động. Tính năng này cung cấp thêm thông tin về bối cảnh cho các tuyến đường và thao tác trong chuyến đi.

Theo mặc định, đèn giao thông và biển báo dừng bị tắt trong Navigation SDK. Để bật tính năng này, hãy gọi DisplayOptions cho từng tính năng một cách độc lập.

Ví dụ sau đây cho thấy cách ẩn đèn giao thông và biển báo dừng:

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

Thêm điểm đánh dấu tuỳ chỉnh

Navigation SDK cho Android hiện sử dụng API Google Maps cho điểm đánh dấu. Hãy truy cập vào tài liệu về Maps API để biết thêm thông tin.

Văn bản nổi

Bạn có thể thêm văn bản nổi ở bất cứ đâu trong ứng dụng, miễn là văn bản đó không che phủ thông tin ghi nhận công trạng của Google. Navigation SDK không hỗ trợ việc neo văn bản vào một vĩ độ/kinh độ trên bản đồ hoặc vào một nhãn. Hãy truy cập vào trang Cửa sổ thông tin để biết thêm thông tin.

Hiển thị giới hạn tốc độ

Bạn có thể hiển thị hoặc ẩn biểu tượng giới hạn tốc độ theo phương thức lập trình. Sử dụng NavigationView.setSpeedLimitIconEnabled() hoặc SupportNavigationFragment.setSpeedLimitIconEnabled() để hiển thị hoặc ẩn biểu tượng giới hạn tốc độ. Khi được bật, biểu tượng giới hạn tốc độ sẽ hiển thị ở góc dưới cùng trong quá trình hướng dẫn. Biểu tượng này hiển thị giới hạn tốc độ của con đường mà xe đang di chuyển. Biểu tượng này chỉ xuất hiện ở những vị trí có dữ liệu giới hạn tốc độ đáng tin cậy.

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

Biểu tượng giới hạn tốc độ sẽ tạm thời bị ẩn khi nút căn giữa lại hiển thị.

Đặt chế độ ban đêm

Bạn có thể kiểm soát hành vi của chế độ ban đêm theo phương thức lập trình. Sử dụng NavigationView.setForceNightMode() hoặc SupportNavigationFragment.setForceNightMode() để bật hoặc tắt chế độ ban đêm, hoặc cho phép Navigation SDK cho Android kiểm soát chế độ này.

• AUTO Cho phép Navigation SDK xác định chế độ thích hợp theo vị trí của thiết bị và giờ địa phương.
• FORCE_NIGHT buộc bật chế độ ban đêm.
• FORCE_DAY buộc bật chế độ ban ngày.

Ví dụ sau đây cho thấy cách buộc bật chế độ ban đêm trong một phân đoạn điều hướng:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Hiển thị danh sách đường đi

Trước tiên, hãy tạo khung hiển thị và thêm khung hiển thị đó vào hệ phân cấp của bạn.

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

Hãy nhớ chuyển tiếp các sự kiện trong thời gian hoạt động đến DirectionsListView giống như cách bạn chuyển tiếp các sự kiện đó đến NavigationView. Ví dụ:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Ẩn các tuyến đường thay thế

Khi giao diện người dùng trở nên lộn xộn với quá nhiều thông tin, bạn có thể giảm bớt sự lộn xộn bằng cách hiển thị ít tuyến đường thay thế hơn so với mặc định (2 tuyến đường) hoặc không hiển thị tuyến đường thay thế nào. Bạn có thể định cấu hình tuỳ chọn này trước khi tìm nạp các tuyến đường bằng cách gọi phương thức RoutingOptions.alternateRoutesStrategy() với một trong các giá trị liệt kê sau:

Ví dụ về mã sau đây minh hoạ cách ẩn hoàn toàn các tuyến đường thay thế.

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

Thanh tiến trình chuyến đi

Thanh tiến trình chuyến đi là một thanh dọc xuất hiện ở cạnh bắt đầu/dẫn đầu của bản đồ khi quá trình điều hướng bắt đầu. Khi được bật, thanh này sẽ hiển thị thông tin tổng quan về toàn bộ chuyến đi, cùng với điểm đến và vị trí hiện tại của người dùng.

Thanh tiến trình chuyến đi giúp người dùng nhanh chóng dự đoán mọi vấn đề sắp tới, chẳng hạn như tình trạng giao thông, mà không cần phóng to. Sau đó, họ có thể đổi tuyến đường chuyến đi nếu cần. Nếu người dùng định tuyến lại chuyến đi, thanh tiến trình sẽ đặt lại như thể một chuyến đi mới đã bắt đầu từ thời điểm đó.

Thanh tiến trình chuyến đi hiển thị các chỉ báo trạng thái sau:

• Route elapsed (Tuyến đường đã đi) – phần đã đi của chuyến đi.

• Current position (Vị trí hiện tại) – vị trí hiện tại của người dùng trong chuyến đi.

• Traffic status (Tình trạng giao thông) – tình trạng giao thông sắp tới.

• Final destination (Điểm đến cuối cùng) – điểm đến cuối cùng của chuyến đi.

Bật thanh tiến trình chuyến đi bằng cách gọi phương thức setTripProgressBarEnabled() trên NavigationView hoặc SupportNavigationFragment. Ví dụ:

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

Vị trí của thanh tiến trình chuyến đi

• Cạnh trái của thanh này căn chỉnh gần đúng với cạnh trái của đồng hồ đo tốc độ, biểu trưng Google và nút Căn giữa lại (khi hiển thị). Chiều rộng là 12 dp.
• Thanh tiến trình chuyến đi duy trì chiều cao tĩnh. Để thích ứng với các giới hạn về không gian dọc trên các thiết bị nhỏ hơn, khả năng hiển thị và chiều cao của thanh tiến trình chuyến đi sẽ thích ứng dựa trên các điểm ngắt được chỉ định về chiều cao màn hình. Các điểm ngắt này độc lập với hướng thiết bị và lượng không gian mà bản đồ thực sự chiếm trên màn hình:

Chiều cao màn hình	Chế độ hiển thị thanh tiến trình chuyến đi	Chiều cao thanh tiến trình chuyến đi	Vị trí trục y của thanh tiến trình chuyến đi
Nhỏ: 0 dp – 551 dp	Không hiển thị	Không áp dụng	Không áp dụng
Trung bình: 552 dp – 739 dp	Hiển thị	130 dp	Phía trên các chế độ điều khiển cạnh bắt đầu (đồng hồ đo tốc độ / biểu trưng Google / nút Căn giữa lại)
Lớn: 740 dp trở lên	Hiển thị	290 dp	Phía trên các chế độ điều khiển cạnh bắt đầu (đồng hồ đo tốc độ / biểu trưng Google / nút Căn giữa lại)

• Nếu thanh tiến trình chuyến đi chồng lên thẻ rẽ hoặc các thành phần giao diện người dùng điều hướng khác, thì thanh này sẽ xuất hiện bên dưới các thành phần khác đó.

La bàn

Navigation SDK cung cấp một hình ảnh la bàn xuất hiện ở góc trên cùng bên phải của bản đồ trong một số trường hợp và chỉ khi được bật. Khi người dùng nhấp vào la bàn, camera sẽ tạo ảnh động quay lại vị trí có hướng là 0 (hướng mặc định) và la bàn sẽ mờ dần ngay sau đó.

Nếu tính năng điều hướng được bật và chế độ camera được đặt thành "following" (theo dõi), thì la bàn vẫn hiển thị và việc nhấn vào la bàn sẽ chuyển đổi giữa góc nhìn camera nghiêng và góc nhìn tổng quan.

Để tránh làm người lái xe mất tập trung, la bàn vẫn ở nguyên vị trí nếu tiêu đề (ở chế độ dọc) mở rộng và xung đột với vị trí mặc định của la bàn. Nếu bạn thêm một chế độ điều khiển tuỳ chỉnh tiêu đề phụ hoặc khung hiển thị thành phần bổ trợ tiêu đề, thì la bàn sẽ bị ẩn để tránh xung đột giao diện người dùng.

La bàn hỗ trợ chế độ ban ngày và ban đêm, cũng như chế độ tối.

La bàn được bật theo mặc định. Bạn có thể đặt xem la bàn có được bật hay không bằng compassEnabled phương thức trên lớp GoogleMapOptions.

Tắt toà nhà 3D

Đối với các thiết bị bị hạn chế về hiệu suất, bạn có thể tắt tính năng hiển thị toà nhà 3D bằng cách gọi GoogleMap.setBuildingsEnabled(false).

API Hiển thị lời nhắc (Thử nghiệm)

API Khả năng hiển thị lời nhắc cho phép bạn tránh xung đột giữa các phần tử trên giao diện người dùng do Navigation SDK tạo và các phần tử trên giao diện người dùng tuỳ chỉnh của riêng bạn bằng cách thêm một trình nghe để nhận lệnh gọi lại trước khi một phần tử trên giao diện người dùng Navigation SDK sắp xuất hiện và ngay khi phần tử đó bị xoá. Để biết thêm thông tin, bao gồm cả mã mẫu, hãy xem phần API Hiển thị lời nhắc trên trang Định cấu hình các gián đoạn theo thời gian thực.