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

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

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

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

লেআউটের বিভিন্ন রূপ

প্লেস ডিটেইলস কম্পোনেন্টটি দুটি প্রধান লেআউট ভ্যারিয়েন্ট সমর্থন করে:

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

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

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

স্থানের বিবরণের সংক্ষিপ্ত দৃশ্য

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

স্থানের বিবরণ সম্পূর্ণ দেখুন

স্থানের বিশদ বিবরণের পূর্ণাঙ্গ দৃশ্য ( PlaceDetailsView ) স্থানের বিস্তারিত তথ্য প্রদর্শনের জন্য একটি বৃহত্তর পরিসর প্রদান করে এবং আপনাকে আরও বিভিন্ন ধরনের তথ্য দেখানোর সুযোগ দেয়।

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

আপনি PlaceDetailsCompactContent বা PlaceDetailsContent enum ব্যবহার করে কোন কন্টেন্ট প্রদর্শন করবেন তা নির্দিষ্ট করে দিতে পারেন।

বিলিং

প্লেস ডিটেইলস UI কিট ব্যবহার করার সময়, প্রতিবার PlaceDetailsQuery মেথডটি কল করার জন্য আপনাকে বিল করা হবে। আপনি যদি একই প্লেস একাধিকবার লোড করেন, তবে প্রতিটি রিকোয়েস্টের জন্য আপনাকে বিল করা হবে।

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

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

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

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

প্লেস ডিটেইলস কম্পোনেন্টের উদাহরণ বিভাগে উদাহরণগুলো দেখুন।

দৃশ্যমান চেহারা কাস্টমাইজ করুন

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

আপনি আপনার প্লেস ডিটেইলস কম্পোনেন্টের রং, টাইপোগ্রাফি, স্পেসিং, বর্ডার এবং কর্নারগুলো কাস্টমাইজ করতে পারেন।

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

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

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

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

সংক্ষিপ্ত দৃশ্য

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

• উল্লম্ব অভিমুখ: ১৮০ পিক্সেল থেকে ৩০০ পিক্সেলের মধ্যে।
• আনুভূমিক অভিমুখ: ১৮০ পিক্সেল থেকে ৫০০ পিক্সেলের মধ্যে।

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

১৬০ পিক্সেলের চেয়ে কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে।

সম্পূর্ণ দৃশ্য

সম্পূর্ণভাবে দেখার জন্য, প্রস্তাবিত প্রস্থ হলো ২৫০ পিক্সেল থেকে ৪৫০ পিক্সেলের মধ্যে। ২৫০ পিক্সেলের চেয়ে কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে।

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

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

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

উল্লম্ব লেআউট দিয়ে সম্পূর্ণ দৃশ্য তৈরি করুন

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: 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()
    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()
  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
  )

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

এই নমুনাটি দেখায় কিভাবে একটি সম্পূর্ণ বা কম্প্যাক্ট ভিউয়ের ডিফল্ট স্টাইল অ্যাট্রিবিউটগুলো কাস্টমাইজ করতে হয়।

Places UI Kit ডিফল্টরূপে একটি ডার্ক থিম প্রদান করে, তাই আপনার ডার্ক এবং লাইট উভয় থিমই কাস্টমাইজ করার প্রয়োজন হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, আপনার কাস্টম থিমে .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)
  }