Hãy tham gia Ngày cộng đồng nhà phát triển Google Maps Platform tiếp theo của chúng tôi tại San Francisco vào tháng 12! Đăng ký ngay để tham dự.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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

Khi sử dụng SDK Điều hướng cho Android, bạn có thể sửa đổi trải nghiệm người dùng bằng bản đồ của mình bằng cách xác định thành phần điều khiển trên giao diện người dùng và phần tử giao diện người dùng tích hợp sẵn nào sẽ xuất hiện trên bản đồ. Bạn cũng có thể điều chỉnh giao diện 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 các nguyên tắc về những nội dung sửa đổi được chấp nhận đố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 hai cách:

Thành phần điều khiển trên giao diện người dùng của bản đồ
Phụ kiện giao diện người dùng bản đồ

Thành phần điều khiển trên giao diện người dùng của bản đồ

Để đặt các phần tử trên giao diện người dùng tuỳ chỉnh trên chế độ xem thông tin chỉ đườ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 của Bản đồ để định vị chính xác. Khi bố cục tích hợp thay đổi, SDK Điều hướng dành cho Android sẽ tự động đặt lại vị trí các chế độ điều khiển tuỳ chỉnh của bạn. Bạn có thể đặt một chế độ xem đ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 phần tử trên giao diện người dùng, bạn có thể đặt các phần tử đó vào một ViewGroup rồi truyền phần tử đó vào phương thức setCustomControl.

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

SECONDARY_HEADER (chỉ xuất hiện ở chế độ chân dung)
BOTTOM_START_BELOW
BOTTOM_END_BELOW
FOOTER

Vị trí điều khiển tuỳ chỉnh cho hướng dọc. — Vị trí điều khiển tuỳ chỉnh cho hướng dọc

Vị trí điều khiển tuỳ chỉnh cho hướng ngang. — Vị trí điều khiển tuỳ chỉnh cho hướng ngang

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

Tạo 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.
Tăng cường XML hoặc tạo thực thể cho chế độ xem tuỳ chỉnh để lấy một thực thể của chế độ xem.
Sử dụng NavigationView.setCustomControl hoặc NavigationFragment.setCustomControl với vị trí điều khiển tuỳ chỉnh đã chọn từ enum CustomControlPosition.

Lưu ý: Ứng dụng của bạn nên gọi phương thức này trên luồng giao diện người dùng.

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

