जगहों की जानकारी वाली यूज़र इंटरफ़ेस (यूआई) किट (प्रयोग के तौर पर उपलब्ध)

जगह की जानकारी का कॉम्पैक्ट व्यू

जगह की जानकारी के लिए यूज़र इंटरफ़ेस (यूआई) किट की मदद से, एक अलग यूआई कॉम्पोनेंट जोड़ा जा सकता है. यह कॉम्पोनेंट आपके ऐप्लिकेशन में जगह की जानकारी दिखाता है. यूआई किट का इस्तेमाल, Google Maps Platform के अन्य एपीआई और सेवाओं के साथ या अलग से किया जा सकता है. यूज़र इंटरफ़ेस (यूआई) किट, प्लेस आईडी या अक्षांश/देशांतर निर्देशांक में से किसी एक को लेता है और रेंडर की गई जगह की जानकारी दिखाता है.

यूज़र इंटरफ़ेस (यूआई) किट में कॉम्पैक्ट व्यू मिलता है. इसे हॉरिज़ॉन्टल या वर्टिकल तौर पर दिखाया जा सकता है. डिफ़ॉल्ट थीम के किसी भी एट्रिब्यूट को बदलकर, जगह की जानकारी को अपनी पसंद के मुताबिक बनाया जा सकता है. जगह की जानकारी वाले कौनसे फ़ील्ड शामिल करने हैं, यह भी पसंद के मुताबिक तय किया जा सकता है. इसके लिए, Content एंट्री की सूची दी जा सकती है. हर एंट्री, जगह के बारे में दिखाई गई जानकारी से जुड़ी होती है.

बिलिंग

जगह की जानकारी के लिए, जगह की जानकारी वाली यूज़र इंटरफ़ेस (यूआई) किट का इस्तेमाल करने पर, आपको विजेट का इस्तेमाल करके लोड की गई हर जगह के लिए शुल्क देना होगा. एक ही जगह को कई बार लोड करने पर, आपको हर अनुरोध के लिए बिल भेजा जाता है.

Places की यूज़र इंटरफ़ेस (यूआई) किट चालू करना

Places UI Kit का इस्तेमाल करने से पहले, आपको ये काम करने होंगे:

जगह की जानकारी वाली यूज़र इंटरफ़ेस (यूआई) किट के उदाहरण

लेआउट में फ़्रैगमेंट जोड़कर, अपने ऐप्लिकेशन में जगह की जानकारी जोड़ी जा सकती है. फ़्रैगमेंट को इंस्टैंशिएट करते समय, जगह की जानकारी के लुक और स्टाइल को अपनी ज़रूरतों के हिसाब से बनाया जा सकता है. साथ ही, इसे अपने ऐप्लिकेशन के लुक से मैच कराया जा सकता है.

आपके पास ओरिएंटेशन (हॉरिज़ॉन्टल या वर्टिकल), थीम बदलने, और कॉन्टेंट तय करने का विकल्प होता है. कॉन्टेंट के विकल्पों में मीडिया, पता, रेटिंग, कीमत, टाइप, ऐक्सेस करने के लिए प्रवेश द्वार, मैप का लिंक, और निर्देशों का लिंक शामिल हैं. [पसंद के मुताबिक बनाने का उदाहरण देखें]().

KotlinJava
val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)
 
      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

पसंद के मुताबिक बनाने का उदाहरण

किसी फ़्रैगमेंट को इंस्टैंशिएट करते समय, ऐसी थीम तय की जा सकती है जो किसी भी डिफ़ॉल्ट स्टाइल एट्रिब्यूट को बदल दे. जिन थीम एट्रिब्यूट को बदला नहीं जाता है वे डिफ़ॉल्ट स्टाइल का इस्तेमाल करते हैं. अगर आपको गहरे रंग वाली थीम का इस्तेमाल करना है, तो values-night/colors.xml में रंग के लिए कोई एंट्री जोड़ी जा सकती है. 

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

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

  • placesColorSurfaceContainerLowest
  • placesColorOutlineDecorative
  • placesColorPrimary
  • placesColorOnSurface
  • placesColorOnSurfaceVariant
  • placesColorSecondaryContainer
  • placesColorOnSecondaryContainer
  • placesCornerRadius
  • placesTextAppearanceBodySmall
  • placesTextAppearanceBodyMedium
  • placesTextAppearanceBodyLarge
  • placesTextAppearanceLabelLarge
  • placesTextAppearanceHeadlineMedium
  • placesColorAttributionLight (सफ़ेद, स्लेटी, और काले रंग के लिए वैल्यू)
  • placesColorAttributionDark (सफ़ेद, स्लेटी, और काले रंग के लिए वैल्यू)

इस सैंपल में, स्टैंडर्ड कॉन्टेंट को पसंद के मुताबिक बनाया गया है.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

इस सैंपल में, सभी कॉन्टेंट को पसंद के मुताबिक बनाया जा सकता है.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)