Mengubah UI navigasi

Dengan Navigation SDK for iOS, Anda dapat mengubah pengalaman pengguna dengan peta dengan menentukan kontrol dan elemen UI bawaan mana yang akan muncul di peta, dan gestur mana yang Anda izinkan. Anda juga dapat mengubah tampilan visual UI Navigasi. Lihat halaman Kebijakan untuk mengetahui panduan tentang modifikasi yang dapat diterima pada UI Navigasi.

Kontrol UI peta

Navigation SDK menyediakan beberapa kontrol UI bawaan yang mirip dengan yang ditemukan di aplikasi Google Maps untuk iOS. Anda dapat mengubah visibilitas kontrol ini menggunakan class GMSUISettings. Perubahan yang Anda buat pada class ini akan segera diterapkan pada peta.

Catatan: Setiap kontrol memiliki posisi sesuai dengan tepi peta, yang telah ditentukan sebelumnya. Anda dapat memindahkan kontrol menjauh dari tepi dengan padding peta.

Kompas

Navigation SDK menyediakan gambar kompas yang muncul di sudut kanan atas peta dalam keadaan tertentu dan hanya saat diaktifkan. Kompas hanya muncul saat kamera diorientasikan sedemikian rupa sehingga memiliki arah selain utara yang tepat (arah bukan nol). Saat pengguna mengklik kompas, kamera akan beranimasi kembali ke posisi dengan arah nol (orientasi default), lalu kompas menghilang beberapa saat setelahnya.

Jika navigasi diaktifkan dan mode kamera ditetapkan ke "mengikuti", kompas akan tetap terlihat dan mengetuk kompas akan beralih antara perspektif kamera miring 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 agar 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, kamera akan beranimasi untuk berfokus pada lokasi pengguna saat ini jika lokasi pengguna saat ini diketahui. Anda dapat mengaktifkan tombol dengan menetapkan properti myLocationButton dari GMSUISettings ke true.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Tombol pusatkan lagi

Saat navigasi diaktifkan, tombol pusatkan kembali akan muncul saat pengguna men-scroll tampilan peta, dan menghilang saat pengguna mengetuk untuk memusatkan kembali peta. Untuk mengizinkan tombol recenter muncul, tetapkan properti recenterButtonEnabled GMSUISettings ke true. Untuk mencegah tombol recenter muncul, tetapkan 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, mirip dengan yang ditemukan 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 diterapkan selama perjalanan berikutnya pengguna.

Header dan footer navigasi

Selama navigasi, header navigasi akan muncul di bagian atas layar dan footer navigasi akan muncul di bagian bawah. Header navigasi menampilkan nama jalan dan arah untuk belokan berikutnya di 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 (defaultnya adalah true).
• navigationFooterEnabled — mengontrol apakah footer navigasi terlihat (defaultnya adalah true).
• navigationHeaderPrimaryBackgroundColor — menetapkan warna latar belakang utama untuk header navigasi.
• navigationHeaderSecondaryBackgroundColor — menetapkan warna latar belakang sekunder untuk header navigasi.

Contoh kode berikut menunjukkan cara mengaktifkan visibilitas untuk header dan footer, lalu menetapkan 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 kustom Anda sendiri. Anda melakukannya dengan membuat tampilan yang menerapkan protokol GMSNavigationAccessoryView. Protokol ini memiliki satu metode yang diperlukan: -heightForAccessoryViewConstrainedToSize:onMapView:. Anda diberi ukuran maksimum yang tersedia untuk tampilan di mapView tertentu, dan Anda harus memberikan tinggi yang diperlukan tampilan.

Kemudian, Anda dapat meneruskan tampilan ini ke mapView dengan memanggil setHeaderAccessoryView:. mapView akan menganimasikan tampilan saat ini, lalu menganimasikan tampilan kustom Anda. Header navigasi harus terlihat agar tampilan kustom Anda dapat ditampilkan.

Catatan: mapView dapat terlalu pendek dalam mode lanskap di beberapa smartphone, dan tampilan kustom Anda akan disembunyikan.

Untuk menghapus tampilan aksesori header kustom, teruskan nil ke setHeaderAccessoryView:.

Jika tampilan harus mengubah ukuran kapan saja, Anda dapat memanggil invalidateLayoutForAccessoryView:, yang meneruskan tampilan yang perlu mengubah ukuran.

Contoh

Contoh kode berikut menunjukkan tampilan kustom yang mengimplementasikan protokol GMSNavigationAccessoryView. Tampilan kustom ini kemudian digunakan untuk menetapkan 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 salah satu kemungkinan cara melakukannya. Langkah-langkah ini dapat bervariasi bergantung pada penerapan Anda sendiri.

1. Aktifkan tombol titik entri setelah setDestinations di GMSNavigator (navigator) berhasil selesai dan guidanceActive di navigator telah diaktifkan.
2. Setelah pengguna mengetuk tombol titik entri, buat GMSNavigationDirectionsListController (pengontrol) dengan navigator yang terkait dengan GMSMapView (mapView).
3. Tambahkan pengontrol ke instance UIViewController (pengontrol tampilan), dan tambahkan directionsListView sebagai subtampilan pengontrol tampilan. Metode reloadData dan invalidateLayout di pengontrol harus dipanggil seperti yang dilakukan dengan UICollectionView.
4. Tekan pengontrol tampilan ke hierarki pengontrol tampilan aplikasi.

Catatan:

• Daftar rute tidak dimaksudkan untuk digunakan kembali, dan harus dibuat ulang untuk setiap sesi navigasi.
• Pengontrol hanya menyimpan referensi lemah ke navigator.
• Untuk contoh lengkap, lihat aplikasi demo yang disediakan dalam paket yang didownload yang disebutkan di bagian Menyiapkan project.

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 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 saat ini pengguna.

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:

• Status traffic—status traffic mendatang.

• Lokasi saat ini—lokasi pengemudi saat ini dalam perjalanan.

• Rute yang telah dilalui—bagian perjalanan yang telah dilalui.

Aktifkan status progres perjalanan dengan menetapkan 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 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 for iOS. Untuk mengaktifkan fitur ini, panggil setelan GMSMapView untuk setiap opsi secara terpisah: showsTrafficLights dan showsStopSigns.

Catatan: Lampu lalu lintas dan rambu berhenti hanya dapat ditampilkan selama navigasi aktif.

Swift

mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true

Objective-C

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

Kontrol spidometer

Saat navigasi diaktifkan dan mode perjalanan disetel ke mengemudi, Navigation SDK untuk iOS akan menampilkan kontrol batas kecepatan di sudut bawah peta yang menampilkan batas kecepatan saat ini. Saat pengemudi melebihi batas kecepatan, kontrol akan diperluas untuk menampilkan speedometer kedua dengan kecepatan pengemudi saat ini.

Anda dapat menetapkan tingkat pemberitahuan untuk mengubah format tampilan speedometer saat pengemudi melebihi batas kecepatan dengan jumlah yang ditentukan. Misalnya, Anda dapat menentukan bahwa kecepatan saat ini ditampilkan dengan warna teks merah saat pengemudi melebihi batas kecepatan sebesar 5 mph, dan dengan warna latar belakang merah saat pengemudi melebihi batas kecepatan sebesar 10 mph.

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 informasi selengkapnya tentang cara menyetel pemberitahuan untuk speedometer, lihat Mengonfigurasi pemberitahuan speedometer.

Penanda tujuan

Anda dapat menampilkan atau menyembunyikan penanda tujuan untuk rute tertentu dengan menetapkan properti showsDestinationMarkers dari GMSUISettings. Contoh berikut menunjukkan cara menonaktifkan penanda tujuan.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Catatan: Anda dapat menentukan gambar kustom sebagai penanda, tetapi SDK saat ini tidak mendukung pemberian label pada gambar ini dengan teks. Untuk mengetahui informasi selengkapnya, lihat Penanda.

Fitur pengalaman peta

Navigation SDK memberi Anda kemampuan untuk melakukan penyesuaian lebih lanjut pada pengalaman navigasi untuk pengguna. Perubahan yang Anda buat pada instance akan tercermin selama update aplikasi berikutnya oleh pengguna.

Menonaktifkan 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 saat scrollGestures diaktifkan dapat menggeser kamera ke titik yang ditentukan.
• tiltGestures — mengontrol apakah gestur kemiringan diaktifkan atau dinonaktifkan. Jika diaktifkan, pengguna dapat menggunakan geser dua jari vertikal ke bawah atau ke atas untuk memiringkan kamera.
• rotateGestures — mengontrol apakah gestur putar diaktifkan atau dinonaktifkan. Jika diaktifkan, pengguna dapat menggunakan gestur putar dengan dua jari untuk memutar kamera.

Dalam contoh ini, isyarat geser dan zoom telah dinonaktifkan.

Swift

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

Objective-C

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

Kontrol posisi dan elemen UI

Anda dapat memosisikan kontrol dan elemen UI lainnya secara relatif terhadap posisi header dan footer navigasi, dengan menggunakan properti berikut:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

Contoh kode berikut menunjukkan penggunaan panduan tata letak untuk memosisikan sepasang label di 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;

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 mengonfigurasi GMSNavigationRoutingOptions, dan menetapkan alternateRoutesStrategy dengan salah satu nilai enumerasi berikut:

Nilai Enumerasi	Deskripsi
GMSNavigationAlternateRoutesStrategyAll	Default. Menampilkan hingga dua rute alternatif.
GMSNavigationAlternateRoutesStrategyOne	Menampilkan satu rute alternatif (jika tersedia).
GMSNavigationAlternateRoutesStrategyNone	Menyembunyikan rute alternatif.

Contoh

Contoh kode berikut menunjukkan cara menyembunyikan rute alternatif secara keseluruhan.

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){...}];

Peringatan: Fitur ini saat ini tidak kompatibel dengan preferensi pemilihan rute jarak terdekat. Menggunakan kedua fitur secara bersamaan dapat menghasilkan perilaku yang tidak terduga.