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

Khi sử dụng SDK điều hướng dành cho Android, bạn có thể sửa đổi trải nghiệm người dùng thông qua bản đồ của mình bằng cách xác định các thành phần và thành phần điều khiển trên giao diện người dùng tích hợp sẵn bản đồ. Bạn cũng có thể điều chỉnh giao diện hình ảnh của giao diện người dùng điều hướng. Giới thiệu vào trang Chính sách để 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.

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

Chế độ điều khiển trên giao diện người dùng của bản đồ

Các thành phần điều khiển trên giao diện người dùng của bản đồ nằm ở đầu chế độ xem điều hướng. Chiến lược phát hành đĩa đơn SDK điều hướng dành cho Android tự động đặt lại vị trí các thành phần điều khiển tuỳ chỉnh khi bố cục tích hợp sẵn thay đổi. Đối với mỗi vị trí của bố cục, bạn có thể đặt một chế độ điều khiển tuỳ chỉnh. Thành phần điều khiển tuỳ chỉnh có thể là một thành phần trên giao diện người dùng hoặc nếu bạn thiết kế yêu cầu nhiều hơn, bạn có thể sử dụng ViewGroup với nhiều phần tử trên giao diện người dùng.

setCustomControl phương thức 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

Ví dụ: những hình ảnh bên dưới là ví dụ về các vị trí khác nhau của một thành phần điều khiển trên giao diện người dùng để thông báo cho tài xế đi chung xe về vị trí của người đi trong chuyến đón.

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

Thêm tiêu đề phụ tuỳ chỉnh

Theo mặc định, các bố cục màn hình ở chế độ điều hướng sẽ cung cấp vị trí cho 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ư có hướng dẫn làn đường. Ứng dụng của bạn có thể dùng tiêu đề phụ này vị trí của bố cục cho nội dung tuỳ chỉnh. Khi sử dụng tính năng này, bao gồm mọi nội dung tiêu đề phụ mặc định. Nếu chế độ xem điều hướng của bạn có nền mà nền đó vẫn giữ nguyên, che phủ bởi tiêu đề 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ể sẽ xuất hiện ở đúng vị trí.

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

  1. Tạo Chế độ xem Android thông qua thành phần tuỳ chỉnh trên giao diện người dùng hoặc ViewGroup.
  2. Tăng cường XML hoặc tạo thực thể cho khung hiển thị tuỳ chỉnh để lấy thực thể của để thêm làm tiêu đề phụ.
  3. Sử dụng NavigationView.setCustomControl hoặc SupportNavigationFragment.setCustomControl với CustomControlPosition là secondary_SUBJECT.

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

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

Xoá tiêu đề phụ

Để xoá tiêu đề phụ và quay lại nội dung mặc định, hãy sử dụng setCustomControl.

Đặt thành phần hiển thị null để xoá thành phần hiển thị này.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Thêm một thành phần điều khiển tuỳ chỉnh vào cuối chế độ xem điều hướng

Ứng dụng của bạn có thể chỉ định một thành phần điều khiển tuỳ chỉnh được căn chỉnh theo cạnh dưới cùng của chế độ xem điều hướng. Khi ứng dụng của bạn thêm chế độ điều khiển tuỳ chỉnh, nút căn giữa lại và biểu trưng của Google di chuyển lên trên để phù hợp.

  1. Tạo Chế độ xem Android bằng thành phần giao diện người dùng hoặc nhóm thành phần hiển thị mà bạn muốn thêm.
  2. Tạo mảnh hoặc khung hiển thị điều hướng.
  3. Gọi phương thức setCustomControl trên mảnh hoặc khung hiển thị điều hướng, và chỉ định chế độ điều khiển và vị trí sẽ sử dụng.

Ví dụ sau đây cho thấy một View tuỳ chỉnh được thêm vào 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);

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

Để xoá thành phần điều khiển tuỳ chỉnh, hãy sử dụng phương thức setCustomControl và chỉ định của chế độ điều khiển mà bạn muốn xoá.

Thiết lập thành phần hiển thị thành null cho vị trí đó.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

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

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

Hãy tham khảo Chính sách để xem các nguyên tắc về các sửa đổi được chấp nhận đối với giao diện người dùng điều hướng.

Xem mã

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:

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 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
Các phần tử văn bản cho hướng dẫn
  • Màu văn bản
  • Phông chữ
  • Cỡ chữ của hàng đầu tiên
  • Cỡ chữ 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
  • 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 điều động 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 hoặc 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 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 giao thông

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

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 đèn giao thông và biển báo dừng trong giao diện người dùng của bản đồ. Với tính năng này, người dùng có thể bật hiển thị đèn giao thông hoặc biểu tượng biển báo dừng dọc để cung cấp bối cảnh rõ ràng hơn cho các chuyến đi hiệu quả và chính xác hơn.

Theo mặc định, đèn giao thông và biển báo dừng lại bị tắt trong SDK điều hướng. Để 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.

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

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

SDK điều hướng dành cho Android hiện sử dụng API Google Maps cho điểm đánh dấu. Chuyển đến 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 phủ Mô hình phân bổ trên Google. SDK điều hướng không hỗ trợ liên kết văn bản thành vĩ độ/kinh độ trên bản đồ hoặc thành một nhãn. Chuyển đến mục Thông tin windows để xem thêm của bạn.

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 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 độ hiển thị ở góc dưới cùng trong quá trình hướng dẫn. Biểu tượng này cho thấy giới hạn tốc độ đoạn đường mà xe đang lưu thông. Biểu tượng này chỉ xuất hiện ở các vị trí khi 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 độ tạm thời bị ẩn khi nút căn giữa được được hiển thị.

Đặt chế độ ban đêm

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

  • 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 thành phần điều hướng phân đoạn:

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

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

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.

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ư các sự kiện đó là của NavigationView. Ví dụ:

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

Đang ẩn 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 hiển thị ít tuyến đường thay thế hơn so với tuyến đường mặc định (hai) hoặc bằng cách không hiển thị các tuyến đường thay thế. Bạn có thể định cấu hình tuỳ chọn này trước bạn tìm nạp các tuyến đường bằng cách gọi RoutingOptions.alternateRoutesStrategy() với một trong các giá trị liệt kê sau:

Giá trị liệt kêMô tả
AlternateRoutesStrategy.SHOW_ALL Mặc định. Hiển thị tối đa 2 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ề 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);

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

Đã thêm thanh tiến trình chuyến đi vào tính năng đi theo chỉ dẫn.

Thanh tiến trình chuyến đi là một thanh dọc xuất hiện ở cạnh bên phải của bản đồ khi bắt đầu điều hướng. Khi được bật, chế độ xem này sẽ hiển thị thông tin tổng quan cho 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.

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

Thanh tiến trình chuyến đi cho thấy các chỉ báo trạng thái sau đây:

  • Tuyến đường đã trôi qua – phần đã trô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.

  • Trạng thái lưu lượng truy cập – trạng thái của lưu lượng truy cập 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 chuyến đi bằng cách gọi phương thức setTripProgressBarEnabled() về NavigationView hoặc SupportNavigationFragment. Ví dụ:

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