Dengan Navigation SDK for Android, Anda dapat mengubah pengalaman pengguna dengan peta dengan menentukan kontrol dan elemen UI bawaan mana yang muncul di peta. Anda juga dapat menyesuaikan tampilan visual UI navigasi. Lihat halaman Kebijakan untuk panduan tentang modifikasi yang dapat diterima pada UI navigasi.
Dokumen ini menjelaskan cara mengubah antarmuka pengguna peta dengan dua cara:
Kontrol UI Peta
Kontrol UI peta adalah cara yang direkomendasikan untuk menempatkan elemen UI kustom di tampilan navigasi guna memastikan posisi yang tepat. Saat tata letak bawaan berubah,
Navigation SDK untuk Android akan otomatis memosisikan ulang kontrol kustom Anda. Anda dapat menetapkan satu tampilan kontrol kustom sekaligus
untuk setiap posisi. Jika desain Anda memerlukan beberapa elemen UI, Anda dapat menempatkannya
di ViewGroup
dan meneruskannya ke metode setCustomControl
.
Metode
setCustomControl
memberikan posisi seperti yang ditentukan dalam enum
CustomControlPosition
:
SECONDARY_HEADER
(hanya muncul dalam mode potret)BOTTOM_START_BELOW
BOTTOM_END_BELOW
FOOTER
Menambahkan kontrol kustom
- Buat Android View dengan elemen UI kustom atau ViewGroup.
- Inflate XML atau buat instance tampilan kustom untuk mendapatkan instance tampilan.
Gunakan
NavigationView.setCustomControl
atauSupportNavigationFragment.setCustomControl
dengan posisi kontrol kustom yang dipilih dari enumCustomControlPosition
.Contoh di bawah ini membuat fragmen dan menambahkan kontrol kustom di posisi header sekunder.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER); ```
Menghapus kontrol kustom
Untuk menghapus kontrol kustom, panggil
metode setCustomControl
dengan parameter tampilan null
dan posisi kontrol kustom yang dipilih.
Misalnya, cuplikan berikut menghapus header sekunder kustom dan kembali ke konten default:
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Posisi kontrol kustom
Header sekunder
Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.SECONDARY_HEADER
ke setCustomControl
.
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 tata letak ini untuk konten kustom. Saat Anda menggunakan fitur ini, kontrol Anda mencakup semua konten header sekunder default. Jika tampilan navigasi Anda memiliki latar belakang, latar belakang tersebut akan tetap berada di tempatnya, yang ditutupi oleh header sekunder. Jika aplikasi Anda menghapus kontrol kustom, header sekunder default apa pun dapat muncul di tempatnya.
Posisi header sekunder kustom menyelaraskan tepi atasnya dengan tepi bawah
header utama. Posisi ini hanya didukung di portrait mode
. Di
landscape mode
, header sekunder tidak tersedia, dan tata letak tidak
berubah.
Awal bawah
Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.BOTTOM_START_BELOW
ke setCustomControl
.
Posisi kontrol kustom ini berada di sudut awal bawah peta. Di portrait mode
dan landscape mode
, elemen ini berada di atas kartu Perkiraan Waktu Tiba dan/atau footer kustom (atau di sepanjang bagian bawah peta jika tidak ada), dan elemen Nav SDK termasuk tombol kembali ke tengah dan logo Google akan naik untuk memperhitungkan tinggi tampilan kontrol kustom. Kontrol ini diposisikan di dalam batas peta yang terlihat, sehingga padding yang ditambahkan ke tepi bawah atau awal peta juga akan mengubah posisi kontrol ini.
Ujung bawah
Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.BOTTOM_END_BELOW
ke setCustomControl
.
Posisi kontrol kustom ini berada di sudut ujung bawah peta. Di portrait mode
, kolom ini berada di atas kartu PWT dan/atau footer kustom (atau di sepanjang bagian bawah peta jika tidak ada), tetapi di landscape mode
, kolom ini sejajar dengan bagian bawah peta. Semua elemen Nav SDK yang terlihat di sepanjang sisi akhir (sisi kanan di LTR) akan bergerak ke atas untuk memperhitungkan tinggi tampilan kontrol kustom. Kontrol ini diposisikan di dalam batas peta yang terlihat, sehingga setiap padding yang ditambahkan ke tepi bawah atau akhir peta juga akan mengubah posisi kontrol ini.
Footer
Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.FOOTER
ke setCustomControl
.
Posisi kontrol kustom ini dirancang untuk tampilan footer kustom. Jika kartu PWT Nav SDK terlihat, kontrol ini akan berada di atasnya. Jika tidak, kontrol akan disejajarkan dengan bagian bawah peta. Tidak seperti kontrol kustom BOTTOM_START_BELOW
dan BOTTOM_END_BELOW
, kontrol ini diposisikan di luar batas peta yang terlihat, yang berarti bahwa padding apa pun yang ditambahkan ke peta tidak akan mengubah posisi kontrol ini.
Di portrait mode
, footer kustom memiliki lebar penuh. Kontrol kustom di posisi CustomControlPosition.BOTTOM_START_BELOW
dan CustomControlPosition.BOTTOM_END_BELOW
, serta elemen UI Nav SDK seperti tombol tengah ulang dan logo Google, diposisikan di atas footer kontrol kustom. Posisi default tanda V mempertimbangkan tinggi footer kustom.
Di landscape mode
, footer kustom memiliki lebar setengah dan sejajar dengan sisi awal (sisi kiri dalam LTR), seperti kartu ETA Nav SDK. Kontrol kustom di posisi CustomControlPosition.BOTTOM_START_BELOW
dan elemen UI Nav SDK seperti tombol tengah ulang dan logo Google diposisikan di atas footer kontrol kustom. Kontrol kustom di posisi CustomControlPosition.BOTTOM_END_BELOW
dan elemen UI Nav SDK di sepanjang sisi akhir (sisi kanan dalam LTR) tetap selaras dengan bagian bawah peta. Posisi default tanda V tidak berubah ketika footer kustom ada karena footer tidak diperluas ke sisi akhir peta.
Kontrol kustom di posisi CustomControlPosition.BOTTOM_START_BELOW
dan CustomControlPosition.BOTTOM_END_BELOW
, serta elemen UI Nav SDK seperti tombol kembali ke tengah dan logo Google diposisikan di atas footer kontrol kustom.
Aksesori UI peta
Navigation SDK for Android menyediakan aksesori UI yang muncul selama navigasi, mirip dengan yang ditemukan 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 diterapkan selama sesi navigasi berikutnya.
Lihat halaman Kebijakan untuk mengetahui panduan tentang modifikasi 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 traffic pada peta. Setelan ini memengaruhi
indikasi kepadatan lalu lintas yang ditampilkan di peta secara keseluruhan. Namun, hal ini tidak
memengaruhi indikasi lalu lintas di 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 tanda berhenti di sepanjang rute mereka, 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 di aplikasi, asalkan tidak menutupi atribusi Google. Navigation SDK tidak mendukung penambatan teks ke garis lintang/bujur pada peta, atau ke label. Buka Jendela info untuk mengetahui 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 sudut bawah selama panduan. Ikon tersebut 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 sementara saat tombol kembali ke tengah ditampilkan.
Menetapkan 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 for 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 siang aktif.
Contoh berikut menunjukkan pemaksaan mode malam agar 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 menjadi berantakan karena 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
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 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 status progres vertikal yang muncul di tepi kanan peta saat navigasi dimulai. Jika diaktifkan, fitur ini akan menampilkan ringkasan untuk seluruh perjalanan, beserta tujuan dan posisi pengguna saat ini.
Fitur ini memberi pengguna kemampuan untuk mengantisipasi masalah mendatang dengan cepat, seperti traffic, tanpa perlu memperbesar. Kemudian, mereka dapat mengubah rute perjalanan jika perlu. Jika pengguna mengubah rute perjalanan, status progres akan direset seolah-olah perjalanan baru 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()
di
NavigationView
atau
SupportNavigationFragment.
Contoh:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);