Yer ayrıntıları bileşeni

Places UI Kit'in Yer Ayrıntıları bileşeni, uygulamanızda yer ayrıntılarını gösteren bağımsız bir kullanıcı arayüzü bileşeni eklemenize olanak tanır. Bu bileşen özelleştirilebilir.

Yer Ayrıntıları bileşeni bağımsız olarak veya diğer Google Haritalar Platformu API'leri ve hizmetleriyle birlikte kullanılabilir. Bileşen, Yer Kimliği, kaynak adı veya enlem/boylam koordinatlarını alır ve oluşturulmuş Yer Ayrıntıları bilgilerini döndürür.

Yer Ayrıntıları bileşeni tamamen temalandırılabilir. Böylece, kullanım alanınıza ve görsel marka kurallarınıza uygun olarak yazı tiplerini, renkleri ve köşe yarıçaplarını özelleştirebilirsiniz. Özel PlacesMaterialTheme değerleri sağlayarak yer ayrıntılarının görünümünü özelleştirebilirsiniz. Ayrıca, PlaceDetailsCompactView girişlerinden oluşan bir liste belirterek hangi yer ayrıntıları alanlarının dahil edileceğini özelleştirebilirsiniz. Bu girişlerin her biri, yer hakkında gösterilen bir bilgiye karşılık gelir.

Düzen varyantları

Yer Ayrıntıları bileşeni iki ana düzen varyantını destekler:

• Kompakt: Önemli bilgileri önizlemek için kullanılan düzen.
• Tam: Mevcut tüm yer ayrıntılarını gösteren kapsamlı düzen.

Kompakt düzen, dikey veya yatay yönde görüntülenebilir. Bu sayede bileşeni çeşitli tasarım düzenlerine ve ekran boyutlarına entegre edebilirsiniz. Tam düzen yalnızca dikey olarak görüntülenebilir.

Yer Ayrıntıları bileşeni, bileşende gösterilen içerik üzerinde ayrıntılı kontrol sahibi olmanızı sağlar. Her öğe (ör. fotoğraflar, yorumlar ve iletişim bilgileri) ayrı ayrı gösterilebilir veya gizlenebilir. Böylece bileşenlerin görünümü ve bilgi yoğunluğu hassas bir şekilde özelleştirilebilir.

Yer ayrıntıları kompakt görünümü

Yer ayrıntıları kompakt görünümü (PlaceDetailsCompactView), seçilen bir yerin ayrıntılarını minimum alan kullanarak gösterir. Bu, haritada bir yeri vurgulayan bilgi penceresinde, sohbette konum paylaşma gibi bir sosyal medya deneyiminde, mevcut konumunuzu seçme önerisi olarak veya Google Haritalar'daki yere referans vermek için bir medya makalesinde faydalı olabilir.

Yer ayrıntılarının tam görünümü

Yer ayrıntılarının tam görünümü (PlaceDetailsView), yer ayrıntıları bilgilerini göstermek için daha büyük bir alan sunar ve daha fazla bilgi türü göstermenize olanak tanır.

İçerik görüntüleme seçenekleri

PlaceDetailsCompactContent veya PlaceDetailsContent içindeki numaralandırmaları kullanarak hangi içeriğin gösterileceğini belirtebilirsiniz.

Faturalandırma

Yer Ayrıntıları Kullanıcı Arayüzü Araç Seti'ni kullanırken PlaceDetailsQuery yöntemi her çağrıldığında faturalandırılırsınız. Aynı yeri birden fazla kez yüklerseniz her istek için faturalandırılırsınız.

Uygulamanıza yer ayrıntıları ekleme

Yer Ayrıntıları bileşeni, Swift UI View'dur. Yer ayrıntıları bilgilerinin görünümünü ve tarzını ihtiyaçlarınıza ve uygulamanızın görünümüne uyacak şekilde özelleştirebilirsiniz. Özelleştirme hakkında daha fazla bilgi edinin.

Yer Ayrıntıları bileşenini bir yer kimliği, kaynak adı veya enlem/boylam koordinatlarıyla yüklemeyi seçebilirsiniz. İstediğiniz yöntemi veya yöntemleri seçebilirsiniz. PlaceDetailsQuery yapısındaki identifier değerini .placeID, .resourceName veya .coordinate olarak ayarlayın.

Kompakt görünümün varsayılan konumu dikey moddur. Yatay bir düzen istiyorsanız PlaceDetailsCompactView içinde orientation: .horizontal değerini belirtin. Dilerseniz netlik için orientation: .vertical de belirtebilirsiniz. Tam görünüm yalnızca dikey olarak görüntülenebilir.

Örnekleri Yer Ayrıntıları bileşeni örnekleri bölümünde bulabilirsiniz.

Görsel görünümü özelleştirme

Özel stil

Yer ayrıntıları bileşeninizin renklerini, tipografisini, aralığını, kenarlıklarını ve köşelerini özelleştirebilirsiniz.

Places UI kiti, görsel özelleştirme için kabaca Material Design'a (Google Haritalar'a özgü bazı değişikliklerle) dayalı bir tasarım sistemi yaklaşımı sunar. Renk ve Yazı Biçimi ile ilgili Materyal Tasarım referansına bakın. Varsayılan olarak, stil Google Haritalar'ın görsel tasarım diline uygundur.

Places UI Kit, varsayılan olarak koyu tema sunar. Bu nedenle, hem koyu hem de açık temaları özelleştirmeniz gerekebilir. Koyu temayı özelleştirmek için .dark ve attribution.darkModeColor değerlerini özel temanıza ekleyin.

Stil oluşturma hakkında daha fazla bilgi için Özel stil bölümüne bakın.

Genişlik ve yükseklik özelleştirme

Kompakt görünümler

Önerilen genişlikler:

• Dikey yön: 180 piksel ile 300 piksel arasında.
• Yatay yön: 180 piksel ile 500 piksel arasında.

En iyi uygulama, kompakt görünümler için yükseklik ayarlamamaktır. Bu sayede penceredeki içerik yüksekliği ayarlayabilir ve tüm bilgilerin gösterilmesini sağlayabilirsiniz.

160 pikselden küçük genişlikler doğru şekilde görüntülenmeyebilir.

Tam görüntüleme sayısı

Tam görünümler için önerilen genişlik 250 piksel ile 450 piksel arasındadır. 250 pikselden küçük bir genişlik doğru şekilde görüntülenmeyebilir.

Bileşenin yüksekliğini ayarlayabilirsiniz: Dikey yer ayrıntıları görünümü, ayrılan alan içinde dikey olarak kaydırılır.

En iyi uygulama, tam görünümler için bir yükseklik belirlemektir. Bu sayede penceredeki içerik düzgün şekilde kaydırılabilir.

Yer ayrıntıları bileşeni örnekleri

Dikey düzende tam görünüm oluşturma

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Yatay düzende kompakt görünüm oluşturma

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Dikey düzende tam görünüm oluşturma

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Stil özelliklerini özelleştirme

Bu örnekte, tam veya kompakt görünümün varsayılan stil özelliklerinin nasıl özelleştirileceği gösterilmektedir.

Places UI Kit, varsayılan olarak koyu tema sunar. Bu nedenle, hem koyu hem de açık temaları özelleştirmeniz gerekebilir. Koyu temayı özelleştirmek için özel temanıza .dark ve attribution.darkModeColor değerlerini ekleyin.

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Belirli içerikleri görüntüleme

Bu örnek, önceki örnekte oluşturulan temayı kullanarak yalnızca medya, adres, puan ve türü gösteren kompakt bir görünüm oluşturur.

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }