Dengan Navigation SDK for Android, Anda dapat memodifikasi pengalaman pengguna dengan peta dengan menentukan kontrol dan elemen UI bawaan mana yang akan muncul pada peta. Anda juga dapat menyesuaikan tampilan visual UI navigasi. Lihat halaman Kebijakan untuk mendapatkan panduan tentang modifikasi yang dapat diterima pada UI navigasi.
Dokumen ini menjelaskan cara memodifikasi antarmuka pengguna peta Anda dengan dua cara:
Kontrol UI Peta
Kontrol UI peta berada di atas tampilan navigasi. Navigation SDK untuk Android akan otomatis mengubah posisi kontrol kustom Anda saat
tata letak bawaan berubah. Untuk setiap posisi tata letak, Anda dapat menetapkan satu kontrol
kustom. Kontrol kustom dapat berupa satu elemen UI atau, jika desain Anda memerlukan
lebih banyak elemen, Anda dapat menggunakan ViewGroup
dengan beberapa elemen UI.
Metode setCustomControl
menyediakan posisi seperti yang ditentukan dalam enum CustomControlPosition
:
SECONDARY_HEADER
(hanya muncul dalam mode potret)BOTTOM_START_BELOW
BOTTOM_END_BELOW
Gambar menampilkan contoh berbagai posisi kontrol UI yang menginformasikan lokasi penumpang kepada pengemudi.
Menambahkan header sekunder kustom
Secara default, tata letak layar dalam mode navigasi menyediakan posisi untuk header sekunder yang terletak di bawah header utama. Header sekunder ini muncul jika diperlukan, seperti dengan panduan jalur. Aplikasi Anda dapat menggunakan posisi header sekunder ini dari tata letak untuk konten kustom. Saat menggunakan fitur ini, kontrol Anda mencakup semua konten header sekunder default. Jika tampilan navigasi Anda memiliki latar belakang, latar belakang tersebut tetap berada di tempatnya, tertutup oleh header sekunder. Saat aplikasi Anda menghapus kontrol kustom, header sekunder default dapat muncul sebagai penggantinya.
Posisi header sekunder kustom menyejajarkan tepi atasnya dengan tepi bawah
header utama. Posisi ini hanya didukung dalam portrait mode
. Di
landscape mode
, header sekunder tidak tersedia, dan tata letak tidak
berubah.
- Buat Android View dengan elemen UI kustom atau ViewGroup.
- Inflate XML atau buat instance tampilan kustom untuk mendapatkan instance tampilan yang akan ditambahkan sebagai header sekunder.
Gunakan
NavigationView.setCustomControl
atauSupportNavigationFragment.setCustomControl
dengan CustomControlPosition sebagai SECONDARY_ Ada.Contoh di bawah membuat fragmen dan menambahkan kontrol kustom di posisi header sekunder.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER);
Menghapus header sekunder
Untuk menghapus header sekunder dan kembali ke konten default, gunakan
metode setCustomControl
.
Setel tampilan ke null
untuk menghapus tampilan.
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Menambahkan kontrol kustom ke bagian bawah tampilan navigasi
Aplikasi Anda dapat menentukan kontrol kustom yang sejajar dengan tepi bawah tampilan navigasi. Saat aplikasi Anda menambahkan kontrol kustom, tombol tengahkan kembali dan logo Google akan bergerak ke atas untuk mengakomodasinya.
- Buat Android View dengan elemen UI atau kelompok tampilan yang ingin Anda tambahkan.
- Buat fragmen atau tampilan navigasi.
- Panggil metode
setCustomControl
pada tampilan atau fragmen navigasi, dan tentukan kontrol serta posisi yang akan digunakan.
Contoh berikut menunjukkan View
kustom yang ditambahkan ke 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);
Menghapus kontrol kustom
Untuk menghapus kontrol kustom, gunakan metode setCustomControl
dan tentukan
posisi kontrol yang ingin dihapus.
Setel tampilan ke null
untuk posisi tersebut.
mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);
Aksesori UI peta
Navigation SDK untuk Android menyediakan aksesori UI yang muncul selama navigasi, mirip dengan yang ada di aplikasi Google Maps untuk Android. Anda dapat menyesuaikan visibilitas atau tampilan visual kontrol ini seperti yang dijelaskan di bagian ini. Perubahan yang Anda buat di sini akan tercermin selama perjalanan pengemudi berikutnya.
Lihat halaman Kebijakan untuk panduan tentang perubahan yang dapat diterima pada UI navigasi.
Melihat kode
Mengubah header navigasi
Gunakan SupportNavigationFragment.setStylingOptions()
atau
NavigationView.setStylingOptions()
untuk mengubah
tema header navigasi dan indikator belokan berikutnya yang muncul
di bawah header jika tersedia.
Anda dapat menetapkan atribut berikut:
Jenis Atribut | Atribut |
---|---|
Warna latar belakang |
|
Elemen teks untuk petunjuk |
|
Elemen teks untuk langkah berikutnya |
|
Ikon manuver |
|
Panduan jalur |
|
Contoh berikut menunjukkan cara menetapkan opsi gaya:
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));
Menonaktifkan lapisan lalu lintas
Gunakan GoogleMap.setTrafficEnabled()
untuk mengaktifkan atau menonaktifkan lapisan lalu lintas pada peta. Setelan ini memengaruhi
indikasi kepadatan lalu lintas yang ditampilkan di peta secara keseluruhan. Namun, hal ini tidak
memengaruhi indikasi traffic pada rute yang dipetakan oleh navigator.
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));
Aktifkan lampu lalu lintas dan rambu berhenti
Anda dapat mengaktifkan lampu lalu lintas dan rambu berhenti di UI peta. Dengan fitur ini, pengemudi dapat mengaktifkan tampilan lampu lalu lintas atau ikon rambu berhenti di sepanjang rute, sehingga memberikan konteks yang lebih baik untuk perjalanan yang lebih efisien dan akurat.
Secara default, lampu lalu lintas dan rambu berhenti dinonaktifkan di
Navigation SDK. Untuk mengaktifkan fitur ini, panggil DisplayOptions
untuk setiap fitur secara terpisah.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Menambahkan penanda kustom
Navigation SDK for Android kini menggunakan Google Maps API untuk penanda. Buka dokumentasi Maps API untuk mengetahui informasi selengkapnya.
Teks mengambang
Anda dapat menambahkan teks mengambang di mana saja dalam aplikasi, asalkan tidak mencakup atribusi Google. Navigation SDK tidak mendukung penambatan teks ke lintang/bujur pada peta atau label. Buka Jendela info untuk informasi selengkapnya.
Menampilkan batas kecepatan
Anda dapat menampilkan atau menyembunyikan ikon batas kecepatan secara terprogram.
Gunakan NavigationView.setSpeedLimitIconEnabled()
atau SupportNavigationFragment.setSpeedLimitIconEnabled()
untuk menampilkan atau menyembunyikan ikon batas kecepatan. Jika diaktifkan, ikon batas kecepatan
akan ditampilkan di pojok bawah selama panduan. Ikon menampilkan
batas kecepatan jalan yang dilalui kendaraan. Ikon ini
hanya muncul di lokasi tempat data batas kecepatan yang andal tersedia.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
Ikon batas kecepatan disembunyikan untuk sementara saat tombol pusatkan ditampilkan.
Menyetel mode malam
Anda dapat mengontrol perilaku mode malam secara terprogram.
Gunakan NavigationView.setForceNightMode()
atau SupportNavigationFragment.setForceNightMode()
untuk mengaktifkan atau menonaktifkan mode malam, atau biarkan Navigation SDK untuk Android
mengontrolnya.
AUTO
Memungkinkan Navigation SDK menentukan mode yang sesuai berdasarkan lokasi perangkat dan waktu lokal.FORCE_NIGHT
memaksa mode malam aktif.FORCE_DAY
memaksa mode harian aktif.
Contoh berikut menunjukkan memaksa mode malam untuk aktif dalam fragmen navigasi:
// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);
Menampilkan daftar rute
Pertama, buat tampilan dan tambahkan ke hierarki Anda.
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));
}
Pastikan untuk meneruskan peristiwa siklus proses ke DirectionsListView
seperti halnya
dengan NavigationView
. Contoh:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Menyembunyikan rute alternatif
Jika antarmuka pengguna dipenuhi dengan terlalu banyak informasi, Anda dapat
mengurangi kerumitan dengan menampilkan lebih sedikit rute alternatif daripada rute default (dua), atau
dengan tidak menampilkan rute alternatif sama sekali. Anda dapat mengonfigurasi opsi ini sebelum
mengambil rute dengan memanggil metode RoutingOptions.alternateRoutesStrategy()
dengan salah satu nilai enumerasi berikut:
Nilai Enumerasi | Deskripsi |
---|---|
AlternateRoutesStrategy.SHOW_ALL | Default. Menampilkan hingga dua rute alternatif. |
AlternateRoutesStrategy.SHOW_ONE | Menampilkan satu rute alternatif (jika ada). |
AlternateRoutesStrategy.SHOW_NONE | Menyembunyikan rute alternatif. |
Contoh kode berikut menunjukkan cara menyembunyikan rute alternatif sama sekali.
RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);
Status progres perjalanan
Status progres perjalanan adalah batang vertikal yang muncul di tepi kanan akhir peta saat navigasi dimulai. Jika diaktifkan, fitur ini akan menampilkan ringkasan untuk seluruh perjalanan, beserta tujuan pengemudi dan posisi saat ini.
Fitur ini memungkinkan pengemudi mengantisipasi masalah yang akan datang dengan cepat, seperti lalu lintas, tanpa perlu memperbesar. Mereka kemudian dapat mengubah rute perjalanan jika diperlukan. Jika pengemudi mengubah rute perjalanan, status progres akan direset seolah-olah perjalanan baru telah dimulai dari titik tersebut.
Status progres perjalanan menampilkan indikator status berikut:
Rute telah berlalu—bagian perjalanan yang telah berlalu.
Posisi saat ini—lokasi pengemudi saat ini dalam perjalanan.
Status traffic—status traffic mendatang.
Tujuan akhir—tujuan perjalanan terakhir.
Aktifkan status progres perjalanan dengan memanggil metode setTripProgressBarEnabled()
pada
NavigationView
atau SupportNavigationFragment.
Contoh:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);