पसंद के मुताबिक स्टाइल बनाना

जगह की जानकारी वाले विज़ुअल को पसंद के मुताबिक बनाना — विज़ुअल को पसंद के मुताबिक बनाने के उदाहरण

Places API के यूज़र इंटरफ़ेस (यूआई) किट के इन कॉम्पोनेंट के रंग, टाइपोग्राफ़ी, स्पेसिंग, बॉर्डर, और कोनों को पसंद के मुताबिक बनाया जा सकता है:

Places UI kit, विज़ुअल कस्टमाइज़ेशन के लिए डिज़ाइन सिस्टम का इस्तेमाल करता है. यह मटीरियल डिज़ाइन पर आधारित है. हालांकि, इसमें Google Maps के हिसाब से कुछ बदलाव किए गए हैं. कलर और टाइपोग्राफ़ी के लिए, Material Design का रेफ़रंस देखें. डिफ़ॉल्ट रूप से, स्टाइल Google Maps के विज़ुअल डिज़ाइन की भाषा के मुताबिक होती है.

जगह की जानकारी को पसंद के मुताबिक बनाने के विकल्प

कॉम्पोनेंट के लुक और फ़ील को placesMaterialColor, placesMaterialFont, placesMaterialShape, और placesMaterialTheme स्ट्रक्ट की मदद से पसंद के मुताबिक बनाया जाता है.

Places UI Kit में डिफ़ॉल्ट रूप से गहरे रंग वाली थीम उपलब्ध होती है. इसलिए, आपको गहरे और हल्के, दोनों तरह के रंग वाली थीम को पसंद के मुताबिक बनाना पड़ सकता है. गहरे रंग वाली थीम को पसंद के मुताबिक बनाने के लिए, अपनी कस्टम थीम में .dark और attribution.darkModeColor की वैल्यू जोड़ें.

इन स्टाइल को पसंद के मुताबिक बनाया जा सकता है:

थीम एट्रिब्यूट	इस्तेमाल
रंग
`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`	ईवी चार्जर के लिए उपलब्ध बैज
`theme.color.onPositiveContainer`	ईवी चार्जर के बैज के लिए उपलब्ध कॉन्टेंट
`theme.color.positive`	जगह के लिए "खुला है" लेबल
`theme.color.negative`	जगह को अब "बंद है" के तौर पर लेबल किया गया है
`theme.color.info`	व्हीलचेयर लाने-ले जाने की सुविधा वाले रास्ते का आइकॉन
`theme.measurement.borderWidthButton`	'Google Maps में खोलें' और 'ठीक है' बटन

टाइपोग्राफ़ी
`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 की हल्के रंग वाली थीम में एट्रिब्यूशन और डिसक्लोज़र बटन (सफ़ेद, स्लेटी, और काले रंग के लिए enum)
`attribution.darkModeColor`	Google Maps के एट्रिब्यूशन और डिसक्लोज़र बटन के लिए गहरे रंग वाली थीम (सफ़ेद, स्लेटी, और काले रंग के लिए enum)

एट्रिब्यूशन के रंग

Google Maps की सेवा की शर्तों के मुताबिक, Google Maps के एट्रिब्यूशन के लिए, आपको ब्रैंड के तीन रंगों में से किसी एक का इस्तेमाल करना होगा. कस्टम बनाने से जुड़े बदलाव किए जाने पर, एट्रिब्यूशन दिखना चाहिए और इसे ऐक्सेस किया जा सकना चाहिए.

हम आपको ब्रैंड के तीन रंग चुनने का विकल्प देते हैं. इन्हें लाइट और डार्क थीम के लिए अलग-अलग सेट किया जा सकता है:

हल्के रंग वाली थीम: attributionColorLight में सफ़ेद, स्लेटी, और काले रंग के लिए एनम.
गहरे रंग वाली थीम: attributionColorDark में सफ़ेद, स्लेटी, और काले रंग के लिए एनम.

उदाहरण

यह फ़ंक्शन एक ऐसी थीम बनाता है जो स्टाइल एट्रिब्यूट की डिफ़ॉल्ट वैल्यू को बदल देती है. जिन थीम एट्रिब्यूट को बदला नहीं गया है वे डिफ़ॉल्ट स्टाइल का इस्तेमाल करते हैं.

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

हर कॉम्पोनेंट के लिए पूरे उदाहरण