Dengan menggunakan Navigation SDK for iOS, Anda dapat memodifikasi pengalaman pengguna peta Anda dengan menentukan kontrol dan elemen UI bawaan mana yang akan muncul pada peta, dan gestur mana yang diizinkan. Anda juga dapat memodifikasi tampilan visual UI Navigasi. Lihat halaman Kebijakan untuk panduan tentang perubahan yang dapat diterima pada UI Navigasi.
Kontrol UI Peta
Navigation SDK menyediakan beberapa kontrol UI bawaan yang serupa dengan yang ada di aplikasi Google Maps untuk iOS. Anda dapat
mengganti visibilitas kontrol ini menggunakan class GMSUISettings
.
Perubahan yang Anda buat pada class ini akan langsung diterapkan pada peta.
Kompas
Navigation SDK menyediakan gambar kompas yang muncul di sudut kanan atas peta dalam keadaan tertentu dan hanya jika diaktifkan. Kompas hanya muncul saat kamera diorientasikan sedemikian rupa sehingga memiliki bearing selain utara yang tepat (bearing bukan nol). Saat pengguna mengklik kompas, kamera akan beranimasi kembali ke posisi dengan arah nol (orientasi default) dan kompas akan segera memudar.
Jika navigasi diaktifkan dan mode kamera disetel ke "mengikuti", kompas akan tetap terlihat dan mengetuk kompas untuk beralih di antara perspektif kamera yang dimiringkan dan ringkasan.
Kompas ini secara default dinonaktifkan. Anda dapat mengaktifkan kompas dengan menetapkan properti compassButton
dari GMSUISettings
ke true
. Namun, Anda tidak dapat memaksa kompas untuk selalu ditampilkan.
Swift
mapView.settings.compassButton = true
Objective-C
mapView.settings.compassButton = YES;
Tombol Lokasiku
Tombol Lokasiku akan muncul di sudut kanan bawah layar hanya
jika tombol Lokasiku diaktifkan. Saat pengguna mengklik tombol tersebut, kamera akan bergerak untuk fokus pada lokasi pengguna saat ini jika lokasi
pengguna saat ini diketahui. Anda dapat mengaktifkan tombol tersebut dengan menetapkan properti myLocationButton
dari GMSUISettings
ke true
.
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
Tombol pusatkan kembali
Jika navigasi diaktifkan, tombol pusatkan kembali muncul saat pengguna men-scroll
tampilan peta, dan menghilang jika pengguna mengetuk untuk memusatkan kembali peta. Untuk mengizinkan
tombol pusat muncul, tetapkan properti recenterButtonEnabled
dari
GMSUISettings
ke true
. Agar tombol pusatkan tidak muncul, setel
recenterButtonEnabled
ke false
.
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
Aksesori UI Peta
Navigation SDK menyediakan aksesori UI yang muncul selama navigasi, serupa dengan yang ada di aplikasi Google Maps untuk iOS. 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 pengguna berikutnya.
Header dan footer navigasi
Selama navigasi, header navigasi muncul di bagian atas layar dan footer navigasi akan muncul di bagian bawah. Header navigasi menampilkan nama jalan dan arah untuk belokan berikutnya pada rute, serta arah belokan berikutnya. Footer navigasi menampilkan perkiraan waktu dan jarak ke tujuan, serta perkiraan waktu tiba.
Anda dapat mengalihkan visibilitas header dan footer navigasi serta menetapkan warnanya secara terprogram menggunakan properti berikut:
navigationHeaderEnabled
— mengontrol apakah header navigasi terlihat (default-nya adalahtrue
).navigationFooterEnabled
— mengontrol apakah footer navigasi terlihat (default-nya adalahtrue
).navigationHeaderPrimaryBackgroundColor
— menetapkan warna latar belakang utama untuk header navigasi.navigationHeaderSecondaryBackgroundColor
— menetapkan warna latar belakang sekunder untuk header navigasi.
Contoh kode berikut menunjukkan pengaktifan visibilitas header dan
footer, lalu menyetel navigationHeaderPrimaryBackgroundColor
ke biru, dan
navigationHeaderSecondaryBackgroundColor
ke merah.
Swift
mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red
Objective-C
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
Tampilan header aksesori navigasi
Anda dapat menyesuaikan aplikasi dengan mengganti tampilan header navigasi sekunder
dengan tampilan aksesori yang disesuaikan sendiri. Anda melakukannya dengan membuat tampilan yang
mengimplementasikan protokol GMSNavigationAccessoryView
. Protokol ini memerlukan satu metode yang diperlukan: -heightForAccessoryViewConstrainedToSize:onMapView:
. Anda akan diberi ukuran maksimum yang tersedia untuk tampilan pada mapView yang diberikan, dan Anda harus memberikan tinggi yang diperlukan tampilan.
Anda kemudian dapat meneruskan tampilan ini ke mapView dengan memanggil setHeaderAccessoryView:
. mapView akan menganimasikan semua tampilan saat ini, lalu menganimasikan dalam tampilan kustom Anda. Header navigasi harus terlihat agar tampilan kustom Anda dapat
ditampilkan.
Untuk menghapus tampilan aksesori header kustom, teruskan nil
ke
setHeaderAccessoryView:
.
Jika ukuran tampilan harus berubah kapan saja, Anda dapat memanggil
invalidateLayoutForAccessoryView:
, yang meneruskan tampilan yang perlu diubah
ukurannya.
Contoh
Contoh kode berikut menunjukkan tampilan kustom yang menerapkan
protokol GMSNavigationAccessoryView
. Tampilan kustom ini kemudian digunakan untuk menyetel
tampilan aksesori header navigasi kustom.
Swift
class MyCustomView: UIView, GMSNavigationAccessoryView {
…
func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
// viewHeight gets calculated as the height your view needs.
return viewHeight
}
…
}
let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)
// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)
// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)
Objective-C
@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end
@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
// viewHeight gets calculated as the height your view needs.
return viewHeight;
}
…
@end
MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];
// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];
// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];
Daftar Rute
Anda dapat memberikan petunjuk langkah demi langkah di aplikasi. Contoh berikut menunjukkan satu cara yang mungkin untuk melakukannya. Langkah-langkah ini dapat bervariasi bergantung pada penerapan Anda sendiri.
- Mengaktifkan tombol titik entri setelah
setDestinations
padaGMSNavigator
(navigator) berhasil diselesaikan danguidanceActive
pada navigator telah diaktifkan. - Setelah pengguna mengetuk tombol titik entri, buat
GMSNavigationDirectionsListController
(pengontrol) dengan navigator yang terkait denganGMSMapView
(mapView
). - Tambahkan pengontrol ke instance
UIViewController
(pengontrol tampilan), dan tambahkandirectionsListView
sebagai subtampilan dari pengontrol tampilan. MetodereloadData
daninvalidateLayout
pada pengontrol harus dipanggil seperti halnya denganUICollectionView
. - Mendorong pengontrol tampilan ke hierarki pengontrol tampilan aplikasi.
Contoh kode berikut menunjukkan penambahan DirectionsListViewController
.
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Add the directionsListView to the host view controller's view.
let directionsListView = directionsListController.directionsListView
directionsListView.frame = self.view.frame
self.view.addSubview(directionsListView)
directionsListView.translatesAutoresizingMaskIntoConstraints = false
directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
...
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Ensure data is fresh when the view appears.
directionsListController.reloadData()
...
}
override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
super.willTransition(to: newCollection, with: coordinator)
// Invalidate the layout during rotation.
coordinator.animate(alongsideTransition: {_ in
self.directionsListController.invalidateLayout()
})
...
}
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Add the directionsListView to the host view controller's view.
UIView *directionsListView = _directionsListController.directionsListView;
directionsListView.frame = self.view.bounds;
[self.view addSubview:directionsListView];
directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
[directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
[directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
[directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
[directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
...
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Ensure data is fresh when the view appears.
[_directionsListController reloadData];
...
}
- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
^void(id <UIViewControllerTransitionCoordinatorContext>context) {
[_directionsListController invalidateLayout];
};
// Invalidate the layout during rotation.
[coordinator animateAlongsideTransition:animationBlock
completion:nil];
...
}
...
Status progres perjalanan
Status progres perjalanan adalah batang vertikal yang muncul di tepi kanan akhir peta saat navigasi dimulai. Jika diaktifkan, akan ditampilkan ringkasan untuk seluruh perjalanan, beserta tujuan pengguna dan posisi saat ini.
Pengguna dapat dengan cepat mengantisipasi masalah yang akan terjadi, seperti traffic, tanpa perlu memperbesarnya. 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:
Status traffic—status traffic mendatang.
Lokasi saat ini—lokasi pengemudi saat ini dalam perjalanan.
Rute berlalu—bagian yang telah berlalu dari perjalanan.
Aktifkan status progres perjalanan dengan menyetel properti navigationTripProgressBarEnabled
di GMSUISettings.
Swift
mapView.settings.isNavigationTripProgressBarEnabled = true
Objective-C
mapView.settings.navigationTripProgressBarEnabled = YES;
Lampu lalu lintas dan rambu berhenti
Anda dapat mengaktifkan lampu lalu lintas dan rambu berhenti di mapView
. Dengan
fitur ini, pengguna dapat mengaktifkan tampilan lampu lalu lintas atau ikon tanda perhentian
di sepanjang rute, 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 iOS. Untuk mengaktifkan
fitur ini, panggil setelan GMSMapView
untuk setiap opsi secara terpisah:
showsTrafficLights
dan showsStopSigns
.
Swift
mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true
Objective-C
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
Kontrol speedometer
Jika navigasi diaktifkan dan mode perjalanan disetel ke mengemudi, Navigation SDK for iOS akan menampilkan kontrol batas kecepatan di sudut bawah peta yang menunjukkan batas kecepatan saat ini. Saat pengemudi melebihi batas kecepatan, kontrol akan diperluas untuk menampilkan speedometer kedua dengan kecepatan pengemudi saat ini.
Anda dapat menyetel level notifikasi untuk mengubah format tampilan speedometer saat pengemudi melebihi batas kecepatan sebesar jumlah tertentu. Misalnya, Anda dapat menentukan bahwa kecepatan saat ini ditampilkan dengan warna teks merah saat pengemudi melebihi batas kecepatan sebesar 5 mil per jam, dan dengan warna latar belakang merah saat pengemudi melebihi batas kecepatan sebesar 10 mil per jam.
Untuk menampilkan kontrol batas kecepatan, tetapkan properti shouldDisplaySpeedometer
dari GMSUISettings
ke true
. Untuk menonaktifkan tampilan kontrol batas kecepatan, tetapkan
shouldDisplaySpeedometer
ke false
.
Swift
mapView.shouldDisplaySpeedometer = true
Objective-C
mapView.shouldDisplaySpeedometer = YES;
Untuk mengetahui informasi selengkapnya tentang cara menetapkan notifikasi untuk speedometer, lihat Mengonfigurasi notifikasi speedometer.
Penanda tujuan
Anda dapat menampilkan atau menyembunyikan penanda tujuan untuk rute tertentu dengan menetapkan properti showsDestinationMarkers
dari GMSUISettings
. Contoh berikut
menunjukkan penonaktifan penanda tujuan.
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
Fitur pengalaman peta
Navigation SDK memberi Anda kemampuan untuk membuat penyesuaian lebih lanjut pada pengalaman navigasi untuk pengguna Anda. Perubahan yang Anda buat pada instance akan dicerminkan selama update aplikasi berikutnya oleh pengguna.
Nonaktifkan gestur peta default
Anda dapat menonaktifkan gestur default pada peta dengan menetapkan properti class GMSUISettings
, yang tersedia sebagai properti GMSMapView
.
Isyarat berikut bisa diaktifkan dan dinonaktifkan secara programatis. Perhatikan bahwa
menonaktifkan gestur tidak akan membatasi akses terprogram ke setelan
kamera.
scrollGestures
— mengontrol apakah gestur scroll diaktifkan atau dinonaktifkan. Jika diaktifkan, pengguna bisa gesek jari untuk menggeser kamera.zoomGestures
— mengontrol apakah gestur zoom diaktifkan atau dinonaktifkan. Jika diaktifkan, pengguna dapat mengetuk dua kali, mengetuk dengan dua jari, atau mencubit untuk memperbesar/memperkecil kamera. Perhatikan bahwa mengetuk dua kali atau mencubit saatscrollGestures
diaktifkan dapat menggeser kamera ke titik yang ditentukan.tiltGestures
— mengontrol apakah gestur miring diaktifkan atau dinonaktifkan. Jika diaktifkan, pengguna dapat menggeser dua jari secara vertikal ke bawah atau ke atas untuk memiringkan kamera.rotateGestures
— mengontrol apakah gestur putar diaktifkan atau dinonaktifkan. Jika diaktifkan, pengguna dapat menggunakan gestur putar dua jari untuk memutar kamera.
Dalam contoh ini, gestur geser dan zoom telah dinonaktifkan.
Swift
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
Objective-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
Memosisikan kontrol dan elemen UI
Anda dapat memosisikan kontrol dan elemen UI lainnya yang terkait dengan posisi header dan footer navigasi, dengan menggunakan properti berikut:
navigationHeaderLayoutGuide
navigationFooterLayoutGuide
Contoh kode berikut menunjukkan penggunaan panduan tata letak untuk memosisikan sepasang label dalam tampilan peta:
Swift
/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true
/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true
Objective-C
/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;
/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;
Sembunyikan rute alternatif
Jika antarmuka pengguna menjadi penuh dengan terlalu banyak informasi, Anda dapat
mengurangi kekacauan dengan menampilkan rute alternatif yang lebih sedikit daripada rute default (dua), atau
dengan tidak menampilkan rute alternatif sama sekali. Anda dapat mengonfigurasi opsi ini sebelum
mengambil rute dengan mengonfigurasi GMSNavigationRoutingOptions
, dan menetapkan
alternateRoutesStrategy
dengan salah satu nilai enumerasi berikut:
Nilai Enumerasi | Deskripsi |
---|---|
GMSNavigationAlternativeRoutesStrategiSemua | Default. Menampilkan hingga dua rute alternatif. |
GMSNavigationAlternativeRoutesStrategiOne | Menampilkan satu rute alternatif (jika tersedia). |
GMSNavigationAlternateRoutesStrategyNone | Menyembunyikan rute alternatif. |
Contoh
Contoh kode berikut menunjukkan cara menyembunyikan rute alternatif sepenuhnya.
Swift
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
Objective-C
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];