Place Details कॉम्पोनेंट
जगहों की जानकारी देने वाली यूआई किट के Place Details कॉम्पोनेंट की मदद से, यूज़र इंटरफ़ेस (यूआई) का कोई ऐसा कॉम्पोनेंट जोड़ा जा सकता है जो आपके ऐप्लिकेशन में जगह की जानकारी दिखाता है. इस कॉम्पोनेंट को पसंद के मुताबिक बनाया जा सकता है.
Place Details कॉम्पोनेंट को अकेले या Google Maps Platform के अन्य एपीआई और सेवाओं के साथ इस्तेमाल किया जा सकता है. यह कॉम्पोनेंट, या तो जगह का आईडी, संसाधन का नाम या अक्षांश/देशांतर के कोऑर्डिनेट लेता है और रेंडर की गई Place Details जानकारी दिखाता है.
Place Details कॉम्पोनेंट की थीम को पूरी तरह से पसंद के मुताबिक बनाया जा सकता है. इससे, फ़ॉन्ट, रंग, और कॉर्नर रेडियस को अपने इस्तेमाल के हिसाब से और ब्रैंड के विज़ुअल दिशा-निर्देशों के मुताबिक बनाया जा सकता है. कस्टम PlacesMaterialTheme वैल्यू देकर, जगह की जानकारी के दिखने के तरीके को पसंद के मुताबिक बनाया जा सकता है. PlaceDetailsCompactView की एंट्री की सूची तय करके, यह भी तय किया जा सकता है कि जगह की जानकारी के कौनसे फ़ील्ड शामिल किए जाएं. इनमें से हर एंट्री, जगह के बारे में दिखाई गई जानकारी के किसी हिस्से से जुड़ी होती है.
लेआउट के अलग-अलग वर्शन
Place Details कॉम्पोनेंट, लेआउट के दो मुख्य वर्शन के साथ काम करता है:
- कंपैक्ट: मुख्य जानकारी की झलक देखने के लिए लेआउट.
- पूरा: जगह की सभी उपलब्ध जानकारी दिखाने के लिए, पूरी जानकारी वाला लेआउट.
कंपैक्ट लेआउट को वर्टिकल या हॉरिज़ॉन्टल ओरिएंटेशन में दिखाया जा सकता है. इससे, कॉम्पोनेंट को अलग-अलग डिज़ाइन लेआउट और स्क्रीन साइज़ में इंटिग्रेट किया जा सकता है. पूरे लेआउट को सिर्फ़ वर्टिकल ओरिएंटेशन में दिखाया जा सकता है.
Place Details कॉम्पोनेंट की मदद से, कॉम्पोनेंट में दिखाए जाने वाले कॉन्टेंट पर ज़्यादा कंट्रोल मिलता है. हर एलिमेंट (जैसे, फ़ोटो, समीक्षाएं, और संपर्क जानकारी) को अलग-अलग दिखाया या छिपाया जा सकता है. इससे, कॉम्पोनेंट के दिखने के तरीके और जानकारी की डेंसिटी को सटीक तरीके से पसंद के मुताबिक बनाया जा सकता है.
Place Details का कंपैक्ट व्यू
Place Details का कंपैक्ट व्यू (PlaceDetailsCompactView), चुनी गई जगह की जानकारी को कम जगह में रेंडर करता है. यह किसी जानकारी वाली विंडो में काम आ सकता है. जैसे, मैप पर किसी जगह को हाइलाइट करना, सोशल मीडिया पर किसी जगह को चैट में शेयर करना, अपनी मौजूदा जगह चुनने के लिए सुझाव देना या Google Maps पर किसी जगह का रेफ़रंस देने के लिए, मीडिया लेख में इसका इस्तेमाल करना.
Place Details का पूरा व्यू
Place Details का पूरा व्यू (PlaceDetailsView), जगह की जानकारी दिखाने के लिए ज़्यादा जगह उपलब्ध कराता है. साथ ही, इससे ज़्यादा तरह की जानकारी दिखाई जा सकती है.
कॉन्टेंट दिखाने के विकल्प
PlaceDetailsCompactContent या PlaceDetailsContent में मौजूद एनम का इस्तेमाल करके, यह तय किया जा सकता है कि कौनसा कॉन्टेंट दिखाना है.
| कंपैक्ट व्यू | पूरा व्यू |
|---|---|
|
|
बिलिंग
Place Details यूआई किट का इस्तेमाल करने पर, PlaceDetailsQuery तरीके को कॉल किए जाने पर हर बार बिल भेजा जाता है. एक ही जगह को कई बार लोड करने पर, हर अनुरोध के लिए बिल भेजा जाता है.
अपने ऐप्लिकेशन में जगह की जानकारी जोड़ना
Place Details कॉम्पोनेंट, Swift यूआई व्यू है. जगह की जानकारी के लुक और स्टाइल को अपनी ज़रूरत के हिसाब से और अपने ऐप्लिकेशन के दिखने के तरीके से मेल खाने के लिए, पसंद के मुताबिक बनाया जा सकता है. कस्टमाइज़ेशन के बारे में ज़्यादा जानें.
Place Details कॉम्पोनेंट को जगह के आईडी, संसाधन के नाम या अक्षांश/देशांतर के कोऑर्डिनेट के साथ लोड किया जा सकता है. कोई भी तरीका या एक से ज़्यादा तरीके चुने जा सकते हैं. PlaceDetailsQuery स्ट्रक्चर्ड में identifier को .placeID, .resourceName या .coordinate पर सेट करें.
कंपैक्ट व्यू की डिफ़ॉल्ट पोज़िशन वर्टिकल होती है. अगर आपको हॉरिज़ॉन्टल लेआउट चाहिए, तो PlaceDetailsCompactView में orientation: .horizontal तय करें. ज़्यादा जानकारी के लिए, orientation: .vertical भी तय किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. पूरे व्यू को सिर्फ़ वर्टिकल ओरिएंटेशन में दिखाया जा सकता है.
Place Details कॉम्पोनेंट के उदाहरण वाले सेक्शन में उदाहरण देखें.
विज़ुअल एलिमेंट को पसंद के मुताबिक बनाना
कस्टम स्टाइलिंग
Place Details कॉम्पोनेंट के रंग, टाइपोग्राफ़ी, स्पेसिंग, बॉर्डर, और कॉर्नर को पसंद के मुताबिक बनाया जा सकता है.
Places यूआई किट, विज़ुअल कस्टमाइज़ेशन के लिए डिज़ाइन सिस्टम का तरीका अपनाती है. यह तरीका, मटीरियल डिज़ाइन पर आधारित है. हालांकि, इसमें Google Maps के हिसाब से कुछ बदलाव किए गए हैं. रंग और टाइपोग्राफ़ी के बारे में जानकारी के लिए, Material Design का रेफ़रंस देखें. डिफ़ॉल्ट रूप से, स्टाइल Google Maps की विज़ुअल डिज़ाइन लैंग्वेज के मुताबिक होती है.
Places यूआई किट में डिफ़ॉल्ट रूप से, गहरे रंग वाली थीम उपलब्ध होती है. इसलिए, आपको गहरे और हल्के, दोनों तरह के रंग वाली थीम को पसंद के मुताबिक बनाना पड़ सकता है. गहरे रंग वाली थीम को पसंद के मुताबिक बनाने के लिए, अपनी कस्टम थीम में .dark और attribution.darkModeColor की वैल्यू जोड़ें.
स्टाइलिंग के बारे में ज़्यादा जानकारी के लिए, कस्टम स्टाइलिंग सेक्शन देखें.
चौड़ाई और ऊंचाई को पसंद के मुताबिक बनाना
कंपैक्ट व्यू
सुझाई गई चौड़ाई:
- वर्टिकल ओरिएंटेशन: 180 पिक्सल से 300 पिक्सल के बीच.
- हॉरिज़ॉन्टल स्क्रीन की दिशा: 180 पिक्सल से 500 पिक्सल के बीच.
कंपैक्ट व्यू के लिए ऊंचाई सेट न करना सबसे सही तरीका है. इससे, विंडो में मौजूद कॉन्टेंट, ऊंचाई सेट कर पाएगा. साथ ही, सारी जानकारी दिखाई जा सकेगी.
160 पिक्सल से कम चौड़ाई वाले व्यू सही तरीके से नहीं दिख सकते.
पूरे व्यू
पूरे व्यू के लिए, सुझाई गई चौड़ाई 250 पिक्सल से 450 पिक्सल के बीच है. 250 पिक्सल से कम चौड़ाई वाले व्यू सही तरीके से नहीं दिख सकते.
कॉम्पोनेंट की ऊंचाई सेट की जा सकती है. Place Details का वर्टिकल व्यू, तय की गई जगह में वर्टिकल तौर पर स्क्रोल होगा.
पूरे व्यू के लिए ऊंचाई सेट करना सबसे सही तरीका है. इससे, विंडो में मौजूद कॉन्टेंट सही तरीके से स्क्रोल हो पाएगा.
Place Details कॉम्पोनेंट के उदाहरण
वर्टिकल लेआउट वाला पूरा व्यू बनाना
Swift
var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent @State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: PlacesMaterialTheme() var configuration: PlaceDetailsConfiguration { PlaceDetailsConfiguration( content: selectedType, theme: theme) } // Callback for the place details component. 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 @State var query: PlaceDetailsQuery = PlaceDetailsQuery( identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU")) var theme: PlacesMaterialTheme() var configuration: PlaceDetailsConfiguration { PlaceDetailsConfiguration( content: selectedType, theme: theme) } // Callback for the place details component. 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 )
स्टाइल एट्रिब्यूट को पसंद के मुताबिक बनाना
इस सैंपल में दिखाया गया है कि पूरे या कंपैक्ट व्यू के डिफ़ॉल्ट स्टाइल एट्रिब्यूट को कैसे पसंद के मुताबिक बनाया जाए.
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) }