Styl niestandardowy

Możesz dostosować kolory, typografię, odstępy, obramowania i rogi tych komponentów zestawu interfejsu Places UI Kit oraz funkcji niezwiązanych z tym zestawem:

• Komponent Informacje o miejscu
• Komponent Wyszukiwanie miejsc
• Podstawowy komponent Autouzupełnianie miejsc
• Widżet autouzupełniania miejsc w pakiecie Non-UI Kit

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.

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

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

• Przykład stylu komponentu Informacje o miejscu
• Przykład stylu komponentu Wyszukiwanie miejsc
• Przykład podstawowego stylu komponentu Autouzupełnianie miejsca