Gezinme kullanıcı arayüzünü değiştirme

iOS için Gezinme SDK'sını kullanarak, haritada yerleşik kullanıcı arayüzü denetimleri ve öğelerinden hangilerinin görüneceğini ve hangi hareketlere izin vereceğinizi belirleyerek haritanızla kullanıcı deneyiminde değişiklik yapabilirsiniz. Ayrıca Gezinme Arayüzü'nün görsel görünümünü de değiştirebilirsiniz. Gezinme arayüzünde kabul edilen değişikliklerle ilgili yönergeler için Politikalar sayfasına bakın.

Harita kullanıcı arayüzü kontrolleri

Gezinme SDK'si, iOS için Google Haritalar uygulamasında bulunanlara benzer bazı yerleşik kullanıcı arayüzü denetimleri sağlar. GMSUISettings sınıfını kullanarak bu denetimlerin görünürlüğünü değiştirebilirsiniz. Bu sınıfta yaptığınız değişiklikler haritaya hemen yansıtılır.

Not: Her kontrolün, haritanın kenarına göre önceden belirlenmiş bir konumu vardır. Haritayı dolgu yaparak denetimleri kenarlardan uzağa taşıyabilirsiniz.

Pusula

Gezinme SDK'sı, belirli koşullar altında ve yalnızca etkinleştirildiğinde haritanın sağ üst köşesinde görünen bir pusula grafiği sağlar. Pusula yalnızca kamera tam kuzey yönünden farklı bir yöne (sıfır olmayan bir yön) sahip olacak şekilde yönlendirildiğinde görünür. Kullanıcı pusulayı tıkladığında, kamera sıfır yöne (varsayılan yön) geri döner ve pusula kısa bir süre sonra kaybolur.

Navigasyon etkinleştirilmişse ve kamera modu "sonraki" olarak ayarlanmışsa, pusula görünür durumda kalır ve pusulaya dokunarak yatık ve genel bakış kamera perspektifleri arasında geçiş yapar.

Pusula varsayılan olarak devre dışıdır. Pusulayı, GMSUISettings için compassButton özelliğini YES şeklinde ayarlayarak etkinleştirebilirsiniz. Ancak pusulayı her zaman gösterilmeye zorlayamazsınız.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Konumum düğmesi

Konumum düğmesi, yalnızca Konumum düğmesi etkin olduğunda ekranın sağ alt köşesinde görünür. Kullanıcı düğmeyi tıkladığında, kamera hareket ederek kullanıcının konumu biliniyorsa mevcut konumuna odaklanır. GMSUISettings öğesinin myLocationButton özelliğini YES değerine ayarlayarak düğmeyi etkinleştirebilirsiniz.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Yeniden ortalama düğmesi

Gezinme etkinleştirildiğinde, kullanıcı harita görünümünü kaydırdığında yeniden ortala düğmesi görünür ve kullanıcı haritayı yeniden ortalamak için dokunduğunda kaybolur. Yeniden ortalama düğmesinin görünmesine izin vermek için GMSUISettings öğesinin recenterButtonEnabled özelliğini YES olarak ayarlayın. Yeniden ortalama düğmesinin görünmesini önlemek için recenterButtonEnabled değerini NO olarak ayarlayın.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Harita kullanıcı arayüzü aksesuarları

Gezinme SDK'sı, navigasyon sırasında iOS için Google Haritalar uygulamasında bulunanlara benzer kullanıcı arayüzü aksesuarları sağlar. Bu kontrollerin görünürlüğünü veya görsel görünümünü bu bölümde açıklandığı şekilde ayarlayabilirsiniz. Burada yaptığınız değişiklikler sürücünün bir sonraki seyahatine yansıtılır.

Gezinme üstbilgisi ve altbilgisi

Gezinme sırasında, gezinme üstbilgisi ekranın üst kısmında, gezinme altbilgisi ise alt tarafta görünür. Gezinme başlığında, rotadaki bir sonraki dönüş için sokak adı ve yol tarifinin yanı sıra bir sonraki dönüşün yönü gösterilir. Navigasyon altbilgisinde, varış noktasına tahmini süre ve mesafenin yanı sıra tahmini varış saati gösterilir.

