Wybierz platformę: Android iOS JavaScript

Styl niestandardowy

Dostosowywanie wizualne szczegółowych informacji o miejscu
Przykłady dostosowywania wyglądu

Możesz dostosować kolory, typografię, odstępy, obramowania i rogi tych komponentów zestawu interfejsu Places:

Interfejs Places UI Kit oferuje podejście do wizualnego dostosowywania oparte na systemie projektowania, które jest w przybliżeniu oparte na Material Design (z pewnymi modyfikacjami specyficznymi dla Map Google). Więcej informacji znajdziesz w sekcjach Kolor i Typografia w dokumentacji Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Opcje dostosowywania szczegółowych informacji o miejscu

Podczas tworzenia instancji fragmentu możesz określić motyw, który zastąpi dowolne domyślne atrybuty stylu. Wszystkie atrybuty motywu, które nie zostały zastąpione, używają stylów domyślnych. 

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

Możesz dostosować te style:

Atrybut motywu Wykorzystanie
Kolor
placesColorSurface Tło kontenera i okna
placesColorOutlineDecorative Obramowanie kontenera
placesColorPrimary Linki, wskaźnik ładowania, ikony przeglądu
placesColorOnSurface Nagłówki, zawartość okien
placesColorOnSurfaceVariant Informacje o miejscu
placesColorSecondaryContainer Tło przycisku
placesColorOnSecondaryContainer Tekst i ikona przycisku
placesColorNeutralContainer Sprawdź plakietkę daty, wczytywanie kształtów zastępczych
placesColorOnNeutralContainer Data opinii, błąd wczytywania
placesColorPositiveContainer Dostępna ładowarka EV
placesColorOnPositiveContainer Treści związane z odznaką dostępnej ładowarki EV
placesColorPositive Etykieta „Otwarte”
placesColorNegative Etykieta „Zamknięte”
placesColorInfo Ikona wejścia dostępnego dla osób z niepełnosprawnościami
placesColorButtonBorder Przyciski Otwórz w Mapach i OK
   
Typografia
placesTextAppearanceBodySmall Informacje o miejscu
placesTextAppearanceBodyMedium Informacje o miejscu, zawartość okna
placesTextAppearanceLabelMedium Treść plakietki
placesTextAppearanceLabelLarge Treść przycisku
placesTextAppearanceHeadlineMedium Nagłówki okien
placesTextAppearanceDisplaySmall Nazwa miejsca
placesTextAppearanceTitleSmall Nazwa miejsca
   
Odstępy
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
Pomiary skuteczności
placesBorderWidth Kontener
placesBorderWidthButton
   
Kształt
placesCornerRadius Kontener
placesCornerRadiusButton Przyciski Otwórz w Mapach i OK (z wyjątkiem okrągłego przycisku ikony)
placesCornerRadiusThumbnail Miniatura miejsca
placesCornerRadiusCollageOuter Kolaż treści multimedialnych
placesCornerRadiusCard Karta miejsca, karta opinii użytkownika
placesCornerRadiusDialog Okno informacji w Mapach Google
   
Atrybucja marki w Mapach Google
placesColorAttributionLightTheme Przycisk atrybucji i ujawniania informacji w Mapach Google z jasnym motywem (wyliczenia dla koloru białego, szarego i czarnego)
placesColorAttributionDarkTheme Przycisk atrybucji i ujawniania informacji w Mapach Google w ciemnym motywie (wyliczenia dla koloru białego, szarego i czarnego)

Kolory atrybucji

Atrybucja
Atrybucja

Warunki korzystania z Map Google wymagają użycia jednego z 3 kolorów marki w przypadku atrybucji Map Google. Atrybucja musi być widoczna i dostępna po wprowadzeniu zmian w dostosowaniu.

Oferujemy 3 kolory marki do wyboru, które można ustawić niezależnie dla motywów jasnego i ciemnego:

  • Jasny motyw: placesColorAttributionLight z wartościami wyliczeniowymi dla białego, szarego i czarnego.
  • Tryb ciemny: placesColorAttributionDark z wartościami wyliczeniowymi dla kolorów białego, szarego i czarnego.

Przykłady

Ten przykładowy kod pokazuje, jak utworzyć motyw, który zastępuje domyślne atrybuty stylu. Wszystkie atrybuty motywu, które nie zostały zastąpione, używają stylów domyślnych. 
  <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>

Pełne przykłady każdego komponentu