جزء جزئیات مکان
جزء Place Details در Places UI Kit به شما امکان می دهد یک مؤلفه UI جداگانه اضافه کنید که جزئیات مکان را در برنامه شما نمایش می دهد. این جزء قابل تنظیم است.
مولفه Place Details را می توان به طور مستقل یا همراه با سایر APIها و سرویس های پلتفرم Google Maps استفاده کرد. مؤلفه یا شناسه مکان ، نام منبع، یا مختصات طول و عرض جغرافیایی را می گیرد و اطلاعات جزئیات مکان ارائه شده را برمی گرداند.
مولفه Place Details کاملاً مضمون‌پذیر است و به شما این امکان را می‌دهد که فونت‌ها، رنگ‌ها و شعاع گوشه‌ها را مطابق با مورد استفاده و دستورالعمل‌های برند بصری خود سفارشی کنید. شما می توانید ظاهر جزئیات مکان را با ارائه مقادیر سفارشی PlacesMaterialTheme سفارشی کنید. همچنین می‌توانید با تعیین فهرستی از ورودی‌های PlaceDetailsCompactView ، که هر کدام مربوط به بخشی از اطلاعات نشان‌داده‌شده درباره مکان است، فیلدهای جزئیات مکان را سفارشی کنید.
انواع چیدمان
مولفه Place Details از دو نوع چیدمان اصلی پشتیبانی می کند:
- فشرده: طرحی برای پیش نمایش اطلاعات کلیدی.
- کامل: یک طرح جامع که تمام جزئیات مکان موجود را نمایش می دهد.
طرح فشرده می تواند در جهت عمودی یا افقی نمایش داده شود. این به شما امکان می دهد کامپوننت را در طرح بندی های مختلف طراحی و اندازه های صفحه ادغام کنید. طرح کامل فقط می تواند به صورت عمودی نمایش داده شود.
مؤلفه Place Details به شما کنترل دقیقی بر محتوای نمایش داده شده در مؤلفه می دهد. هر عنصر (مانند عکس‌ها، نظرات، و اطلاعات تماس) می‌تواند به‌صورت جداگانه نشان داده یا پنهان شود، که امکان سفارشی‌سازی دقیق ظاهر اجزا و چگالی اطلاعات را فراهم می‌کند.
نمای فشرده مکان جزئیات
نمای فشرده Place Details ( PlaceDetailsCompactView ) جزئیات یک مکان انتخابی را با استفاده از حداقل فضا ارائه می دهد. این ممکن است در یک پنجره اطلاعاتی که مکان را روی نقشه برجسته می‌کند، در یک تجربه رسانه‌های اجتماعی مانند اشتراک‌گذاری یک مکان در چت، به عنوان پیشنهادی برای انتخاب مکان فعلی‌تان، یا در یک مقاله رسانه‌ای برای ارجاع به مکان در Google Maps مفید باشد.
جزئیات مکان نمای کامل
نمای کامل جزئیات مکان ( PlaceDetailsView ) سطح بزرگتری را برای نمایش اطلاعات جزئیات مکان ارائه می دهد و به شما امکان می دهد انواع بیشتری از اطلاعات را نمایش دهید.
گزینه های نمایش محتوا
می‌توانید با استفاده از فهرست‌های موجود در PlaceDetailsCompactContent یا PlaceDetailsContent مشخص کنید که کدام محتوا نمایش داده شود.
| نمای فشرده | نمای کامل |
|---|---|
|
|
صورتحساب
هنگام استفاده از Place Details UI Kit، برای هر بار فراخوانی متد PlaceDetailsQuery صورتحساب دریافت می کنید. اگر یک مکان را چندین بار بارگیری کنید، برای هر درخواست صورتحساب دریافت می کنید.
جزئیات مکان را به برنامه خود اضافه کنید
جزء جزئیات مکان یک نمای رابط کاربری Swift است. می توانید ظاهر و احساس اطلاعات جزئیات مکان را مطابق با نیازهای خود و مطابقت با ظاهر برنامه خود سفارشی کنید. درباره سفارشی سازی بیشتر بیاموزید .
شما می توانید انتخاب کنید که جزء جزئیات مکان با شناسه مکان، نام منبع یا مختصات طول و عرض جغرافیایی بارگیری شود. شما می توانید هر روش یا چند روش را انتخاب کنید. identifier در ساختار PlaceDetailsQuery را به .placeID ، .resourceName یا .coordinate تنظیم کنید.
موقعیت پیش فرض برای نمای فشرده، عمودی است. اگر می خواهید یک طرح افقی داشته باشید، orientation: .horizontal در PlaceDetailsCompactView . شما همچنین می توانید به صورت اختیاری orientation: .vertical برای وضوح. نمای کامل فقط به صورت عمودی قابل نمایش است.
نمونه‌هایی را در بخش نمونه‌های جزء جزئیات مکان ببینید.
ظاهر بصری را سفارشی کنید
کیت 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 |
| نام تجاری نقشه های گوگل | |
attribution.lightModeColor | دکمه انتساب و افشای طرح زمینه روشن Google Maps (فهرست برای سفید، خاکستری و سیاه) |
attribution.darkModeColor | دکمه انتساب و افشای طرح زمینه تاریک Google Maps (فهرست برای سفید، خاکستری و سیاه) |
نمونه‌هایی را در بخش نمونه‌های جزء جزئیات مکان ببینید.
سفارشی سازی عرض و ارتفاع
نماهای فشرده
عرض های توصیه شده:
- جهت عمودی: بین 180 پیکسل تا 300 پیکسل.
- جهت افقی: بین 180 پیکسل تا 500 پیکسل.
بهترین روش این است که ارتفاعی را برای نماهای فشرده تنظیم نکنید. این به محتوای پنجره اجازه می دهد تا ارتفاع را تنظیم کند و اجازه می دهد تمام اطلاعات نمایش داده شوند.
عرض های کوچکتر از 160 پیکسل ممکن است به درستی نمایش داده نشوند.
نماهای کامل
برای نمایش کامل، عرض پیشنهادی بین 250 پیکسل تا 450 پیکسل است. عرض کوچکتر از 250 پیکسل ممکن است به درستی نمایش داده نشود.
می توانید ارتفاع مؤلفه را تنظیم کنید: نمای عمودی جزئیات مکان به صورت عمودی در فضای اختصاص داده شده حرکت می کند.
بهترین روش این است که ارتفاع را برای نمایش کامل تنظیم کنید. این به محتوای پنجره اجازه می دهد تا به درستی اسکرول شود.
رنگهای انتساب
شرایط خدمات Google Maps از شما می‌خواهد که از یکی از سه رنگ مارک برای انتساب Google Maps استفاده کنید. وقتی تغییرات سفارشی‌سازی انجام می‌شود، این انتساب باید قابل مشاهده و قابل دسترسی باشد.
ما 3 رنگ مارک را برای انتخاب ارائه می دهیم که می توانند به طور مستقل برای تم های روشن و تاریک تنظیم شوند:
- موضوع روشن:
attributionColorLightبا فهرست برای سفید، خاکستری و سیاه. - طرح زمینه تیره:
attributionColorDarkبا فهرست برای سفید، خاکستری و سیاه.
نمونه‌های جزء جزئیات مکان
یک نمای کامل با طرح بندی عمودی ایجاد کنید
سویفت
var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent // Query for loading the place details widget. @State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: PlacesMaterialTheme = PlacesMaterialTheme() var configuration: PlaceDetailsConfiguration { PlaceDetailsConfiguration( content: selectedType, theme: theme) } // Callback for the place details widget. let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in if let place = result.place { print("Place: \(place.description)") } else { print("Error: \(String(describing: result.error))") } } PlaceDetailsCompactView( orientation: .vertical, query: $query, configuration: configuration, placeDetailsCallback: placeDetailsCallback )
یک نمای فشرده با طرح افقی ایجاد کنید
سویفت
var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent // Query for loading the place details widget. @State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: PlacesMaterialTheme = PlacesMaterialTheme() var configuration: PlaceDetailsConfiguration { PlaceDetailsConfiguration( content: selectedType, theme: theme) } // Callback for the place details widget. let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in if let place = result.place { print("Place: \(place.description)") } else { print("Error: \(String(describing: result.error))") } } PlaceDetailsCompactView( orientation: .horizontal, query: $query, configuration: configuration, placeDetailsCallback: placeDetailsCallback )
یک نمای کامل با طرح بندی عمودی ایجاد کنید
سویفت
@State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: PlacesMaterialTheme = PlacesMaterialTheme() var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent var configuration: PlaceDetailsConfiguration { PlaceDetailsConfiguration( content: selectedType, theme: theme) } let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in placeIDPickerFocused = true if let place = result.place { print("Place: \(place.description)") } else { print("Error: \(String(describing: result.error))") } } GooglePlacesSwift.PlaceDetailsView( query: $query, configuration: configuration, placeDetailsCallback: placeDetailsCallback )
ویژگی های سبک را سفارشی کنید
این نمونه نحوه سفارشی کردن ویژگی های سبک پیش فرض یک نمای کامل یا فشرده را نشان می دهد.
سویفت
// 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 }
نمایش محتوای خاص
این نمونه یک نمای فشرده ایجاد می کند که فقط رسانه، آدرس، رتبه بندی و نوع را با استفاده از تم ایجاد شده در مثال قبلی نمایش می دهد.
سویفت
@State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var body: some View { PlaceDetailsCompactView( orientation: .vertical, query: $query, contentType: [.media(), .address(), .rating(), .type(), .price()], theme: theme, placeDetailsCallback: placeDetailsCallback, preferTruncation: false ) .frame(width: 350) }