Ö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

Bir parçayı örneklendirirken varsayılan stil özelliklerinden herhangi birini geçersiz kılan bir tema belirtebilirsiniz. Geçersiz kılınmayan tüm tema özellikleri varsayılan stilleri kullanır.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Önemli: Places UI Kit, varsayılan olarak koyu tema sunar. Bu nedenle, hem koyu hem de açık temaları özelleştirmeniz gerekebilir. Koyu tema oluşturmak için values-night/colors.xml bölümüne renklerle ilgili bir giriş ekleyin.

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

Tema özelliği	Kullanım
Renk
`placesColorSurface`	Kapsayıcı ve iletişim kutusu arka planı
`placesColorOutlineDecorative`	Kapsayıcı kenarlığı
`placesColorPrimary`	Bağlantılar, yükleme göstergesi, genel bakış simgeleri
`placesColorOnSurface`	Başlıklar, iletişim kutusu içeriği
`placesColorOnSurfaceVariant`	Yer bilgileri
`placesColorSecondaryContainer`	Düğme arka planı
`placesColorOnSecondaryContainer`	Düğme metni ve simgesi
`placesColorNeutralContainer`	Tarih rozetini ve yükleme yer tutucu şekillerini inceleme
`placesColorOnNeutralContainer`	İnceleme tarihi, yükleme hatası
`placesColorPositiveContainer`	EV şarj noktası rozeti
`placesColorOnPositiveContainer`	Mevcut EV şarj cihazı rozeti içeriği
`placesColorPositive`	"Şu anda açık" etiketini yerleştirme
`placesColorNegative`	Yerlere "Kapalı" etiketi ekleme
`placesColorInfo`	Tekerlekli sandalyeye uygun giriş simgesi
`placesColorButtonBorder`	Haritalar'da aç ve Tamam düğmeleri

Tipografi
`placesTextAppearanceBodySmall`	Yer bilgileri
`placesTextAppearanceBodyMedium`	Yer bilgileri, iletişim kutusu içeriği
`placesTextAppearanceLabelMedium`	Rozet içeriği
`placesTextAppearanceLabelLarge`	Düğme içeriği
`placesTextAppearanceHeadlineMedium`	İletişim kutusu başlıkları
`placesTextAppearanceDisplaySmall`	Yer adı
`placesTextAppearanceTitleSmall`	Yer adı

Aralık
`placesSpacingExtraSmall`
`placesSpacingSmall`
`placesSpacingMedium`
`placesSpacingLarge`
`placesSpacingExtraLarge`
`placesSpacingTwoExtraLarge`

Ölçüm
`placesBorderWidth`	Kapsayıcı
`placesBorderWidthButton`

Şekil
`placesCornerRadius`	Kapsayıcı
`placesCornerRadiusButton`	Haritalar'da aç ve Tamam düğmeleri (yuvarlak simge düğmesi hariç)
`placesCornerRadiusThumbnail`	Yer küçük resmi
`placesCornerRadiusCollageOuter`	Medya kolajı
`placesCornerRadiusCard`	Yer kartı, kullanıcı yorumu kartı
`placesCornerRadiusDialog`	Google Haritalar açıklama iletişim kutusu

Google Haritalar'da Marka İlişkilendirmesi
`placesColorAttributionLightTheme`	Açık tema Google Haritalar ilişkilendirme ve açıklama düğmesi (beyaz, gri ve siyah için numaralandırılmış değerler)
`placesColorAttributionDarkTheme`	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 enum değerleriyle placesColorAttributionLight.
Koyu tema: placesColorAttributionDark beyaz, gri ve siyah için enum değerleriyle.

Örnekler

Bu kod örneğinde, varsayılan stil özelliklerini geçersiz kılan bir temanın nasıl oluşturulacağı gösterilmektedir. Geçersiz kılınmayan tüm tema özellikleri varsayılan stilleri kullanır.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Özel stil

İlişkilendirme renkleri

Örnekler

Her bileşen için tam örnekler