یک ظاهر طراحی سفارشی

سفارشی سازی بصری جزئیات مکان — نمونه های سفارشی سازی بصری

می‌توانید رنگ‌ها، تایپوگرافی، فاصله، حاشیه‌ها و گوشه‌های این اجزای کیت UI Places را سفارشی کنید:

کیت UI Places یک رویکرد سیستم طراحی را برای سفارشی‌سازی بصری تقریباً بر اساس طراحی متریال (با برخی تغییرات خاص Google-Maps) ارائه می‌کند. به مرجع طراحی متریال برای رنگ و تایپوگرافی مراجعه کنید. به طور پیش فرض، این سبک به زبان طراحی بصری Google Maps پایبند است.

هنگام نمونه سازی یک قطعه، می توانید موضوعی را تعیین کنید که هر یک از ویژگی های سبک پیش فرض را لغو کند. هر ویژگی موضوعی که لغو نشده است از سبک های پیش فرض استفاده می کند.

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

مهم: Places UI Kit به طور پیش‌فرض یک تم تیره ارائه می‌کند، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای ایجاد یک تم تیره، یک ورودی برای رنگ ها در values-night/colors.xml اضافه کنید

می توانید سبک های زیر را سفارشی کنید:

ویژگی تم	استفاده
رنگ
`placesColorSurface`	پس زمینه ظرف و دیالوگ
`placesColorOutlineDecorative`	حاشیه کانتینر
`placesColorPrimary`	پیوندها، نشانگر بارگیری، نمادهای نمای کلی
`placesColorOnSurface`	سرفصل ها، محتوای گفتگو
`placesColorOnSurfaceVariant`	اطلاعات مکان
`placesColorSecondaryContainer`	پس زمینه دکمه
`placesColorOnSecondaryContainer`	متن و نماد دکمه
`placesColorNeutralContainer`	نشان تاریخ را مرور کنید، اشکال نگه‌دارنده را بارگیری کنید
`placesColorOnNeutralContainer`	تاریخ بازبینی، خطای بارگذاری
`placesColorPositiveContainer`	نشان شارژر EV موجود
`placesColorOnPositiveContainer`	محتوای نشان شارژر EV موجود است
`placesColorPositive`	اکنون برچسب "باز" را قرار دهید
`placesColorNegative`	اکنون برچسب "بسته" را قرار دهید
`placesColorInfo`	نماد ورودی قابل دسترسی
`placesColorButtonBorder`	باز کردن در نقشه ها و دکمه های OK

تایپوگرافی
`placesTextAppearanceBodySmall`	اطلاعات مکان
`placesTextAppearanceBodyMedium`	اطلاعات مکان، محتوای گفتگو
`placesTextAppearanceLabelMedium`	محتوای نشان
`placesTextAppearanceLabelLarge`	محتوای دکمه
`placesTextAppearanceHeadlineMedium`	سرفصل های گفتگو
`placesTextAppearanceDisplaySmall`	نام مکان
`placesTextAppearanceTitleSmall`	نام مکان

فاصله گذاری
`placesSpacingExtraSmall`
`placesSpacingSmall`
`placesSpacingMedium`
`placesSpacingLarge`
`placesSpacingExtraLarge`
`placesSpacingTwoExtraLarge`

اندازه گیری
`placesBorderWidth`	ظرف
`placesBorderWidthButton`

شکل
`placesCornerRadius`	ظرف
`placesCornerRadiusButton`	باز کردن در Maps و دکمه‌های تأیید (به استثنای دکمه نماد گرد)
`placesCornerRadiusThumbnail`	تصویر کوچک را قرار دهید
`placesCornerRadiusCollageOuter`	کلاژ رسانه ای
`placesCornerRadiusCard`	کارت مکان، کارت بررسی کاربر
`placesCornerRadiusDialog`	گفتگوی افشای Google Maps

نام تجاری نقشه های گوگل
`placesColorAttributionLightTheme`	دکمه انتساب و افشای طرح زمینه روشن Google Maps (فهرست برای سفید، خاکستری و سیاه)
`placesColorAttributionDarkTheme`	دکمه انتساب و افشای طرح زمینه تاریک Google Maps (فهرست برای سفید، خاکستری و سیاه)

رنگهای انتساب

شرایط خدمات Google Maps از شما می‌خواهد که از یکی از سه رنگ مارک برای انتساب Google Maps استفاده کنید. وقتی تغییرات سفارشی‌سازی انجام می‌شود، این انتساب باید قابل مشاهده و قابل دسترسی باشد.

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

یک ظاهر طراحی سفارشی

رنگهای انتساب

نمونه ها

مثال های کامل برای هر جزء