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 với bản đồ của mình bằng cách xác định những 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 nào xuất hiện trê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. 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:
Các 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. SDK Điều hướng dành cho Android tự động định vị lại các chế độ điều khiển tuỳ chỉnh của bạn 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 tuỳ chọn đ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 thiết kế của bạn yêu cầu nhiều thành phần hơn, bạn có thể sử dụng ViewGroup
với nhiều thành phần trên giao diện người dùng.
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
Hình ảnh này cho thấy ví dụ về nhiều vị trí của một thành phần điều khiển trên giao diện người dùng để cho người lái xe biết vị trí của người lái.
Thêm tiêu đề phụ tuỳ chỉnh
Theo mặc định, bố cục màn hình ở chế độ điều hướng 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ể dùng vị trí tiêu đề phụ này của bố cục cho nội dung tuỳ chỉnh. Khi sử dụng tính năng này, chế độ kiểm soát 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ủa bạn có nền, thì nền đó vẫn giữ nguyên và được bao 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ể xuất hiện ở vị trí đó.
Vị trí tiêu đề phụ tuỳ chỉnh sẽ 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
. Trong landscape mode
, tiêu đề phụ không có và bố cục không thay đổi.
- Tạo Khung hiển thị Android bằng thành phầ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 khung hiển thị tuỳ chỉnh để lấy một thực thể của khung hiển thị cần thêm vào làm tiêu đề phụ.
Sử dụng
NavigationView.setCustomControl
hoặcSupportNavigationFragment.setCustomControl
với CustomControlPosition dưới dạng xả_gtag.Ví dụ bên dưới sẽ tạo một mảnh và thêm một thành phần đ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á tiêu đề phụ
Để xoá tiêu đề phụ và quay lại nội dung mặc định, hãy sử dụng phương thức setCustomControl
.
Hãy đặt thành phần hiển thị đó thành null
để xoá thành phần hiển thị đó.
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 chế độ điều khiển tuỳ chỉnh được căn chỉnh theo cạnh dưới của thành phần hiển thị điều hướng. Khi ứng dụng của bạn thêm thành phần điều khiển tuỳ chỉnh, nút căn giữa và biểu trưng Google sẽ di chuyển lên để phù hợp với nút điều khiển đó.
- Tạo Chế độ xem Android bằng thành phần giao diện người dùng hoặc nhóm chế độ xem mà bạn muốn thêm.
- Tạo thành phần hiển thị hoặc mảnh điều hướng.
- Gọi phương thức
setCustomControl
trên thành phần hiển thị hoặc mảnh điều hướng, đồng thời chỉ định thành phần điều khiển và vị trí cần 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 vị trí của thành phần điều khiển mà bạn muốn xoá.
Đặt 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 quá trình chỉ đường tương tự như các phụ kiện có trong ứng dụng Google Maps dành cho Android. Bạn có thể điều chỉnh chế độ hiển thị hoặc giao diện trực quan 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ẽ phản ánh trong chuyến đi tiếp theo của người lái xe.
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ã
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 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ính | Thuộc tính |
---|---|
Màu nền |
|
Phần tử văn bản cho hướng dẫn |
|
Phần tử văn bản cho các bước tiếp theo |
|
Biểu tượng thao tác |
|
Hướng dẫn làn đường |
|
Ví dụ sau đây cho thấy cách đặt các tuỳ chọn định 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 đồ. 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 xuất hiện trên toàn bộ bản đồ. Tuy nhiên, nó 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 lái có thể bật chế độ hiển thị đèn giao thông hoặc biểu tượng biển báo dừng dọc theo tuyến đường, cung cấp ngữ cảnh tốt 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 sẽ 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. Hãy truy cập 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 của mình, miễn là văn bản này không bao gồm thuộc tính của Google. 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. 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ể 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 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 NavigationView.setForceNightMode()
hoặc SupportNavigationFragment.setForceNightMode()
để bật/tắt chế độ ban đêm hoặc để SDK điều hướng cho Android điều khiển 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.
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();
}
Đ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ề 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
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 tính năng chỉ đường bắt đầu. Khi được bật, xe 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 lái xe.
API này mang lại cho người lái xe khả năng dự đoán nhanh mọi vấn đề sắp tới (chẳng hạn như vấn đề về lưu lượng truy cập) mà không cần phóng to. Sau đó, họ có thể định tuyến lại chuyến đi nếu cần. Nếu người lái xe định tuyến lại chuyến đi, thanh tiến trình sẽ đặt lại như thể 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 đâ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 lái xe 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()
trên NavigationView hoặc SupportNavigationFragment.
Ví dụ:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);