Dengan menggunakan Navigation SDK untuk Android, Anda dapat memodifikasi pengalaman pengguna dengan peta Anda dengan menentukan kontrol dan elemen UI bawaan mana yang muncul di peta. Anda juga dapat menyesuaikan tampilan visual UI navigasi. Rujuk ke halaman Kebijakan untuk 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. Tujuan
Navigation SDK untuk Android secara otomatis mengubah posisi kontrol kustom Anda
saat tata letak bawaan berubah. Untuk setiap posisi tata letak, Anda bisa mengatur
satu kontrol kustom. Kontrol kustom bisa berupa satu elemen UI, atau jika desain Anda
memerlukan lebih banyak, Anda dapat menggunakan ViewGroup
dengan beberapa elemen UI.
setCustomControl
metode
menyediakan posisi seperti yang ditetapkan dalam CustomControlPosition
enum:
SECONDARY_HEADER
(hanya muncul dalam mode potret)BOTTOM_START_BELOW
BOTTOM_END_BELOW
Misalnya, gambar di bawah ini menunjukkan contoh berbagai posisi kontrol UI yang menginformasikan pengemudi {i>rideshare<i} mengenai lokasi penumpang selama penjemputan.
Menambahkan header sekunder kustom
Secara default, tata letak layar dalam mode navigasi menyediakan posisi untuk elemen {i>header<i} yang terletak di bawah {i>header<i} utama. {i>Header<i} sekunder ini muncul saat yang diperlukan, misalnya dengan panduan jalur. Aplikasi Anda dapat menggunakan header sekunder ini posisi tata letak untuk konten khusus. Saat Anda menggunakan fitur ini, mencakup konten header sekunder default apa pun. Jika tampilan navigasi Anda memiliki latar belakang, latar belakang itu tetap berada di tempatnya, yang ditutupi oleh {i>header<i} sekunder. Jika aplikasi Anda menghapus kontrol kustom, header sekunder default apa pun dapat muncul sebagai penggantinya.
Posisi {i>header<i} sekunder khusus menyejajarkan tepi atas dengan tepi bawah
{i>header<i} utama. Posisi ini hanya didukung dalam bahasa portrait mode
. Di beberapa
landscape mode
, header sekunder tidak tersedia, dan tata letak tidak
berubah.
- Membuat Android View dengan elemen UI kustom atau ViewGroup.
- Meng-inflate XML atau membuat instance tampilan kustom untuk mendapatkan instance untuk ditambahkan sebagai header sekunder.
Gunakan
NavigationView.setCustomControl
atauSupportNavigationFragment.setCustomControl
dengan CustomControlPosition sebagai SECONDARY_header.Contoh di bawah ini membuat fragmen dan menambahkan kontrol khusus di bagian 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 disejajarkan dengan tepi bawah tampilan navigasi. Saat aplikasi Anda menambahkan kontrol khusus, tombol {i>re-center <i}dan logo Google bergerak ke atas untuk mengakomodasinya.
- Membuat Android View dengan elemen UI atau kelompok tampilan yang ingin ditambahkan.
- Buat fragmen atau tampilan navigasi.
- Panggil metode
setCustomControl
pada tampilan atau fragmen navigasi, dan menentukan kontrol dan 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 Anda hapus.
Tetapkan 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 yang serupa dengan yang ada di Google Maps untuk aplikasi Android. Anda dapat menyesuaikan visibilitas atau tampilan visual dari kontrol ini saat yang dijelaskan di bagian ini. Perubahan yang Anda buat di sini akan tercermin dalam sesi berikutnya sesi navigasi.
Lihat Kebijakan untuk panduan tentang yang dapat diterima pada UI navigasi.
Melihat kode
Mengubah header navigasi
Gunakan
SupportNavigationFragment.setStylingOptions()
atau
NavigationView.setStylingOptions()
untuk mengubah tema {i>header<i} 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 pada peta secara keseluruhan. Namun,
mempengaruhi indikasi lalu lintas 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));
Mengaktifkan lampu lalu lintas dan rambu berhenti
Anda dapat mengaktifkan lampu lalu lintas dan rambu berhenti di UI peta. Dengan fitur ini, pengguna dapat mengaktifkan tampilan lampu lalu lintas atau ikon rambu berhenti di sepanjang rute perjalanan, 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 independen.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Menambahkan penanda kustom
Navigation SDK for Android kini menggunakan Google Maps API untuk penanda. Buka halaman Dokumentasi Maps API untuk informasi selengkapnya.
Teks mengambang
Anda dapat menambahkan teks mengambang di mana saja dalam aplikasi, asalkan tidak menutupi bagian Atribusi Google. Navigation SDK tidak mendukung penambatan teks ke lintang/bujur pada peta, atau ke label. Buka Info windows untuk informasi selengkapnya tidak akurat atau tidak sesuai.
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
ditampilkan di pojok bawah selama panduan. Ikon menampilkan batas kecepatan
dari jalan yang dilewati kendaraan. Ikon hanya muncul di lokasi
jika tersedia data batas kecepatan yang andal.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
Ikon batas kecepatan disembunyikan untuk sementara jika tombol kembali ke posisi tengah ditampilkan.
Setel mode malam
Anda dapat mengontrol perilaku mode malam secara terprogram. Gunakan
NavigationView.setForceNightMode()
atau
SupportNavigationFragment.setForceNightMode()
mengaktifkan atau menonaktifkan mode malam, atau mengizinkan Navigation SDK for Android
mengontrolnya.
AUTO
Memungkinkan Navigation SDK menentukan mode yang sesuai berdasarkan lokasi perangkat dan waktu setempat.FORCE_NIGHT
memaksa mode malam aktif.FORCE_DAY
memaksa mode siang aktif.
Contoh berikut menunjukkan pemaksaan mode malam agar aktif dalam navigasi fragmen:
// 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 sebelumnya
dengan NavigationView
. Contoh:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Menyembunyikan rute alternatif
Ketika antarmuka pengguna menjadi berantakan dengan
terlalu banyak informasi, Anda dapat
mengurangi kekacauan dengan menampilkan lebih sedikit rute alternatif daripada rute default (dua), atau
dengan tidak menampilkan rute alternatif sama sekali. Anda dapat mengonfigurasi
opsi ini sebelum
ambil rute dengan memanggil 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 tersedia). |
AlternateRoutesStrategy.SHOW_NONE | Menyembunyikan rute alternatif. |
Contoh kode berikut menunjukkan cara menyembunyikan rute alternatif sepenuhnya.
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 pada peta saat navigasi dimulai. Jika diaktifkan, laporan ini akan menampilkan ringkasan untuk seluruh perjalanan, beserta tujuan pengguna dan posisi saat ini.
Pengguna dapat mengantisipasi masalah yang akan datang dengan cepat, seperti sebagai lalu lintas, tanpa perlu memperbesar. Mereka kemudian dapat mengubah rute perjalanan jika diperlukan. Jika pengguna mengubah rute perjalanan, status progres akan direset seolah-olah perjalanan telah dimulai dari titik tersebut.
Status progres perjalanan menampilkan indikator status berikut:
Rute berlalu—bagian yang telah berlalu dari perjalanan.
Posisi saat ini—lokasi pengguna saat ini dalam perjalanan.
Status traffic—status traffic mendatang.
Tujuan akhir—tujuan perjalanan akhir.
Aktifkan status progres perjalanan dengan memanggil metode setTripProgressBarEnabled()
aktif
NavigationView
atau
SupportNavigationFragment.
Contoh:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);