किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बुनियादी कॉम्पोनेंट

Places UI Kit में, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बुनियादी कॉम्पोनेंट शामिल है. इसकी मदद से, यूज़र इंटरफ़ेस (यूआई) का कोई ऐसा कॉम्पोनेंट जोड़ा जा सकता है जो उपयोगकर्ता के किसी जगह को चुनने पर, जगह का आईडी दिखाता है. यह कॉम्पोनेंट, फ़ुल स्क्रीन कवर होता है. इसमें उपयोगकर्ताओं के लिए, क्वेरी डालने के लिए एक सर्च बार होता है. उपयोगकर्ता के टाइप करने पर, सर्च बार के नीचे, अपने-आप पूरे होने वाले नतीजों की सूची दिखेगी. जब उपयोगकर्ता किसी जगह पर टैप करता है, तो डेवलपर को सिर्फ़ जगह के आईडी वाला एक ऑब्जेक्ट मिलता है. इस कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाया जा सकता है.

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट में, अपनी पसंद के मुताबिक बदलाव करने के ये विकल्प होते हैं: सूची का लेआउट और जगह की जानकारी के आइकॉन शामिल करना है या नहीं. कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाने के लिए, AutocompleteUICustomization का इस्तेमाल करें.

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट को, Google Maps Platform के अन्य एपीआई और सेवाओं के साथ या उनके बिना भी इस्तेमाल किया जा सकता है.

बिलिंग

जब भी कॉम्पोनेंट खोला जाता है और कोई क्वेरी की जाती है, तब आपसे शुल्क लिया जाता है. उस सेशन के लिए, आपसे दोबारा शुल्क नहीं लिया जाएगा. हालांकि, ऐसा तब तक होगा, जब तक सेशन खत्म नहीं हो जाता या सूची में से कोई जगह नहीं चुनी जाती.

अपने ऐप्लिकेशन में, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बुनियादी कॉम्पोनेंट जोड़ना

अपने-आप पूरे होने वाले फ़िल्टर के पैरामीटर सेट करें. जैसे, नतीजे के तौर पर किस तरह की जगहें दिखानी हैं, नतीजे किस देश तक सीमित रखने हैं, नतीजों के लिए इलाके के कोऑर्डिनेट, दूरी की जानकारी दिखाने के लिए अनुरोध की जगह (अगर उपलब्ध हो). ऐसा करने के लिए, Places UI Kit के बिना, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा (नया) का इस्तेमाल करें. अपने-आप पूरे होने वाले फ़िल्टर को बनाने के लिए, पूरी जानकारी और कोड का उदाहरण देखने के लिए, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा (नया) का दस्तावेज़ देखें.

अपने-आप पूरे होने वाले फ़िल्टर को बनाने के बाद, यूज़र इंटरफ़ेस (यूआई) में अपनी पसंद के मुताबिक बदलाव करें. अपनी पसंद के मुताबिक बदलाव करने के विकल्प और निर्देश देखें.

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

पूरा उदाहरण देखें.

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाना

उपयोगकर्ताओं के हिसाब से कॉन्टेंट बनाएं

सूची का लेआउट

आपके पास दो लाइन वाली सूची या मल्टीलाइन सूची दिखाने का विकल्प होता है. AutocompleteUICustomization क्लास में, AutocompleteListDensity (TWO_LINE या MULTI_LINE) में दिए गए विकल्पों का इस्तेमाल करें. अगर सूची का लेआउट तय नहीं किया जाता है, तो कॉम्पोनेंट दो लाइन वाली सूची दिखाएगा.

जगह की जानकारी का आइकॉन

आपके पास यह चुनने का विकल्प होता है कि नतीजों की सूची में, जगह की जानकारी का डिफ़ॉल्ट आइकॉन दिखाना है या नहीं. AutocompleteUICustomization क्लास में, AutocompleteUIIcon (listItemDefaultIcon या noIcon) में दिए गए विकल्पों का इस्तेमाल करें.

थीम को अपनी पसंद के मुताबिक बनाना

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

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

Places UI Kit में, डिफ़ॉल्ट तौर पर गहरे रंग वाली थीम सेट होती है. इसलिए, आपको गहरे और हल्के, दोनों तरह के रंग वाली थीम को अपनी पसंद के मुताबिक बनाना पड़ सकता है. गहरे रंग वाली थीम को अपनी पसंद के मुताबिक बनाने के लिए, values-night/colors.xml में रंग के लिए एक एंट्री जोड़ें.

थीमिंग के बारे में ज़्यादा जानकारी के लिए, अपनी पसंद के मुताबिक स्टाइलिंग वाला सेक्शन देखें.

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट में, कॉन्टेंट और थीम को अपनी पसंद के मुताबिक बनाना

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाने के लिए, AutocompleteUICustomization क्लास का इस्तेमाल करें.

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

उदाहरण

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बुनियादी कॉम्पोनेंट जोड़ना.

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

थीम को अपनी पसंद के मुताबिक बनाना

Places UI Kit में, डिफ़ॉल्ट तौर पर गहरे रंग वाली थीम सेट होती है. इसलिए, आपको गहरे और हल्के, दोनों तरह के रंग वाली थीम को अपनी पसंद के मुताबिक बनाना पड़ सकता है. गहरे रंग वाली थीम को अपनी पसंद के मुताबिक बनाने के लिए, values-night/colors.xml में रंग के लिए एक एंट्री जोड़ें.

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <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>