Lưu ý: Mã trong ví dụ có dấu ngắt dòng để dễ nhìn trong tài liệu. Hãy nhớ xoá các tệp này nếu cần.
```
 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 thành phần điều khiển tuỳ chỉnh, hãy gọi phương thức setCustomControl bằng tham số chế độ xem null và vị trí thành phần điều khiển tuỳ chỉnh đã chọn.

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Vị trí điều khiển tuỳ chỉnh

Tiêu đề phụ

Để sử dụng vị trí đ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 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 về 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, quyền kiểm soát của bạn sẽ áp dụng cho mọi nội dung tiêu đề phụ mặc định. Nếu khung hiển thị điều hướng của bạn có nền, thì nền đó sẽ giữ nguyên vị trí và được tiêu đề phụ che 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í của chế độ điều khiển đó.

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ợ trong portrait mode. Trong 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

Vị trí bắt đầu của thành phần điều khiển tuỳ chỉnh ở dưới cùng cho hướng dọc. — Vị trí điều khiển tuỳ chỉnh ở dưới cùng bên trái cho hướng dọc

Vị trí bắt đầu của thành phần điều khiển tuỳ chỉnh ở dưới cùng cho hướng ngang. — Vị trí điều khiển tuỳ chỉnh ở dưới cùng bên trái cho hướng ngang

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

Vị trí điều khiển tuỳ chỉnh này nằm ở góc dưới cùng bên trái của bản đồ. Trong cả portrait mode và landscape mode, thành phần 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ành phần nào), còn các thành phần của SDK Điều hướng (bao gồm cả nút căn giữa và biểu trưng Google) sẽ di chuyển lên trên để phù hợp với chiều cao của chế độ xem điều khiển tuỳ chỉnh. Chế độ điều khiển này nằm trong ranh giới hiển thị của bản đồ, vì vậy, mọi khoảng đệm được thêm vào cạnh dưới 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.

Điểm cuối dưới cùng

Vị trí điều khiển tuỳ chỉnh ở cuối dưới cùng cho hướng dọc. — Vị trí điều khiển tuỳ chỉnh ở cuối dưới cùng cho hướng dọc

Vị trí điều khiển tuỳ chỉnh ở cuối dưới cùng cho hướng ngang. — Vị trí điều khiển tuỳ chỉnh ở cuối dưới cùng cho hướng ngang

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

Vị trí điều khiển tuỳ chỉnh này nằm ở góc dưới cùng của bản đồ. Trong portrait mode, nút 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ó cả hai), nhưng trong landscape mode, nút này được căn chỉnh với cuối bản đồ. Mọi phần tử SDK điều hướng hiển thị dọc theo cạnh cuối (bên phải trong LTR) sẽ di chuyển lên để tính đến chiều cao của chế độ xem điều khiển tuỳ chỉnh. Thành phần điều khiển này nằm trong ranh giới hiển thị của bản đồ, vì vậy, mọi khoảng đệm được thêm vào cạnh dưới hoặc cạnh cuối của bản đồ cũng sẽ thay đổi vị trí của thành phần điều khiển này.

Vị trí điều khiển tuỳ chỉnh ở chân trang cho hướng dọc. — Vị trí của thành phần điều khiển tuỳ chỉnh ở chân trang cho hướng dọc

Vị trí điều khiển tuỳ chỉnh ở chân trang cho hướng ngang. — Vị trí của thành phần điều khiển tuỳ chỉnh ở chân trang cho hướng ngang

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

Vị trí điều khiển tuỳ chỉnh này được thiết kế cho chế độ xem chân trang tuỳ chỉnh. Nếu thẻ ETA của SDK Điều hướng hiển thị, thì thành phần điều khiển này sẽ nằm phía trên thẻ đó. Nếu không, thành phần điều khiển sẽ được căn chỉnh với phần dưới cùng của 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 bản đồ hiển thị, tức 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.

Trong 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 trên giao diện người dùng của SDK Điều hướng như nút căn giữa và biểu trưng Google, đều đượ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 chữ V sẽ tính đến chiều cao tuỳ chỉnh của chân trang.

Trong 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 theo phía bắt đầu (phía bên trái trong LTR), giống như thẻ ETA của SDK Điều hướng. Các chế độ điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_START_BELOW và các phần tử trên giao diện người dùng của SDK điều hướng như nút căn giữa 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 nút điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_END_BELOW và mọi phần tử trên giao diện người dùng của SDK Điều hướng dọc theo cạnh cuối (bên phải trong LTR) vẫn được căn chỉnh với phần dưới cùng của bản đồ. Vị trí mặc định của chữ V 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 cuối 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 phần tử trên giao diện người dùng của SDK điều hướng như nút căn giữa 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.

Phụ kiện giao diện người dùng của bản đồ

Navigation SDK cho Android cung cấp các phụ kiện 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 phụ kiện trong ứng dụng Google Maps cho Android. Bạn có thể điều chỉnh chế độ hiển thị hoặc giao diện của các chế độ đ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 áp dụng trong phiên đi theo chỉ dẫn tiếp theo.

Tham khảo trang Chính sách để biết nguyên tắc về các nội dung sửa đổi được chấp nhận đối với giao diện người dùng điều hướng.

Xem mã

Hiện/Ẩn mã Java cho hoạt động điều hướng.

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.AudioGuidanceSettings;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationFragment;
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.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 NavigationFragment 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 =
                (NavigationFragment)
                    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).
                AudioGuidanceSettings audioSettings =
                    AudioGuidanceSettings.builder()
                        .setGuidanceMode(
                            AudioGuidanceSettings.GuidanceMode.VOICE_ALERTS_AND_GUIDANCE)
                        .build();
                mNavigator.setAudioGuidanceSettings(audioSettings);

                // 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;
              case ROUTING_TIMEOUT:
                displayMessage("Error starting navigation: Routing timed out.");
                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);
  }
}

Lối vào và điểm đến được làm nổi bật

Khi một điểm đến được tạo bằng placeID, toà nhà của đ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 (bất cứ khi nào có thể). Những 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 đích đến bằng placeID, hãy sử dụng phương thức Waypoint.Builder.setPlaceIdString().

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

Sử dụng NavigationFragment.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 đề khi có sẵn.

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

Loại thuộc tính	Thuộc tính
Màu nền	Chế độ ban ngày chính – màu ban ngày của tiêu đề điều hướng Chế độ ban ngày phụ – màu ban ngày của chỉ báo rẽ tiếp theo Chế độ ban đêm chính – màu ban đêm của tiêu đề điều hướng Chế độ ban đêm phụ – màu ban đêm của chỉ báo rẽ tiếp theo
Phần tử văn bản cho hướng dẫn	Màu văn bản Phông chữ Kích thước văn bản của hàng đầu tiên Cỡ chữ của hàng thứ hai
Các phần tử văn bản cho các bước tiếp theo	Phông chữ Màu văn bản của giá trị khoảng cách Cỡ chữ của giá trị khoảng cách Màu văn bản của đơn vị khoảng cách Cỡ chữ của đơn vị khoảng cách
Biểu tượng thao tác	Màu của biểu tượng thao tác lớn Màu của biểu tượng thao tác nhỏ
Hướng dẫn làn đường	Màu của (các) làn đường được đề xuất

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

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

Tắt lớp giao thông

Sử dụng GoogleMap.setTrafficEnabled() để bật hoặc tắt lớp lưu lượng truy cập 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, việc này không ảnh hưởng đến thông tin chỉ dẫn về tình hình giao thông trên tuyến đường do trình điều hướng vạch ra.

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

Đèn giao thông và biển báo dừng

Biểu tượng đèn giao thông và biển báo dừng dọc theo tuyến đường đi theo chỉ dẫn.

Trong khi chỉ đường, bản đồ sẽ hiển thị đèn giao thông và biển báo dừng để cung cấp cho người dùng thêm thông tin về tuyến đường và các thao tác sắp tới. Kể từ phiên bản 8.0.0, bạn không thể tắt tính năng này.

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ề API Maps để 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 mất thông tin ghi nhận tác giả 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 chuyển đến phần 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 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 NavigationFragment.setSpeedLimitIconEnabled() để hiện hoặc ẩn biểu tượng giới hạn tốc độ. Khi bạn bật tính năng này, biểu tượng giới hạn tốc độ sẽ xuất hiện ở góc dưới cùng trong khi chỉ đường. Biểu tượng này cho biết giới hạn tốc độ của tuyến đườ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 đáng tin cậy về giới hạn tốc độ.

 // 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 xuất hiện.

Đặ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 NavigationFragment.setForceNightMode() để bật hoặc tắt chế độ ban đêm, hoặc cho phép SDK Điều hướng cho Android kiểm soát chế độ này.

AUTO Cho phép SDK Điều hướng xác định chế độ phù hợp theo vị trí 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 mảnh đ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.

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 vòng đời đến DirectionsListView giống như với 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 (hai) hoặc không hiển thị tuyến đường thay thế nào. Bạn có thể định cấu hình lựa chọn này trước khi tìm nạp tuyến đường bằng cách gọi phương thức RoutingOptions.alternateRoutesStrategy() với một trong các giá trị enum sau:

Giá trị enum	Mô tả
AlternateRoutesStrategy.SHOW_ALL	Mặc định. Hiển thị tối đa hai tuyến đường thay thế.
AlternateRoutesStrategy.SHOW_ONE	Hiển thị một tuyến đường thay thế (nếu có).
AlternateRoutesStrategy.SHOW_NONE	Ẩn các tuyến đường thay thế.

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 của chuyến đi

Thanh tiến trình của chuyến đi đã được thêm vào tính năng chỉ đường.

Thanh tiến trình của chuyến đi là một thanh dọc xuất hiện ở phía bắt đầu/phía trước của bản đồ khi quá trình đi theo chỉ dẫn bắt đầu. Khi được bật, chế độ 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.

Điều này giúp người dùng dự đoán mọi vấn đề sắp xảy ra, 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 cho chuyến đi nếu cần. Nếu người dùng đổi tuyến đường cho 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 của chuyến đi cho biết các trạng thái sau:

Tuyến đường đã đi qua – phần đã đi qua của chuyến đi.
Vị trí hiện tại – vị trí hiện tại của người dùng trong chuyến đi.
Tình trạng giao thông – tình trạng giao thông sắp tới.
Đ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 của chuyến đi bằng cách gọi phương thức setTripProgressBarEnabled() trên NavigationView hoặc NavigationFragment. Ví dụ:

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

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

Phía bên trái của thanh này gần như thẳng hàng với phía bên trái của đồng hồ tốc độ, biểu trưng Google và nút Đặt lại vị trí chính giữa (khi hiển thị). Chiều rộng là 12 dp.
Thanh tiến trình của chuyến đi duy trì chiều cao cố đị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, chế độ hiển thị và chiều cao của thanh tiến trình chuyến đi sẽ điều chỉnh dựa trên các điểm ngắt được chỉ định trong chiều cao màn hình. Các điểm ngắt này không phụ thuộc vào hướng của thiết bị và không gian thực tế mà bản đồ chiếm trên màn hình:

Chiều cao màn hình	Chế độ hiển thị thanh tiến trình của chuyến đi	Chiều cao của 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 nút điều khiển ở bên trái (đồng hồ tốc độ / biểu trưng Google / nút Đặt lại vị trí chính giữa)
Lớn: 740 dp trở lên	Hiển thị	290 dp	Phía trên các nút điều khiển ở bên trái (đồng hồ tốc độ / biểu trưng Google / nút Đặt lại vị trí chính giữa)

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

La bàn

Navigation SDK cung cấp 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 nhất định và chỉ khi được bật. Khi người dùng nhấp vào la bàn, camera sẽ tạo ảnh động trở lại vị trí có hướng bằng 0 (hướng mặc định) và la bàn sẽ mờ dần ngay sau đó.

Nếu bạn bật tính năng chỉ đường và đặt chế độ camera thành "đang theo dõi", thì la bàn sẽ vẫn hiển thị và khi bạn nhấn vào la bàn, góc nhìn của camera sẽ chuyển đổi giữa chế độ nghiêng và chế độ xem tổng quan.

Để tránh gây mất tập trung cho người lái xe, la bàn sẽ giữ 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 thành phần điều khiển tuỳ chỉnh cho tiêu đề phụ hoặc chế độ xem phụ kiện 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à chế độ ban đêm, cũng như chế độ tối.

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

Tắt toà nhà 3D

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

Prompt Visibility API (Thử nghiệm)

Prompt Visibility API giúp bạn tránh xung đột giữa các phần tử trên giao diện người dùng do SDK điều hướng tạo ra 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 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 của SDK điều hướng 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 sự gián đoạn theo thời gian thực.