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

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

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

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

העיצוב והסגנון של הרכיב מותאמים אישית באמצעות המבנים placesMaterialColor,‏ placesMaterialFont,‏ placesMaterialShape ו-placesMaterialTheme.

ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל.dark ולattribution.darkModeColor לעיצוב המותאם אישית.

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

מאפיין עיצוב	שימוש
צבע
`theme.color.surface`	רקע של קונטיינר ושל תיבת דו-שיח
`theme.color.outlineDecorative`	גבול המאגר
`theme.color.primary`	קישורים, אינדיקטור טעינה, סמלי סקירה כללית
`theme.color.onSurface`	כותרות, תוכן תיבת דו-שיח
`theme.color.onSurfaceVariant`	מידע על מקום
`theme.color.secondaryContainer`	רקע כפתור
`theme.color.onSecondaryContainer`	טקסט וסמל של כפתור
`theme.color.neutralContainer`	בדיקת תג התאריך, טעינה של צורות placeholder
`theme.color.onNeutralContainer`	תאריך הביקורת, שגיאה בטעינה
`theme.color.positiveContainer`	תג עמדת טעינה לרכב חשמלי (EV)
`theme.color.onPositiveContainer`	תוכן התג 'עמדת טעינה לרכב חשמלי (EV)'
`theme.color.positive`	התווית 'פתוח' במקום
`theme.color.negative`	התווית 'סגור' נוספה למקום
`theme.color.info`	סמל של כניסה נגישה
`theme.measurement.borderWidthButton`	לחצנים לפתיחה במפות ולאישור

טיפוגרפיה
`theme.font.bodySmall`	מידע על מקום
`theme.font.bodyMedium`	פרטי המקום, תוכן תיבת הדו-שיח
`theme.font.labelMedium`	תוכן התג
`theme.font.labelLarge`	תוכן הכפתור
`theme.font.headlineMedium`	כותרות של תיבות דו-שיח
`theme.font.displaySmall`	שם המקום
`theme.font.titleSmall`	שם המקום

ריווח
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

מדידה
`borderWidth`	מאגר
`theme.measurement.borderWidthButton`

צורה
`theme.shape.cornerRadius`	מאגר
`theme.shape.cornerRadiusButton`	לחצני 'פתיחה במפות' ו'אישור' (לא כולל לחצן סמל עגול)
`theme.shape.cornerRadiusThumbnail`	מיקום התמונה הממוזערת
`theme.shape.cornerRadiusCollageOuter`	קולאז' מדיה
`theme.shape.cornerRadiusCard`	כרטיס מקום, כרטיס ביקורת משתמש
`theme.shape.cornerRadiusDialog`	תיבת חשיפה במפות Google

שיוך מותג במפות Google
`attribution.lightModeColor`	לחצן שיוך וגילוי נאות של מפות Google בעיצוב בהיר (ערכי enum ללבן, אפור ושחור)
`attribution.darkModeColor`	כפתור שיוך וגילוי נאות במפות Google בעיצוב כהה (ערכי enum ללבן, אפור ושחור)

צבעי שיוך

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

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

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

עיצוב בהיר: attributionColorLight עם ספירות ללבן, אפור ושחור.
עיצוב כהה: attributionColorDark עם ספירות לצבעים לבן, אפור ושחור.

דוגמאות

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

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
}

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

צבעי שיוך

דוגמאות

Swift

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