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

iOS için Gezinme SDK'sını kullanarak, yerleşik kullanıcı arayüzü kontrollerinden ve öğelerinden hangilerinin haritada gösterileceğini ve hangi hareketlere izin vereceğinizi belirleyerek haritanızdaki kullanıcı deneyimini değiştirebilirsiniz. Navigasyon kullanıcı arayüzünün görsel görünümünü de değiştirebilirsiniz. Gezinme kullanıcı arayüzünde kabul edilen değişikliklerle ilgili kurallar için Politikalar sayfasına bakın.

Harita kullanıcı arayüzü kontrolleri

Navigasyon SDK'sı, iOS için Google Haritalar uygulamasında bulunanlara benzer bazı yerleşik kullanıcı arayüzü kontrolleri 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ı boşluk vererek kontrol düğmelerini kenarlardan uzaklaştırabilirsiniz.

Pusula

Navigasyon 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 kuzeyden başka bir yöne bakacak şekilde yönlendirildiğinde (sıfır olmayan bir yön) görünür. Kullanıcı pusulayı tıkladığında kamera, animasyonlu olarak sıfır yön açısına (varsayılan yön) geri döner ve pusulayı kısa süre sonra kaybolur.

Navigasyon etkinse ve kamera modu "takip" olarak ayarlanmışsa pusula görünür durumda kalır ve pusulaya dokunulduğunda kameranın eğik ve genel bakış perspektifleri arasında geçiş yapılır.

Pusula varsayılan olarak devre dışıdır. GMSUISettings mülkündeki compassButton özelliğini true olarak ayarlayarak pusulayı etkinleştirebilirsiniz. Ancak pusulanın her zaman gösterilmesini zorunlu kılamazsınız.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Konumum düğmesi

Konumum düğmesi, ekranın sağ alt köşesinde yalnızca Konumum düğmesi etkinleştirildiğinde görünür. Kullanıcı düğmeyi tıkladığında kamera, kullanıcının konumu biliniyorsa kullanıcının mevcut konumuna odaklanmak için hareket eder. GMSUISettings öğesinin myLocationButton özelliğini true olarak ayarlayarak düğmeyi etkinleştirebilirsiniz.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Ortala düğmesi

Gezinme etkinleştirildiğinde, kullanıcı harita görünümünü kaydırdığında yeniden merkezle düğmesi görünür ve kullanıcı haritayı yeniden merkezlemek için dokunduğunda kaybolur. Yeniden odaklama düğmesinin görünmesine izin vermek için GMSUISettings öğesinin recenterButtonEnabled özelliğini true olarak ayarlayın. Yeniden odaklama düğmesinin görünmesini engellemek için recenterButtonEnabled değerini false olarak ayarlayın.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Harita kullanıcı arayüzü aksesuarları

Navigasyon SDK'sı, iOS için Google Haritalar uygulamasında bulunanlara benzer şekilde navigasyon sırasında görünen 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, kullanıcının sonraki seyahatinde uygulanır.

Gezinme üstbilgisi ve altbilgisi

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

Aşağıdaki özellikleri kullanarak gezinme başlığı ve altbilginin görünürlüğünü değiştirebilir ve renklerini programatik olarak ayarlayabilirsiniz:

• navigationHeaderEnabled: Gezinme başlığının görünür olup olmadığını kontrol eder (varsayılan değer true).
• navigationFooterEnabled: Gezinme altbilgilerinin görünür olup olmadığını kontrol eder (varsayılan değer true).
• navigationHeaderPrimaryBackgroundColor: Gezinme başlığının birincil arka plan rengini ayarlar.
• navigationHeaderSecondaryBackgroundColor: Gezinme başlığının ikincil arka plan rengini ayarlar.

Aşağıdaki kod örneğinde, başlığın ve altbilginin görünürlüğünün etkinleştirilmesi, ardından navigationHeaderPrimaryBackgroundColor'ün mavi, navigationHeaderSecondaryBackgroundColor'un ise 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ı başlık 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 yapabilirsiniz. Bu protokolde bir zorunlu yöntem vardır: -heightForAccessoryViewConstrainedToSize:onMapView:. Belirtilen harita görünümünde görüntüleme için kullanılabilecek maksimum boyut size verilir ve görüntülemenizin gerektirdiği yüksekliği sağlamanız gerekir.

Ardından setHeaderAccessoryView: çağrısını yaparak bu görünümü mapView'a iletebilirsiniz. mapView, mevcut görünümleri animasyonlu olarak kapatır ve ardından özel görünümünüzü animasyonlu olarak açar. Özel görünümünüzün gösterilebilmesi için gezinme başlığı görünür olmalıdır.

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: öğesine iletin.

Görünümünüzün boyutunun herhangi bir zamanda değiştirilmesi gerekiyorsa boyutu değiştirilmesi gereken görünümü ileterek invalidateLayoutForAccessoryView: işlevini çağırabilirsiniz.

Örnek

Aşağıdaki kod örneğinde, GMSNavigationAccessoryView protokolünü uygulayan özel bir görünüm gösterilmektedir. Bu özel görünüm daha sonra özel bir 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 talimatlar sağlayabilirsiniz. Aşağıdaki örnekte, bunu yapmanın olası bir yolu gösterilmektedir. Bu adımlar, kendi uygulamanıza bağlı olarak değişiklik gösterebilir.

1. GMSNavigator (gezinme cihazı) üzerindeki setDestinations başarıyla tamamlandıktan ve gezgindeki guidanceActive etkinleştirildikten sonra bir giriş noktası düğmesini etkinleştirin.
2. Kullanıcı giriş noktası düğmesine dokunduğunda, GMSMapView (mapView) ile ilişkili gezgin içeren bir GMSNavigationDirectionsListController (denetleyici) oluşturun.
3. Denetleyiciyi bir UIViewController (görünüm denetleyicisi) örneğine ve directionsListView'u görünüm denetleyicisinin alt görünümüne ekleyin. Kumandadaki reloadData ve invalidateLayout yöntemleri, UICollectionView ile çağrıldığı gibi çağrılmalıdır.
4. Görüntüleme denetleyicisini uygulamanın görüntüleme denetleyicisi hiyerarşisine gönderin.

Notlar:

• Yönerge listesi yeniden kullanılmak üzere tasarlanmamıştır ve her navigasyon oturumu için yeniden oluşturulmalıdır.
• Denetleyici, gezginle ilgili yalnızca zayıf bir referans tutar.
• Tam bir örnek için Projenizi oluşturma bölümünde bahsedilen indirilen pakette bulunan demo uygulamaya bakın.

Aşağıdaki kod örneğinde DirectionsListViewController ekleme 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];
  ...
}

...

Seyahat ilerleme çubuğu

Gezi ilerleme çubuğu, navigasyon başladığında haritanın sağ arka kenarında görünen dikey bir çubuktur. Etkinleştirildiğinde, kullanıcının varış noktası ve mevcut konumu ile birlikte tüm seyahate genel bir bakış gösterir.

Bu sayede kullanıcılar, yakınlaştırmaya gerek kalmadan trafik gibi yaklaşan sorunları hızlıca tahmin edebilir. Gerekirse yolcular seyahat rotasını yeniden belirleyebilir. Kullanıcı seyahat rotasını değiştirirse ilerleme çubuğu, o noktadan yeni bir seyahat başlamış gibi sıfırlanır.

Gezi ilerleme çubuğunda aşağıdaki durum göstergeleri gösterilir:

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

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

• Rota süresi: Seyahatin geçen kısmı.

GMSUISettings'de navigationTripProgressBarEnabled mülkünü ayarlayarak seyahat ilerleme çubuğunu etkinleştirin.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Trafik ışıkları ve dur levhaları

Trafik ışıklarını ve dur işaretlerini mapView'te etkinleştirebilirsiniz. Bu özellik sayesinde kullanıcı, rotası boyunca trafik ışığı veya dur tabelası simgelerinin gösterilmesini etkinleştirerek daha verimli ve doğru seyahatler için daha iyi bir bağlam sağlayabilir.

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

Not: Trafik ışıkları ve dur levhaları yalnızca etkin navigasyon sırasında gösterilebilir.

Swift

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

Objective-C

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

Hız göstergesi kontrolü

