רכיב Place Details
רכיב Place Details של Places UI Kit מאפשר להוסיף רכיב UI נפרד שמציג פרטי מקום באפליקציה. אפשר להתאים אישית את הרכיב הזה.
אפשר להשתמש ברכיב Place Details באופן עצמאי או בשילוב עם ממשקי API ושירותים אחרים של Google Maps Platform. הרכיב מקבל מזהה מקום, שם משאב או קואורדינטות של קו רוחב וקו אורך, ומחזיר מידע מעובד של פרטי מקום.
רכיב פרטי המקום ניתן לעיצוב מלא, כך שאפשר להתאים אישית את הגופנים, הצבעים ורדיוס הפינות בהתאם לתרחיש השימוש ולהנחיות העיצוב החזותי של המותג. אפשר להתאים אישית את המראה של פרטי המקום על ידי ציון ערכים מותאמים אישית של PlacesMaterialTheme. אפשר גם להתאים אישית את השדות של פרטי המקום שייכללו בתגובה על ידי ציון רשימה של ערכים של PlaceDetailsCompactView, שכל אחד מהם תואם לפריט מידע שמוצג על המקום.
גרסאות שונות של פריסה
הרכיב Place Details תומך בשני סוגים עיקריים של פריסות:
- קומפקטית: פריסה לתצוגה מקדימה של מידע חשוב.
- מלא: פריסה מקיפה שבה מוצגים כל פרטי המקום הזמינים.
אפשר להציג את הפריסה הקומפקטית בכיוון אנכי או אופקי. כך תוכלו לשלב את הרכיב בפריסות עיצוב שונות ובמסכים בגדלים שונים. אפשר להציג את הפריסה המלאה רק בצורה אנכית.
רכיב Place Details מאפשר לכם שליטה מפורטת בתוכן שמוצג ברכיב. אפשר להציג או להסתיר כל רכיב בנפרד (כמו תמונות, ביקורות ופרטים ליצירת קשר), וכך להתאים במדויק את המראה של הרכיבים ואת צפיפות המידע.
תצוגה קומפקטית של פרטי המקום
תצוגה קומפקטית של פרטי מקום (PlaceDetailsCompactView) מציגה פרטים של מקום נבחר תוך שימוש בשטח מינימלי. המידע הזה יכול להיות שימושי בחלון מידע שמציג מקום במפה, בחוויית שימוש ברשתות חברתיות כמו שיתוף מיקום בצ'אט, כהצעה לבחירת המיקום הנוכחי או במאמר חדשותי כדי להפנות למקום במפות Google.
תצוגה מלאה של פרטי המקום
בתצוגה המלאה של פרטי המקום (PlaceDetailsView) יש יותר מקום להצגת פרטי המקום, ואפשר להציג בה סוגים נוספים של מידע.
אפשרויות תצוגה של תוכן
אתם יכולים לציין איזה תוכן להציג באמצעות הערכים של enum ב-PlaceDetailsCompactContent או ב-PlaceDetailsContent.
| תצוגה קומפקטית | תצוגה מלאה |
|---|---|
|
|
חיוב
כשמשתמשים ב-Place Details UI Kit, מתבצע חיוב בכל פעם שמפעילים את השיטה PlaceDetailsQuery. אם תטענו את אותו מקום כמה פעמים, תחויבו על כל בקשה.
הוספת פרטי מקום לאפליקציה
הרכיב Place Details הוא תצוגה של Swift UI. אתם יכולים להתאים אישית את המראה והסגנון של פרטי המקום כך שיתאימו לצרכים שלכם ולמראה של האפליקציה. מידע נוסף על התאמה אישית
אפשר לטעון את רכיב פרטי המקום באמצעות מזהה מקום, שם משאב או קואורדינטות של קו רוחב וקו אורך. אפשר לבחור שיטה אחת או כמה שיטות. מגדירים את identifier במבנה PlaceDetailsQuery לערך .placeID, .resourceName או .coordinate.
כברירת מחדל, התצוגה הקומפקטית מוצגת לאורך. אם רוצים פריסה אופקית, מציינים orientation: .horizontal ב-PlaceDetailsCompactView. אפשר גם לציין את orientation: .vertical לשם הבהרה. התצוגה המלאה יכולה להיות מוצגת רק בצורה אנכית.
דוגמאות מופיעות בקטע דוגמאות לרכיב Place Details.
התאמה אישית של המראה החזותי
עיצוב מותאם אישית
אתם יכולים להתאים אישית את הצבעים, הטיפוגרפיה, המרווחים, הגבולות והפינות של רכיב פרטי המקום.
ערכת ממשק המשתמש של Places מציעה גישה של מערכת עיצוב להתאמה אישית של רכיבים חזותיים, שמבוססת בערך על Material Design (עם כמה שינויים ספציפיים למפות Google). אפשר לעיין בהפניה של Material Design בנושא צבע וטיפוגרפיה. כברירת מחדל, הסגנון תואם לשפת העיצוב החזותי של מפות Google.
ערכת ממשק המשתמש של Places UI Kit כוללת עיצוב כהה כברירת מחדל, ולכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל-.dark ול-attribution.darkModeColor בעיצוב המותאם אישית.
מידע נוסף על סגנונות זמין בקטע התאמה אישית של סגנונות.
התאמה אישית של הרוחב והגובה
תצוגות קומפקטיות
רוחבים מומלצים:
- אוריינטציה אנכית: בין 180 פיקסלים ל-300 פיקסלים.
- אוריינטציה אופקית: בין 180 פיקסלים ל-500 פיקסלים.
השיטה המומלצת היא לא להגדיר גובה לתצוגות קומפקטיות. כך התוכן בחלון יוכל להגדיר את הגובה, וכל המידע יוצג.
יכול להיות שרוחב קטן מ-160 פיקסלים לא יוצג בצורה תקינה.
צפיות מלאות
לתצוגות מלאות, הרוחב המומלץ הוא בין 250 ל-450 פיקסלים. יכול להיות שתמונות ברוחב קטן מ-250 פיקסלים לא יוצגו בצורה תקינה.
אפשר להגדיר את הגובה של הרכיב: התצוגה האנכית של פרטי המקום תגולל אנכית בתוך השטח שהוקצה לה.
השיטה המומלצת היא להגדיר גובה לתצוגות מלאות. כך התוכן בחלון יוכל לגלול בצורה תקינה.
דוגמאות לרכיב Place Details
יצירת תצוגה מלאה עם פריסה אנכית
Swift
var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent // Query for loading the place details widget. @State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: 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 )
יצירת תצוגה קומפקטית עם פריסה אופקית
Swift
var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent // Query for loading the place details widget. @State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: 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 )
יצירת תצוגה מלאה עם פריסה אנכית
Swift
@State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: 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 )
התאמה אישית של מאפייני הסגנון
בדוגמה הזו אפשר לראות איך להתאים אישית את מאפייני הסגנון שמוגדרים כברירת מחדל בתצוגה מלאה או בתצוגה מצומצמת.
ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל-.dark ול-attribution.darkModeColor לעיצוב המותאם אישית.
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
@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) }