স্থান বিবরণ উপাদান

প্লেস UI কিটের স্থানের বিবরণ উপাদান আপনাকে একটি পৃথক UI উপাদান যোগ করতে দেয় যা আপনার অ্যাপে স্থানের বিবরণ প্রদর্শন করে। এই উপাদানটি কাস্টমাইজযোগ্য।

স্থানের বিবরণ উপাদানটি স্বাধীনভাবে বা অন্যান্য Google মানচিত্র প্ল্যাটফর্ম API এবং পরিষেবাগুলির সাথে একত্রে ব্যবহার করা যেতে পারে। উপাদানটি হয় একটি স্থান আইডি , সম্পদের নাম বা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক নেয় এবং স্থানের বিবরণ তথ্য প্রদান করে।

স্থানের বিবরণ উপাদানটি সম্পূর্ণরূপে থিমযোগ্য, যা আপনাকে আপনার ব্যবহারের ক্ষেত্রে এবং ভিজ্যুয়াল ব্র্যান্ড নির্দেশিকাগুলির সাথে মেলে ফন্ট, রঙ এবং কর্নার রেডিআই কাস্টমাইজ করতে দেয়। আপনি কাস্টম PlacesMaterialTheme মান প্রদান করে স্থানের বিবরণের চেহারা কাস্টমাইজ করতে পারেন। এছাড়াও আপনি PlaceDetailsCompactView এন্ট্রিগুলির একটি তালিকা নির্দিষ্ট করে কোন স্থানের বিশদ ক্ষেত্রগুলি অন্তর্ভুক্ত করা হয়েছে তা কাস্টমাইজ করতে পারেন, যার প্রতিটি স্থান সম্পর্কে দেখানো তথ্যের একটি অংশের সাথে মিলে যায়৷

লেআউট বৈকল্পিক

স্থানের বিবরণ উপাদান দুটি প্রধান বিন্যাস বৈকল্পিক সমর্থন করে:

• কমপ্যাক্ট: মূল তথ্যের পূর্বরূপ দেখার জন্য একটি বিন্যাস।
• সম্পূর্ণ: একটি বিস্তৃত লেআউট যা সমস্ত উপলব্ধ স্থানের বিবরণ প্রদর্শন করে।

কমপ্যাক্ট বিন্যাসটি উল্লম্ব বা অনুভূমিক অভিযোজনে প্রদর্শিত হতে পারে। এটি আপনাকে বিভিন্ন ডিজাইন লেআউট এবং স্ক্রীন আকারে উপাদানটিকে সংহত করতে দেয়। সম্পূর্ণ বিন্যাস শুধুমাত্র উল্লম্বভাবে প্রদর্শিত হতে পারে.

স্থানের বিবরণ উপাদান আপনাকে উপাদানটিতে প্রদর্শিত বিষয়বস্তুর উপর দানাদার নিয়ন্ত্রণ দেয়। প্রতিটি উপাদান (যেমন ফটো, পর্যালোচনা, এবং যোগাযোগের তথ্য) পৃথকভাবে দেখানো বা লুকানো যেতে পারে, উপাদানগুলির উপস্থিতি এবং তথ্য ঘনত্বের সুনির্দিষ্ট কাস্টমাইজেশনের জন্য অনুমতি দেয়।

স্থান বিবরণ কমপ্যাক্ট ভিউ

স্থানের বিবরণ কমপ্যাক্ট ভিউ ( PlaceDetailsCompactView ) ন্যূনতম স্থান ব্যবহার করে একটি নির্বাচিত স্থানের জন্য বিশদ রেন্ডার করে। এটি একটি তথ্য উইন্ডোতে একটি মানচিত্রে একটি স্থান হাইলাইট করে, একটি চ্যাটে একটি অবস্থান ভাগ করার মতো একটি সামাজিক মিডিয়া অভিজ্ঞতায়, আপনার বর্তমান অবস্থান নির্বাচন করার পরামর্শ হিসাবে বা Google মানচিত্রে স্থানটি উল্লেখ করার জন্য একটি মিডিয়া নিবন্ধের মধ্যে দরকারী হতে পারে৷

স্থান বিবরণ সম্পূর্ণ ভিউ

স্থানের বিশদ বিবরণ সম্পূর্ণ ভিউ ( PlaceDetailsView ) স্থানের বিশদ তথ্য প্রদর্শনের জন্য একটি বৃহত্তর পৃষ্ঠ অফার করে এবং আপনাকে আরও ধরনের তথ্য প্রদর্শন করতে দেয়।

বিষয়বস্তু প্রদর্শনের বিকল্প

আপনি PlaceDetailsCompactContent বা PlaceDetailsContent এ enums ব্যবহার করে কোন বিষয়বস্তু প্রদর্শন করতে হবে তা নির্দিষ্ট করতে পারেন।

বিলিং

Place Details UI Kit ব্যবহার করার সময়, প্রতিবার PlaceDetailsQuery পদ্ধতিতে কল করার জন্য আপনাকে বিল করা হবে। আপনি একই জায়গা একাধিকবার লোড করলে, প্রতিটি অনুরোধের জন্য আপনাকে বিল দেওয়া হবে।

