বেসিক প্লেস অটো-কমপ্লিট কম্পোনেন্ট

Places UI Kit-এর বেসিক প্লেস অটোকমপ্লিট কম্পোনেন্ট আপনাকে একটি স্বতন্ত্র UI কম্পোনেন্ট যোগ করতে দেয় যা ব্যবহারকারী কোনও জায়গা বেছে নিলে একটি প্লেস আইডি প্রদান করে। কম্পোনেন্টটি হল একটি ফুল স্ক্রিন কভার যা ব্যবহারকারীদের কোয়েরি লেখার জন্য একটি সার্চ বার প্রদান করে। ব্যবহারকারী টাইপ করার সাথে সাথে, সার্চ বারের নিচে অটোকমপ্লিট ফলাফলের একটি তালিকা দেখানো হবে। ব্যবহারকারী কোনও জায়গায় ট্যাপ করলে, ডেভেলপারকে শুধু জায়গার আইডি সহ একটি জায়গা অবজেক্ট ফেরত পাঠানো হয়। এই কম্পোনেন্ট কাস্টমাইজ করা যায়।

বেসিক প্লেস অটোকমপ্লিট কম্পোনেন্টে নিম্নলিখিত কাস্টমাইজেশন বিকল্প রয়েছে: তালিকার ঘনত্ব এবং লোকেশন আইকন অন্তর্ভুক্ত করা হবে কিনা। কম্পোনেন্ট কাস্টমাইজ করতে AutocompleteUICustomization ব্যবহার করুন।

আপনি বেসিক জায়গা অটোমেটিক সম্পূর্ণ করার কম্পোনেন্ট স্বাধীনভাবে বা অন্যান্য Google Maps Platform API এবং পরিষেবার সাথে ব্যবহার করতে পারেন।

বিলিং

প্রতিবার কম্পোনেন্ট খোলা এবং কোয়েরি করার জন্য আপনাকে বিল করা হয়। সেশনের মেয়াদ শেষ না হওয়া পর্যন্ত বা তালিকা থেকে কোনও জায়গা বেছে না নেওয়া পর্যন্ত সেই সেশনের জন্য আপনাকে আর বিল করা হবে না।

আপনার অ্যাপে বেসিক অটো-কমপ্লিট কম্পোনেন্ট যোগ করা

Places UI Kit ছাড়া Place Autocomplete (নতুন) ব্যবহার করার জন্য আপনি যেভাবে অটোকমপ্লিট ফিল্টার প্যারামিটার সেট করেন (যেমন, যে ধরনের ফলাফল দেখানো হবে, যে দেশের মধ্যে ফলাফল সীমাবদ্ধ থাকবে, ফলাফলের জন্য অঞ্চলের কোঅর্ডিনেট, দূরত্ব সংক্রান্ত তথ্য দেখানোর জন্য অনুরোধের উৎস, যদি উপলভ্য থাকে) সেভাবেই সেট করুন। সম্পূর্ণ নির্দেশাবলী এবং অটোমেটিক সম্পূর্ণ করার ফিল্টার তৈরি করার কোডের উদাহরণ দেখতে জায়গা অটোমেটিক সম্পূর্ণ করা (নতুন) ডকুমেন্টেশন দেখুন।

আপনার অটোমেটিক সম্পূর্ণ করার ফিল্টার তৈরি করা হয়ে গেলে, আপনার UI কাস্টমাইজেশন যোগ করুন। কাস্টমাইজেশনের বিকল্প ও নির্দেশাবলী দেখুন।

Kotlin

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

Java

      
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 ক্লাস ব্যবহার করুন।

Kotlin

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

Java

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

উদাহরণ

কাস্টম বেসিক অটোমেটিক সম্পূর্ণ করার কম্পোনেন্ট যোগ করুন।

Kotlin

  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)

Java

  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>