تخصيص الأنماط

تخصيص المظهر المرئي لتفاصيل المكان — أمثلة على التخصيص المرئي

يمكنك تخصيص الألوان وأسلوب الخط والمسافات والحدود والزوايا لمكوّنات Places UI kit التالية:

تقدّم حزمة واجهة مستخدم Places طريقة نظام تصميم للتخصيص المرئي استنادًا إلى Material Design (مع بعض التعديلات الخاصة بـ "خرائط Google"). يمكنك الاطّلاع على مرجع Material Design الخاص باللون وأسلوب الخط. يتوافق النمط تلقائيًا مع لغة التصميم المرئي في "خرائط Google".

يتم تخصيص شكل ومظهر المكوّن باستخدام البنيات placesMaterialColor وplacesMaterialFont وplacesMaterialShape وplacesMaterialTheme.

توفّر حزمة Places UI Kit مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا لـ .dark وattribution.darkModeColor إلى المظهر المخصّص.

يمكنك تخصيص الأنماط التالية:

سمة المظهر	الاستخدام
Color
`theme.color.surface`	خلفية الحاوية ومربّع الحوار
`theme.color.outlineDecorative`	حدود الحاوية
`theme.color.primary`	الروابط ومؤشر التحميل ورموز النظرة العامة
`theme.color.onSurface`	العناوين ومحتوى مربّعات الحوار
`theme.color.onSurfaceVariant`	معلومات عن المكان
`theme.color.secondaryContainer`	خلفية الزر
`theme.color.onSecondaryContainer`	نص الزر ورمزه
`theme.color.neutralContainer`	مراجعة شارة التاريخ وأشكال العناصر النائبة التي يتم تحميلها
`theme.color.onNeutralContainer`	تاريخ المراجعة، حدث خطأ أثناء التحميل
`theme.color.positiveContainer`	شارة محطة شحن المركبات الكهربائية المتاحة
`theme.color.onPositiveContainer`	محتوى شارة محطة شحن المركبات الكهربائية المتوفّرة
`theme.color.positive`	تصنيف "مفتوح" الآن
`theme.color.negative`	تمت إضافة التصنيف "مغلق" إلى المكان
`theme.color.info`	رمز المدخل المناسب للكراسي المتحركة
`theme.measurement.borderWidthButton`	زرّا "فتح في خرائط Google" و"حسنًا"

أسلوب الخط
`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`	الزرّان "فتح في خرائط Google" و"حسنًا" (لا يشمل زر الرمز الدائري)
`theme.shape.cornerRadiusThumbnail`	وضع الصورة المصغّرة
`theme.shape.cornerRadiusCollageOuter`	صورة مجمّعة للوسائط
`theme.shape.cornerRadiusCard`	بطاقة المكان، بطاقة مراجعة المستخدم
`theme.shape.cornerRadiusDialog`	مربّع حوار الإفصاح في "خرائط Google"

سمة العلامة التجارية على "خرائط Google"
`attribution.lightModeColor`	زر الإفصاح عن مصدر البيانات في "خرائط Google" والمظهر الفاتح (تعدادات للأبيض والرمادي والأسود)
`attribution.darkModeColor`	زر الإفصاح عن مصدر البيانات في "خرائط Google" عند استخدام المظهر الداكن (تعدادات للون الأبيض والرمادي والأسود)

ألوان تحديد المصدر

تتطلّب بنود خدمة "خرائط 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

أمثلة كاملة لكل مكوّن