اختيار النظام الأساسي: Android iOS JavaScript

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

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

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

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

خيارات تخصيص تفاصيل الأماكن

عند إنشاء مثيل لجزء، يمكنك تحديد مظهر يلغي أيًّا من سمات النمط التلقائي. تستخدم أي سمات للمظهر لم يتم إلغاؤها الأنماط التلقائية. 

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

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

سمة المظهر الاستخدام
Color
placesColorSurface خلفية الحاوية ومربّع الحوار
placesColorOutlineDecorative حدود الحاوية
placesColorPrimary الروابط ومؤشر التحميل ورموز النظرة العامة
placesColorOnSurface العناوين ومحتوى مربّعات الحوار
placesColorOnSurfaceVariant معلومات عن المكان
placesColorSecondaryContainer خلفية الزر
placesColorOnSecondaryContainer نص الزر ورمزه
placesColorNeutralContainer مراجعة شارة التاريخ وأشكال العناصر النائبة التي يتم تحميلها
placesColorOnNeutralContainer تاريخ المراجعة، حدث خطأ أثناء التحميل
placesColorPositiveContainer شارة محطة شحن المركبات الكهربائية المتاحة
placesColorOnPositiveContainer محتوى شارة محطة شحن المركبات الكهربائية المتوفّرة
placesColorPositive تصنيف "مفتوح" الآن
placesColorNegative تمت إضافة التصنيف "مغلق" إلى المكان
placesColorInfo رمز المدخل المناسب للكراسي المتحركة
placesColorButtonBorder زرّا "فتح في خرائط Google" و"حسنًا"
   
أسلوب الخط
placesTextAppearanceBodySmall معلومات عن المكان
placesTextAppearanceBodyMedium معلومات المكان ومحتوى مربّع الحوار
placesTextAppearanceLabelMedium محتوى الشارة
placesTextAppearanceLabelLarge محتوى الزر
placesTextAppearanceHeadlineMedium عناوين مربّعات الحوار
placesTextAppearanceDisplaySmall اسم المكان
placesTextAppearanceTitleSmall اسم المكان
   
المسافة
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
القياس
placesBorderWidth الحاوية
placesBorderWidthButton
   
الشكل
placesCornerRadius الحاوية
placesCornerRadiusButton الزرّان "فتح في خرائط Google" و"حسنًا" (لا يشمل زر الرمز الدائري)
placesCornerRadiusThumbnail وضع الصورة المصغّرة
placesCornerRadiusCollageOuter صورة مجمّعة للوسائط
placesCornerRadiusCard بطاقة المكان، بطاقة مراجعة المستخدم
placesCornerRadiusDialog مربّع حوار الإفصاح في "خرائط Google"
   
سمة العلامة التجارية على "خرائط Google"
placesColorAttributionLightTheme زر الإفصاح عن مصدر البيانات في "خرائط Google" والمظهر الفاتح (تعدادات للأبيض والرمادي والأسود)
placesColorAttributionDarkTheme زر الإفصاح عن مصدر البيانات في "خرائط Google" عند استخدام المظهر الداكن (تعدادات للون الأبيض والرمادي والأسود)

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

إحالة
تحديد المصدر

تتطلّب بنود خدمة "خرائط Google" استخدام أحد الألوان الثلاثة للعلامة التجارية في بيان مصدر البيانات في "خرائط Google". يجب أن يكون هذا المصدر مرئيًا ويمكن الوصول إليه عند إجراء تغييرات على التخصيص.

نوفّر 3 ألوان للعلامة التجارية يمكن الاختيار من بينها ويمكن ضبطها بشكل مستقل للمظهرين الفاتح والداكن:

  • المظهر الفاتح: placesColorAttributionLight مع قيم التعداد للأبيض والرمادي والأسود
  • المظهر الداكن: placesColorAttributionDark مع قيم التعداد للأبيض والرمادي والأسود

أمثلة

يوضّح نموذج الرمز البرمجي هذا كيفية إنشاء مظهر يتجاوز سمات النمط التلقائي. تستخدم أي سمات للمظهر لم يتم إلغاؤها الأنماط التلقائية. 
  <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>

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