Aşağıdaki özellikleri kullanarak gezinme üst bilgisi ve alt bilgisinin görünürlüğünü değiştirebilir ve renklerini programatik olarak ayarlayabilirsiniz:

• navigationHeaderEnabled: Gezinme üst bilgisinin görünür olup olmayacağını kontrol eder (varsayılan ayar: true).
• navigationFooterEnabled - Gezinme altbilgisinin görünür olup olmayacağını kontrol eder (varsayılan değer: true).
• navigationHeaderPrimaryBackgroundColor — Gezinme başlığının birincil arka plan rengini belirler.
• navigationHeaderSecondaryBackgroundColor — Gezinme başlığının ikincil arka plan rengini belirler.

Aşağıdaki kod örneğinde üstbilgi ve altbilgi için görünürlüğün etkinleştirilmesi, ardından navigationHeaderPrimaryBackgroundColor öğesinin mavi, navigationHeaderSecondaryBackgroundColor öğesinin de kırmızı olarak ayarlanması gösterilmektedir.

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];

Gezinme aksesuarı üstbilgi görünümü

İkincil gezinme başlığı görünümünü kendi özelleştirilmiş aksesuar görünümünüzle değiştirerek uygulamanızı özelleştirebilirsiniz. Bunu, GMSNavigationAccessoryView protokolünü uygulayan bir görünüm oluşturarak yaparsınız. Bu protokolün zorunlu bir yöntemi vardır: -heightForAccessoryViewConstrainedToSize:onMapView:. Belirli bir harita Görünümü'nde görünümünüz için kullanılabilen maksimum boyut verilir ve görünümünüz için gereken yüksekliği sağlamanız gerekir.

Ardından, setHeaderAccessoryView: yöntemini çağırarak bu görünümü mapView'a geçirebilirsiniz. mapView, mevcut görünümlerin animasyonunu uygular ve ardından özel görünümünüze animasyon ekler. Özel görünümünüzün görüntülenebilmesi için gezinme başlığının görünür olması gerekir.

Not: Bazı akıllı telefonlarda harita görünümü yatay modda çok kısa olabilir ve özel görünümünüz gizlenir.

Özel başlık aksesuarı görünümünü kaldırmak için nil öğesini setHeaderAccessoryView: hedefine iletin

Görünümünüzün boyutunun herhangi bir anda değişmesi gerekiyorsa invalidateLayoutForAccessoryView: işlevini çağırarak boyutunun değiştirilmesi gereken görünümün geçişini yapabilirsiniz.

Örnek

Aşağıdaki kod örneği, GMSNavigationAccessoryView protokolünü uygulayan özel bir görünümü göstermektedir. Bu özel görünüm, daha sonra özel gezinme başlığı aksesuar görünümü ayarlamak için kullanılır.

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];

Yol Tarifi Listesi

Uygulamanızda adım adım yol tarifleri sağlayabilirsiniz. Aşağıdaki örnekte bunu yapmanın olası bir yolu gösterilmektedir. Bu adımlar, uygulamanıza bağlı olarak değişiklik gösterebilir.

1. GMSNavigator üzerindeki setDestinations öğesi (gezgin) başarıyla tamamlandıktan ve kılavuzda guidanceActive etkinleştirildikten sonra bir giriş noktası düğmesini etkinleştirin.
2. Kullanıcı giriş noktası düğmesine dokunduğunda, GMSMapView (mapView) ile ilişkilendirilmiş gezginle bir GMSNavigationDirectionsListController (denetleyici) oluşturun.
3. Denetleyiciyi bir UIViewController örneğine (görünüm denetleyicisi) ekleyin ve directionsListView öğesini görünüm denetleyicisinin alt görünümü olarak ekleyin. Denetleyicideki reloadData ve invalidateLayout yöntemleri, UICollectionView ile birlikte çağrılmalıdır.
4. Görünüm denetleyicisini, uygulamanın görünüm denetleyicisi hiyerarşisine aktarın.

Notlar:

• Yol tarifi listesi yeniden kullanılmak üzere tasarlanmamıştır ve her navigasyon oturumu için yeniden oluşturulmalıdır.
• Kumanda, gezgin için yalnızca zayıf bir referans bulundurur.
• Eksiksiz bir örnek için Projenizi oluşturma bölümünde bahsedilen indirilmiş pakette sunulan demo uygulamasına göz atın.

Aşağıdaki kod örneğinde DirectionsListViewController ekleme işlemi gösterilmektedir.

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

...

Gezi ilerleme çubuğu

Gezi ilerleme çubuğu, navigasyon başladığında haritanın sağ son kenarında görünen dikey bir çubuktur. Etkinleştirildiğinde, sürücünün varış yeri ve mevcut konumuyla birlikte seyahatin tamamına genel bir bakış sunar.

Sürücüler, trafik gibi yaklaşan sorunları yakınlaştırmalarına gerek kalmadan hızlı bir şekilde tahmin etmelerini sağlıyor. Gerekirse seyahatin rotasını yeniden çizebilirler. Sürücü yolculuğun rotasını yenilerse ilerleme çubuğu, ilgili noktadan yeni bir gezi başlamış gibi sıfırlanır.

Gezi ilerleme çubuğu aşağıdaki durum göstergelerini gösterir:

• Trafik durumu: Yaklaşan trafiğin durumu.

• Mevcut konum: Sürücünün yolculuktaki mevcut konumu.

• Geçen rota: Yolculuğun geçen kısmı.

GMSUISettings'de navigationTripProgressBarEnabled özelliğini ayarlayarak gezi ilerleme çubuğunu etkinleştirin.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Trafik ışıkları ve dur işaretleri

mapView üzerinden trafik ışıklarını ve dur işaretlerini etkinleştirebilirsiniz. Bu özellik sayesinde sürücü, rotası boyunca trafik ışıkları veya dur işareti simgelerinin gösterilmesini sağlayabilir. Böylece, daha verimli ve doğru seyahatler için daha iyi bağlam sağlanmış olur.

Varsayılan olarak, iOS için Navigasyon SDK'sında trafik ışıkları ve dur işaretleri devre dışıdır. Bu özelliği etkinleştirmek üzere her seçenek için GMSMapView ayarlarını ayrı ayrı çağırın: showsTrafficLights ve showsStopSigns.

Swift

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

Objective-C

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

Hız saati kontrolü

Gezinme etkinleştirildiğinde, iOS için Gezinme SDK'si haritanın alt köşesinde, geçerli hız sınırını gösteren bir hız sınırı kontrolü görüntüler. Sürücü hız sınırını aştığında, kontrol genişleyerek sürücünün geçerli hızıyla ikinci bir hız göstergesi görüntüler.

Sürücü, hız sınırını belirli bir miktarda aştığında, hız saati ekranının biçimlendirmesini değiştirmek için uyarı seviyeleri ayarlayabilirsiniz. Örneğin, sürücü hız sınırını 5 mil/sa. aştığında mevcut hızın kırmızı bir metin rengiyle, sürücünün hız sınırını 10 mil/sa. üzerine çıkardığında ise kırmızı bir arka plan rengiyle gösterileceğini belirtebilirsiniz.

Hız sınırı kontrolünü görüntülemek için GMSUISettings öğesinin shouldDisplaySpeedometer özelliğini YES olarak ayarlayın. Hız sınırı kontrolünün görüntülenmesini devre dışı bırakmak için shouldDisplaySpeedometer değerini NO olarak ayarlayın.

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Hız saatiyle ilgili uyarıları ayarlama hakkında daha fazla bilgi için Hız saati uyarılarını yapılandırma bölümüne bakın.

Hedef işaretçileri

