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

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

বেসিক প্লেস অটোকমপ্লিট কম্পোনেন্টটিতে নিম্নলিখিত কাস্টমাইজেশন অপশনগুলো রয়েছে: তালিকার ঘনত্ব এবং অবস্থানের আইকন অন্তর্ভুক্ত করা হবে কিনা। কম্পোনেন্টটি কাস্টমাইজ করতে 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 ) অপশনগুলো ব্যবহার করুন। আপনি যদি তালিকার ঘনত্ব নির্দিষ্ট না করেন, তাহলে কম্পোনেন্টটি দুই লাইনের তালিকা প্রদর্শন করবে।

অবস্থান আইকন

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

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

আপনি এমন একটি থিম নির্দিষ্ট করতে পারেন যা যেকোনো ডিফল্ট স্টাইল অ্যাট্রিবিউটকে ওভাররাইড করবে। আপনি আপনার 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>