Navigasyon etkinleştirildiğinde ve seyahat modu sürüş olarak ayarlandığında iOS için Navigasyon SDK'sı, haritanın alt köşesinde geçerli hız sınırını gösteren bir hız sınırı denetimi gösterir. Sürücü hız sınırını aştığında kontrol, sürücünün mevcut hızını gösteren ikinci bir hız göstergesi göstermek için genişler.

Sürücü hız sınırını belirtilen bir miktarda aştığında hız göstergesi 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/saat aştığında mevcut hızın kırmızı metin rengiyle, sürücü hız sınırını 10 mil/saat aştığında ise kırmızı arka plan rengiyle gösterilmesini belirtebilirsiniz.

Hız sınırı denetimini görüntülemek için GMSUISettings öğesinin shouldDisplaySpeedometer özelliğini true olarak ayarlayın. Hız sınırı denetiminin görüntülenmesini devre dışı bırakmak için shouldDisplaySpeedometer'ü false olarak ayarlayın.

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Hız göstergesi için uyarı ayarlama hakkında daha fazla bilgi edinmek isterseniz Hız göstergesi uyarılarını yapılandırma başlıklı makaleyi inceleyin.

Hedef işaretçileri

GMSUISettings özelliğini ayarlayarak belirli bir rotanın hedef işaretçilerini gösterebilir veya gizleyebilirsiniz.showsDestinationMarkers Aşağıdaki örnekte, hedef işaretçilerinin nasıl kapatılacağı 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 resimlerin metinle etiketlenmesini desteklemez. Daha fazla bilgi için İşaretçileri inceleyin.

Harita deneyimi özellikleri

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

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

GMSMapView sınıfının bir özelliği olarak kullanılabilen GMSUISettings sınıfının özelliklerini ayarlayarak haritadaki varsayılan hareketleri devre dışı bırakabilirsiniz. Aşağıdaki hareketler programatik olarak etkinleştirilebilir ve devre dışı bırakılabilir. Hareketin devre dışı bırakılmasının, kamera ayarlarına programatik erişimi sınırlamayacağını unutmayın.

• scrollGestures: Kaydırma hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu ayar etkinleştirilirse kullanıcılar kamerayı kaydırarak hareket ettirebilir.
• zoomGestures: Yakınlaştırma hareketlerinin etkinleştirilip etkinleştirilmeyeceğini kontrol eder. Bu ayar etkinleştirilirse kullanıcılar kamerayı yakınlaştırmak için iki kez dokunabilir, iki parmağınızla dokunabilir veya iki parmağınızla yakınlaştırabilir. scrollGestures etkinken iki kez dokunmanın veya sıkıştırmanın kamerayı belirtilen noktaya kaydırabileceğini unutmayın.
• tiltGestures: Eğilme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu özellik etkinleştirildiğinde kullanıcılar kamerayı eğmek için iki parmağınızla dikey olarak aşağı veya yukarı kaydırabilir.
• rotateGestures: Döndürme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu ayar etkinleştirilirse kullanıcılar kamerayı döndürmek için iki parmakla döndürme hareketini kullanabilir.

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 başlığı ve altbilginin konumuna göre yerleştirebilirsiniz:

• 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 nasıl kullanılacağı 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ı gizleme

Kullanıcı arayüzü çok fazla bilgiyle karmaşıklaştığında, varsayılan değerden (iki) daha az alternatif rota görüntüleyerek veya hiç alternatif rota görüntülemeyerek karmaşıklığı azaltabilirsiniz. GMSNavigationRoutingOptions yapılandırıp alternateRoutesStrategy değerini aşağıdaki listeleme değerlerinden biriyle ayarlayarak yolları getirmeden önce bu seçeneği yapılandırabilirsiniz:

Numaralandırma Değeri	Açıklama
GMSNavigationAlternateRoutesStrategyAll	Varsayılan. En fazla iki alternatif rota gösterilir.
GMSNavigationAlternateRoutesStrategyOne	Bir alternatif rota (varsa) gösterilir.
GMSNavigationAlternateRoutesStrategyNone	Alternatif rotaları gizler.

Örnek

Aşağıdaki kod örneğinde, alternatif rotaların nasıl tamamen 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. Her iki özelliği de aynı anda kullanmak beklenmedik davranışlara neden olabilir.