আপনার অ্যাপে জায়গার বিবরণ যোগ করুন

স্থানের বিবরণ উপাদান একটি সুইফ্ট UI ভিউ। আপনি আপনার প্রয়োজন অনুসারে এবং আপনার অ্যাপের চেহারার সাথে মেলে জায়গার বিবরণ তথ্যের চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন। কাস্টমাইজেশন সম্পর্কে আরও জানুন ।

আপনি একটি স্থান আইডি, একটি সম্পদের নাম, বা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক সহ স্থান বিবরণ উপাদান লোড করতে চয়ন করতে পারেন৷ আপনি যেকোনো পদ্ধতি বা একাধিক বেছে নিতে পারেন। PlaceDetailsQuery struct-এ identifier .placeID , .resourceName , বা .coordinate এ সেট করুন।

কমপ্যাক্ট ভিউয়ের জন্য ডিফল্ট অবস্থান উল্লম্ব। আপনি যদি একটি অনুভূমিক বিন্যাস চান, অভিযোজন নির্দিষ্ট করুন: PlaceDetailsCompactView এ orientation: .horizontal । আপনি ঐচ্ছিকভাবে orientation: .vertical । সম্পূর্ণ ভিউ শুধুমাত্র উল্লম্বভাবে প্রদর্শিত হতে পারে।

স্থান বিবরণ উপাদান উদাহরণ বিভাগে উদাহরণ দেখুন.

চাক্ষুষ চেহারা কাস্টমাইজ করুন

কাস্টম স্টাইলিং

আপনি আপনার স্থানের বিবরণ উপাদানের রং, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং কোণগুলি কাস্টমাইজ করতে পারেন।

Places UI কিট মোটামুটিভাবে মেটেরিয়াল ডিজাইনের (কিছু Google-Maps-নির্দিষ্ট পরিবর্তন সহ) উপর ভিত্তি করে ভিজ্যুয়াল কাস্টমাইজেশনের জন্য একটি ডিজাইন সিস্টেম পদ্ধতির প্রস্তাব দেয়। রঙ এবং টাইপোগ্রাফির জন্য মেটেরিয়াল ডিজাইনের রেফারেন্স দেখুন। ডিফল্টরূপে, শৈলীটি Google মানচিত্রের ভিজ্যুয়াল ডিজাইনের ভাষা মেনে চলে।

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

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

প্রস্থ এবং উচ্চতা কাস্টমাইজেশন

কমপ্যাক্ট ভিউ

প্রস্তাবিত প্রস্থ:

• উল্লম্ব অভিযোজন: 180 পিক্সেল এবং 300 পিক্সেলের মধ্যে।
• অনুভূমিক অভিযোজন: 180 পিক্সেল এবং 500 পিক্সেলের মধ্যে।

সর্বোত্তম অনুশীলন হল কমপ্যাক্ট ভিউয়ের জন্য উচ্চতা নির্ধারণ না করা। এটি উইন্ডোতে থাকা বিষয়বস্তুকে উচ্চতা সেট করার অনুমতি দেবে, সমস্ত তথ্য প্রদর্শনের অনুমতি দেবে।

160 পিক্সেলের চেয়ে ছোট প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে।

সম্পূর্ণ ভিউ

সম্পূর্ণ দর্শনের জন্য, প্রস্তাবিত প্রস্থ হল 250 পিক্সেল এবং 450 পিক্সেলের মধ্যে৷ 250 পিক্সেলের চেয়ে ছোট প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে।

আপনি উপাদানের উচ্চতা সেট করতে পারেন: উল্লম্ব স্থানের বিবরণ দৃশ্যটি বরাদ্দকৃত স্থানের মধ্যে উল্লম্বভাবে স্ক্রোল করবে।

সর্বোত্তম অনুশীলন হল সম্পূর্ণ দর্শনের জন্য একটি উচ্চতা সেট করা। এটি উইন্ডোতে থাকা বিষয়বস্তুকে সঠিকভাবে স্ক্রোল করার অনুমতি দেবে।

স্থান বিবরণ উপাদান উদাহরণ

উল্লম্ব বিন্যাস সহ একটি সম্পূর্ণ দৃশ্য তৈরি করুন

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

অনুভূমিক বিন্যাস সহ একটি কম্প্যাক্ট ভিউ তৈরি করুন

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

উল্লম্ব বিন্যাস সহ একটি সম্পূর্ণ দৃশ্য তৈরি করুন

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

শৈলী বৈশিষ্ট্য কাস্টমাইজ করুন

এই নমুনা দেখায় কিভাবে একটি সম্পূর্ণ বা কমপ্যাক্ট ভিউ এর ডিফল্ট শৈলী বৈশিষ্ট্য কাস্টমাইজ করা যায়।

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

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  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.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

নির্দিষ্ট বিষয়বস্তু প্রদর্শন করুন

এই নমুনাটি একটি কমপ্যাক্ট ভিউ তৈরি করে যা পূর্ববর্তী উদাহরণে তৈরি থিম ব্যবহার করে শুধুমাত্র মিডিয়া, ঠিকানা, রেটিং এবং প্রকার প্রদর্শন করে।

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }