Tuỳ chỉnh giao diện người dùng điều hướng

Bạn có thể tuỳ chỉnh các thành phần của giao diện người dùng chỉ đường và bản đồ, đồng thời thêm điểm đánh dấu tuỳ chỉnh vào bản đồ. Hãy tham khảo trang Chính sách để biết 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.

Xem mã

Tuỳ chỉnh 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 ngã rẽ tiếp theo xuất hiện bên dưới tiêu đề (nếu có).

Bạn có thể thiết lập các thuộc tính sau:

Loại thuộc tínhThuộc tí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 ngã 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 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
  • Kích thước văn bản của hàng thứ hai
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
  • Kích thước văn bản của giá trị khoảng cách
  • Màu văn bản của đơn vị khoảng cách
  • Kích thước văn bản 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 làn đường được đề xuất

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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 giao thông

Sử dụng NavigationMap.setTrafficEnabled() để bật hoặc tắt lớp 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 độ lưu lượng truy cập hiển thị trên toàn bộ bản đồ, nhưng không ảnh hưởng đến các chỉ báo giao thông trên tuyến đường do trình điều hướng vẽ biểu đồ.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

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

Bạn có thể thêm điểm đánh dấu tuỳ chỉnh vào bản đồ để cho biết các địa điểm mà ứng dụng hoặc người dùng yêu thích. Ví dụ: bạn có thể muốn cho biết điểm đón ở cuối tuyến đường. Sử dụng NavigationMap.addMarker() để thêm một điểm đánh dấu và NavigationMap.setOnMarkerClickListener() để theo dõi các lượt nhấn vào một điểm đánh dấu.

Đoạn mã dưới đây sử dụng một biểu tượng được lưu trữ trong tài nguyên có thể vẽ của dự án, R.drawable.ic_person_pin_48dp. Bạn có thể dùng bất kỳ hình ảnh nào phù hợp với ứng dụng của mình.

// 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(destinationMarkerIcon)
            .title("Destination marker"));

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

Bạn có thể chỉ định một hình ảnh tuỳ chỉnh làm điểm đánh dấu; nhưng SDK hiện không hỗ trợ gắn nhãn các hình ảnh này bằng văn bản. Để biết thêm thông tin, hãy xem bài viết Tuỳ chỉnh điểm đánh dấu.

Văn bản nổi

Bạn có thể thêm văn bản nổi ở bất kỳ đâu trong ứng dụng của mình, miễn là thuộc tính của Google chưa được đề cập. SDK Điều hướng không hỗ trợ liên kết văn bản với vĩ độ/kinh độ trên bản đồ hoặc với một nhãn. Để biết thêm thông tin, hãy xem bài viết Cửa sổ thông tin.

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

Bạn có thể lập trình để hiện hoặc ẩn biểu tượng giới hạn tốc độ. Sử dụng NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() hoặc SupportNavigationFragment.setSpeedLimitIconEnabled() để hiện 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 cho biết giới hạn tốc độ của đường mà xe đang đi. 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 độ bị ẩn tạm thời khi nút căn giữa lại được hiển thị.

Đặt chế độ ban đêm

Bạn có thể lập trình để điều khiển hành vi của chế độ ban đêm. Sử dụng NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() hoặc SupportNavigationFragment.setForceNightMode() để bật hoặc tắt chế độ ban đêm hoặc để SDK điều hướng kiểm soát chế độ ban đêm.

  • AUTO Cho phép SDK điều hướng xác định chế độ phù 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 việc 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 chế độ xem rồi thêm chế độ xem đó vào hệ phân cấp của bạn.

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 GuidelinesListView giống như với NaviagtionView. Ví dụ:

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

Đang ẩ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 sự lộn xộn bằng cách cho thấy ít tuyến thay thế hơn so với mặc định (hai) hoặc bằng cách 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 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:

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

Ví dụ:

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

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