یک ظاهر طراحی سفارشی
می‌توانید رنگ‌ها، تایپوگرافی، فاصله، حاشیه‌ها و گوشه‌های این اجزای کیت UI Places را سفارشی کنید:
کیت UI Places یک رویکرد سیستم طراحی را برای سفارشی‌سازی بصری تقریباً بر اساس طراحی متریال (با برخی تغییرات خاص Google-Maps) ارائه می‌کند. به مرجع طراحی متریال برای رنگ و تایپوگرافی مراجعه کنید. به طور پیش فرض، این سبک به زبان طراحی بصری Google Maps پایبند است.
ظاهر و احساس کامپوننت با ساختارهای placesMaterialColor ، placesMaterialFont ، placesMaterialShape و placesMaterialTheme سفارشی می شود.
شما می توانید سبک های زیر را سفارشی کنید:
| ویژگی تم | استفاده |
|---|---|
| رنگ | |
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 | نشان شارژر EV موجود |
theme.color.onPositiveContainer | محتوای نشان شارژر EV موجود است |
theme.color.positive | اکنون برچسب "باز" را قرار دهید |
theme.color.negative | اکنون برچسب "بسته" را قرار دهید |
theme.color.info | نماد ورودی قابل دسترسی |
theme.measurement.borderWidthButton | باز کردن در نقشه ها و دکمه های OK |
| تایپوگرافی | |
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 | باز کردن در Maps و دکمه‌های تأیید (به استثنای دکمه نماد گرد) |
theme.shape.cornerRadiusThumbnail | تصویر کوچک را قرار دهید |
theme.shape.cornerRadiusCollageOuter | کلاژ رسانه ای |
theme.shape.cornerRadiusCard | کارت مکان، کارت بررسی کاربر |
theme.shape.cornerRadiusDialog | گفتگوی افشای Google Maps |
| اسناد نام تجاری Google Maps | |
attribution.lightModeColor | دکمه انتساب و افشای طرح زمینه روشن Google Maps (فهرست برای سفید، خاکستری و سیاه) |
attribution.darkModeColor | دکمه انتساب و افشای طرح زمینه تاریک Google Maps (فهرست برای سفید، خاکستری و سیاه) |
رنگهای انتساب
شرایط خدمات Google Maps از شما می‌خواهد که از یکی از سه رنگ مارک برای انتساب Google Maps استفاده کنید. وقتی تغییرات سفارشی‌سازی انجام می‌شود، این انتساب باید قابل مشاهده و قابل دسترسی باشد.
ما 3 رنگ مارک را برای انتخاب ارائه می دهیم که می توانند به طور مستقل برای تم های روشن و تاریک تنظیم شوند:
- موضوع روشن:
attributionColorLightبا فهرست برای سفید، خاکستری و سیاه. - طرح زمینه تیره:
attributionColorDarkبا فهرست برای سفید، خاکستری و سیاه.
نمونه ها
این تابع یک تم ایجاد می کند که ویژگی های سبک پیش فرض را لغو می کند. هر ویژگی موضوعی که لغو نشده است از سبک های پیش فرض استفاده می کند.سویفت
// 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 }