הפלטפורמה: Android iOS JavaScript

עיצוב מותאם אישית

התאמה אישית של פרטי המקום
דוגמאות להתאמה אישית ויזואלית

אתם יכולים להתאים אישית את הצבעים, הטיפוגרפיה, המרווחים, הגבולות והפינות של הרכיבים הבאים בערכת ה-UI של Places:

ערכת ה-UI של Places מציעה גישה של מערכת עיצוב להתאמה אישית של רכיבים חזותיים, שמבוססת בערך על Material Design (עם כמה שינויים ספציפיים למפות Google). אפשר לעיין בהפניה של Material Design בנושא צבע וטיפוגרפיה. כברירת מחדל, הסגנון תואם לשפת העיצוב החזותי של מפות Google.

אפשרויות להתאמה אישית של פרטי מקום

כשמפעילים fragment, אפשר לציין עיצוב שמבטל את כל מאפייני הסגנון שמוגדרים כברירת מחדל. כל מאפייני העיצוב שלא מוגדרים מחדש משתמשים בסגנונות ברירת המחדל. 

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

אפשר להתאים אישית את הסגנונות הבאים:

מאפיין עיצוב שימוש
צבע
placesColorSurface רקע של קונטיינר ושל תיבת דו-שיח
placesColorOutlineDecorative גבול המאגר
placesColorPrimary קישורים, אינדיקטור טעינה, סמלי סקירה כללית
placesColorOnSurface כותרות, תוכן תיבת דו-שיח
placesColorOnSurfaceVariant מידע על מקום
placesColorSecondaryContainer רקע כפתור
placesColorOnSecondaryContainer טקסט וסמל של כפתור
placesColorNeutralContainer בדיקת תג התאריך, טעינה של צורות placeholder
placesColorOnNeutralContainer תאריך הביקורת, שגיאה בטעינה
placesColorPositiveContainer תג עמדת טעינה לרכב חשמלי (EV)
placesColorOnPositiveContainer תוכן התג 'עמדת טעינה לרכב חשמלי (EV)'
placesColorPositive התווית 'פתוח' במקום
placesColorNegative התווית 'סגור' נוספה למקום
placesColorInfo סמל של כניסה נגישה
placesColorButtonBorder לחצנים לפתיחה במפות ולאישור
   
טיפוגרפיה
placesTextAppearanceBodySmall מידע על מקום
placesTextAppearanceBodyMedium פרטי המקום, תוכן תיבת הדו-שיח
placesTextAppearanceLabelMedium תוכן התג
placesTextAppearanceLabelLarge תוכן הכפתור
placesTextAppearanceHeadlineMedium כותרות של תיבות דו-שיח
placesTextAppearanceDisplaySmall שם המקום
placesTextAppearanceTitleSmall שם המקום
   
ריווח
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
מדידה
placesBorderWidth מאגר
placesBorderWidthButton
   
צורה
placesCornerRadius מאגר
placesCornerRadiusButton לחצני 'פתיחה במפות' ו'אישור' (לא כולל לחצן סמל עגול)
placesCornerRadiusThumbnail מיקום התמונה הממוזערת
placesCornerRadiusCollageOuter קולאז' מדיה
placesCornerRadiusCard כרטיס מקום, כרטיס ביקורת משתמש
placesCornerRadiusDialog תיבת חשיפה במפות Google
   
שיוך מותג במפות Google
placesColorAttributionLightTheme לחצן שיוך וגילוי נאות של מפות Google בעיצוב בהיר (ערכי enum ללבן, אפור ושחור)
placesColorAttributionDarkTheme כפתור שיוך וגילוי נאות במפות Google בעיצוב כהה (ערכי enum ללבן, אפור ושחור)

צבעי שיוך

ייחוס למקורות תנועה
שיוך (Attribution)

התנאים וההגבלות של מפות Google מחייבים שימוש באחד משלושת צבעי המותג לציון השיוך למפות Google. השיוך הזה צריך להיות גלוי ונגיש כשמבצעים שינויים בהתאמה האישית.

אנחנו מציעים 3 צבעי מותג לבחירה, שאפשר להגדיר אותם בנפרד לעיצובים בהירים וכהים:

  • עיצוב בהיר: placesColorAttributionLight עם ערכי enum ללבן, אפור ושחור.
  • עיצוב כהה: placesColorAttributionDark עם ערכי enum ללבן, אפור ושחור.

דוגמאות

בדוגמת הקוד הזו אפשר לראות איך יוצרים ערכת נושא שמבטלת את מאפייני הסגנון שמוגדרים כברירת מחדל. כל מאפייני העיצוב שלא מוגדרים מחדש משתמשים בסגנונות ברירת המחדל. 
  <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>

דוגמאות מלאות לכל רכיב