GMSUISettings öğesinin showsDestinationMarkers özelliğini ayarlayarak belirli bir rotanın hedef işaretçilerini gösterebilir veya gizleyebilirsiniz. Aşağıdaki örnekte, hedef işaretçilerinin kapatılması gösterilmektedir.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Not: İşaretçi olarak özel bir resim belirtebilirsiniz ancak SDK şu anda bu görüntülerin metinle etiketlenmesini desteklememektedir. Daha fazla bilgi için İşaretçiler bölümünü inceleyin.

Harita deneyimi özellikleri

Gezinme SDK'sı, kullanıcılarınız için navigasyon deneyiminde daha fazla özelleştirme yapmanıza olanak tanır. Örneğinizde yaptığınız değişiklikler, uygulamanızın sürücünün bir sonraki güncellemesine yansıtılır.

Varsayılan harita hareketlerini devre dışı bırak

Haritada varsayılan hareketleri devre dışı bırakmak için GMSMapView öğesinin bir özelliği olarak kullanılabilen GMSUISettings sınıfının özelliklerini ayarlayabilirsiniz. Aşağıdaki hareketler programatik olarak etkinleştirilebilir ve devre dışı bırakılabilir. Hareketi devre dışı bırakmanın, kamera ayarlarına programatik erişimi sınırlamayacağını unutmayın.

• scrollGestures: Kaydırma hareketlerinin etkinleştirileceğini veya devre dışı bırakılacağını kontrol eder. Etkinleştirilirse kullanıcılar kamerayı kaydırmak için ekranı kaydırabilir.
• zoomGestures: Yakınlaştırma hareketlerinin etkinleştirileceğini veya devre dışı bırakılacağını kontrol eder. Etkinse kullanıcılar kamerayı yakınlaştırmak için iki kez dokunabilir, iki parmakla dokunabilir veya iki parmağını yakınlaştırabilir. scrollGestures etkinken iki kez dokunma veya sıkıştırma hareketinin kamerayı belirtilen noktaya kaydırabileceğini unutmayın.
• tiltGestures - Eğme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu özellik etkinleştirilirse kullanıcılar kamerayı eğmek için iki parmakla dikey olarak aşağı veya yukarı kaydırabilir.
• rotateGestures — Döndürme hareketlerinin etkinleştirilip etkinleştirilmediğini kontrol eder. Bu özellik etkinleştirilirse kullanıcılar iki parmakla döndürme hareketini kullanarak kamerayı döndürebilir.

Bu örnekte hem kaydırma hem de yakınlaştırma hareketleri devre dışı bırakılmıştır.

Swift

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

Objective-C

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

Konum kontrolleri ve kullanıcı arayüzü öğeleri

Aşağıdaki özellikleri kullanarak kontrolleri ve diğer kullanıcı arayüzü öğelerini gezinme üst bilgisi ve alt bilgisinin konumuna göre konumlandırabilirsiniz:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

Aşağıdaki kod örneğinde, harita görünümünde bir çift etiketi konumlandırmak için düzen kılavuzlarının kullanılması gösterilmektedir:

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;

Alternatif rotaları gizle

Kullanıcı arayüzü çok fazla bilgiyle karıştığında, varsayılandan (iki) daha az alternatif rota görüntüleyerek veya hiç alternatif rota göstermeyerek karmaşıklığı azaltabilirsiniz. Bu seçeneği, rotaları getirmeden önce GMSNavigationRoutingOptions yapılandırarak ve alternateRoutesStrategy için aşağıdaki numaralandırma değerlerinden biriyle ayarlayarak yapılandırabilirsiniz:

Sıralama Değeri	Açıklama
GMSGezinmeAlternatif RotalarStratejileri	Varsayılan. En fazla iki alternatif rota görüntülenir.
GMSGezinmeAlternatif RotalarStratejisiOne	Bir alternatif rota (varsa) görüntüler.
GMSNavigationAlternateRoutesStrategyNone	Alternatif rotaları gizler.

Örnek

Aşağıdaki kod örneğinde, alternatif rotaların tamamen nasıl gizleneceği gösterilmektedir.

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

Uyarı: Bu özellik şu anda en kısa rota yönlendirme tercihiyle uyumlu değildir. İki özelliğin de aynı anda kullanılması beklenmedik davranışlara yol açabilir.