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

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

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

আপনি বেসিক প্লেস অটোকম্পলিট কম্পোনেন্টটি স্বাধীনভাবে অথবা অন্যান্য গুগল ম্যাপস প্ল্যাটফর্ম এপিআই এবং পরিষেবার সাথে একত্রে ব্যবহার করতে পারেন।

বিলিং

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

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

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

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

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 ) এর বিকল্পগুলি ব্যবহার করুন। যদি আপনি তালিকার ঘনত্ব নির্দিষ্ট না করেন, তাহলে উপাদানটি দুই-লাইনের তালিকা প্রদর্শন করবে।

অবস্থান আইকন

ফলাফল তালিকায় একটি ডিফল্ট স্থান আইকন প্রদর্শন করবেন কিনা তা আপনি বেছে নিতে পারেন। AutocompleteUIIcon ( listItemDefaultIcon অথবা noIcon ) এর বিকল্পগুলি AutocompleteUICustomization ক্লাসে ব্যবহার করুন।

থিমটি কাস্টমাইজ করুন

আপনি এমন একটি থিম নির্দিষ্ট করতে পারেন যা যেকোনো ডিফল্ট স্টাইল অ্যাট্রিবিউটকে ওভাররাইড করে। আপনি আপনার Place Details কম্পোনেন্টের রঙ, টাইপোগ্রাফি, স্পেসিং, বর্ডার এবং কোণগুলি কাস্টমাইজ করতে পারেন। ডিফল্ট হল 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>