Özel stil

Yer ayrıntıları görsel özelleştirme — Görsel özelleştirme örnekleri

Aşağıdaki Yerler kullanıcı arayüzü kiti bileşenlerinin 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.

Yer ayrıntılarını özelleştirme seçenekleri

Bileşenin görünümü ve tarzı placesMaterialColor, placesMaterialFont, placesMaterialShape ve placesMaterialTheme yapılarıyla özelleştirilir.

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.

Aşağıdaki stilleri özelleştirebilirsiniz:

Theme özelliği	Kullanım
Renk
`theme.color.surface`	Kapsayıcı ve iletişim kutusu arka planı
`theme.color.outlineDecorative`	Kapsayıcı kenarlığı
`theme.color.primary`	Bağlantılar, yükleme göstergesi, genel bakış simgeleri
`theme.color.onSurface`	Başlıklar, iletişim kutusu içeriği
`theme.color.onSurfaceVariant`	Yer bilgileri
`theme.color.secondaryContainer`	Düğme arka planı
`theme.color.onSecondaryContainer`	Düğme metni ve simgesi
`theme.color.neutralContainer`	Tarih rozetini ve yükleme yer tutucu şekillerini inceleme
`theme.color.onNeutralContainer`	İnceleme tarihi, yükleme hatası
`theme.color.positiveContainer`	EV şarj noktası rozeti
`theme.color.onPositiveContainer`	Mevcut EV şarj cihazı rozeti içeriği
`theme.color.positive`	"Şu anda açık" etiketini yerleştirme
`theme.color.negative`	Yerlere "Kapalı" etiketi ekleme
`theme.color.info`	Tekerlekli sandalyeye uygun giriş simgesi
`theme.measurement.borderWidthButton`	Haritalar'da aç ve Tamam düğmeleri

Tipografi
`theme.font.bodySmall`	Yer bilgileri
`theme.font.bodyMedium`	Yer bilgileri, iletişim kutusu içeriği
`theme.font.labelMedium`	Rozet içeriği
`theme.font.labelLarge`	Düğme içeriği
`theme.font.headlineMedium`	İletişim kutusu başlıkları
`theme.font.displaySmall`	Yer adı
`theme.font.titleSmall`	Yer adı

Aralık
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

Ölçüm
`borderWidth`	Kapsayıcı
`theme.measurement.borderWidthButton`

Şekil
`theme.shape.cornerRadius`	Kapsayıcı
`theme.shape.cornerRadiusButton`	Haritalar'da aç ve Tamam düğmeleri (yuvarlak simge düğmesi hariç)
`theme.shape.cornerRadiusThumbnail`	Yer küçük resmi
`theme.shape.cornerRadiusCollageOuter`	Medya kolajı
`theme.shape.cornerRadiusCard`	Yer kartı, kullanıcı yorumu kartı
`theme.shape.cornerRadiusDialog`	Google Haritalar açıklama iletişim kutusu

Google Haritalar'da Marka İlişkilendirmesi
`attribution.lightModeColor`	Açık tema Google Haritalar ilişkilendirme ve açıklama düğmesi (beyaz, gri ve siyah için numaralandırılmış değerler)
`attribution.darkModeColor`	Koyu tema Google Haritalar ilişkilendirme ve açıklama düğmesi (beyaz, gri ve siyah için numaralandırmalar)

İlişkilendirme renkleri

Google Haritalar Hizmet Şartları, Google Haritalar ilişkilendirmesi için üç marka renginden birini kullanmanızı zorunlu kılar. Özelleştirme değişiklikleri yapıldığında bu ilişkilendirme görünür ve erişilebilir olmalıdır.

Açık ve koyu temalar için bağımsız olarak ayarlanabilen 3 marka rengi seçeneği sunuyoruz:

Açık tema: Beyaz, gri ve siyah için numaralandırılmış değerler içeren attributionColorLight.
Koyu tema: attributionColorDark beyaz, gri ve siyah için numaralandırılmış değerlerle.

Örnekler

Bu işlev, varsayılan stil özelliklerini geçersiz kılan bir tema oluşturur. Geçersiz kılınmayan tüm tema özellikleri varsayılan stilleri kullanır.

Swift

  // 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
}

Özel stil

İlişkilendirme renkleri

Örnekler

Swift

Her bileşen için tam örnekler