প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

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

কম্পোনেন্টটি AutocompleteFilter struct-এর মাধ্যমে ভৌগোলিক সীমানা এবং অন্যান্য সার্চ প্যারামিটার গ্রহণ করে।

প্রতিক্রিয়াটি একটি Place struct প্রদান করে, যেখানে শুধুমাত্র placeID ফিল্ডটি পূরণ করা থাকে।

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

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

বিলিং

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

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

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

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

এরপর, একটি বাটন তৈরি করুন যা আপনার কাস্টমাইজ করা বেসিক অটোকমপ্লিট কম্পোনেন্টটি চালু করবে।

সুইফট

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

সম্পূর্ণ উদাহরণটি দেখুন

বেসিক অটোকমপ্লিট কম্পোনেন্টটি কাস্টমাইজ করুন

বিষয়বস্তু কাস্টমাইজ করুন

তালিকার ঘনত্ব

আপনি দুই লাইনের তালিকা অথবা একাধিক লাইনের তালিকা প্রদর্শন করতে পারেন। এর জন্য AutocompleteUICustomization ক্লাসের AutocompleteListDensity ( .twoLine অথবা .multiLine ) অপশনগুলো ব্যবহার করুন। আপনি যদি তালিকার ঘনত্ব নির্দিষ্ট না করেন, তাহলে কম্পোনেন্টটি দুই লাইনের তালিকা প্রদর্শন করবে।

অবস্থান আইকন

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

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

আপনি এমন একটি থিম নির্দিষ্ট করতে পারেন যা যেকোনো ডিফল্ট স্টাইল অ্যাট্রিবিউটকে ওভাররাইড করবে। আপনি আপনার Place Details কম্পোনেন্টের রং, টাইপোগ্রাফি, স্পেসিং, বর্ডার এবং কর্নার কাস্টমাইজ করতে পারেন। ডিফল্ট থিমটি হলো PlacesMaterialTheme

যেসব থিম অ্যাট্রিবিউট ওভাররাইড করা হয় না, সেগুলো ডিফল্ট স্টাইল ব্যবহার করে।

Places UI Kit ডিফল্টরূপে একটি ডার্ক থিম প্রদান করে, তাই আপনার ডার্ক এবং লাইট উভয় থিমই কাস্টমাইজ করার প্রয়োজন হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, আপনার কাস্টম থিমে .dark এবং attribution.darkModeColor এর জন্য ভ্যালু যোগ করুন।

থিমিং সম্পর্কে আরও তথ্যের জন্য কাস্টম স্টাইলিং বিভাগটি দেখুন।

বেসিক অটোকমপ্লিট কম্পোনেন্টে কন্টেন্ট এবং থিম কাস্টমাইজেশন যোগ করুন

বেসিক অটোকমপ্লিট কম্পোনেন্টটি কাস্টমাইজ করতে AutocompleteUICustomization ক্লাসটি ব্যবহার করুন।

সুইফট

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
    theme: PlacesMaterialTheme()
)

উদাহরণ

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

এই উদাহরণটি একটি বাটনসহ একটি কাস্টম বেসিক অটোকমপ্লিট কম্পোনেন্ট তৈরি করে। ডিফল্ট আইকন, দুই-লাইনের তালিকা ঘনত্ব এবং কাস্টম থিম সেট করা হয়েছে। অটোকমপ্লিট ফিল্টারটি লাস ভেগাস এবং এর আশেপাশে হিসাবরক্ষণ-সম্পর্কিত স্থানগুলি খুঁজে বের করার জন্য সেট করা হয়েছে।

সুইফট

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon,
        theme: PlacesMaterialTheme()
      )
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }

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

সুইফট

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}