স্থানের বিবরণ উপাদান
Places UI Kit-এর Place Details কম্পোনেন্ট আপনাকে একটি পৃথক UI কম্পোনেন্ট যোগ করতে দেয় যা আপনার অ্যাপে স্থানের বিবরণ প্রদর্শন করে। এই কম্পোনেন্টটি কাস্টমাইজযোগ্য।
স্থান বিবরণী উপাদানটি স্বাধীনভাবে অথবা অন্যান্য Google Maps প্ল্যাটফর্ম API এবং পরিষেবার সাথে একত্রে ব্যবহার করা যেতে পারে। উপাদানটি একটি স্থান আইডি , সম্পদের নাম, অথবা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক গ্রহণ করে এবং স্থান বিবরণীতে রেন্ডার করা তথ্য প্রদান করে।
স্থান বিবরণী উপাদানটি সম্পূর্ণরূপে থিমযোগ্য, যা আপনাকে আপনার ব্যবহারের ক্ষেত্রে এবং ভিজ্যুয়াল ব্র্যান্ড নির্দেশিকাগুলির সাথে মেলে ফন্ট, রঙ এবং কোণার ব্যাসার্ধ কাস্টমাইজ করতে দেয়। আপনি কাস্টম PlacesMaterialTheme মান প্রদান করে স্থান বিবরণীর চেহারা কাস্টমাইজ করতে পারেন। আপনি PlaceDetailsCompactView এন্ট্রিগুলির একটি তালিকা নির্দিষ্ট করে কোন স্থান বিবরণী ক্ষেত্রগুলি অন্তর্ভুক্ত করা হবে তা কাস্টমাইজ করতে পারেন, যার প্রতিটি স্থান সম্পর্কে দেখানো তথ্যের একটি অংশের সাথে মিলে যায়।
লেআউটের ধরণ
প্লেস ডিটেইলস কম্পোনেন্ট দুটি প্রধান লেআউট ভেরিয়েন্ট সমর্থন করে:
- কমপ্যাক্ট: গুরুত্বপূর্ণ তথ্যের পূর্বরূপ দেখার জন্য একটি বিন্যাস।
- পূর্ণাঙ্গ: সমস্ত উপলব্ধ স্থানের বিবরণ প্রদর্শন করে একটি বিস্তৃত বিন্যাস।
কমপ্যাক্ট লেআউটটি উল্লম্ব বা অনুভূমিক উভয় দিক থেকেই প্রদর্শিত হতে পারে। এটি আপনাকে বিভিন্ন ডিজাইন লেআউট এবং স্ক্রিন আকারের সাথে উপাদানটিকে একীভূত করতে দেয়। সম্পূর্ণ লেআউটটি কেবল উল্লম্বভাবে প্রদর্শিত হতে পারে।
স্থান বিবরণী উপাদানটি আপনাকে উপাদানটিতে প্রদর্শিত সামগ্রীর উপর সূক্ষ্ম নিয়ন্ত্রণ দেয়। প্রতিটি উপাদান (যেমন ছবি, পর্যালোচনা এবং যোগাযোগের তথ্য) পৃথকভাবে দেখানো বা লুকানো যেতে পারে, যা উপাদানগুলির চেহারা এবং তথ্যের ঘনত্বের সুনির্দিষ্ট কাস্টমাইজেশনের অনুমতি দেয়।
স্থানের বিবরণের সংক্ষিপ্ত দৃশ্য
স্থানের বিবরণের সংক্ষিপ্ত দৃশ্য ( PlaceDetailsCompactView ) ন্যূনতম স্থান ব্যবহার করে নির্বাচিত স্থানের বিবরণ প্রদান করে। এটি একটি তথ্য উইন্ডোতে একটি স্থান হাইলাইট করার ক্ষেত্রে, চ্যাটে একটি অবস্থান ভাগ করে নেওয়ার মতো সামাজিক যোগাযোগের অভিজ্ঞতায়, আপনার বর্তমান অবস্থান নির্বাচন করার জন্য একটি পরামর্শ হিসাবে, অথবা Google মানচিত্রে স্থানটি উল্লেখ করার জন্য একটি মিডিয়া নিবন্ধের মধ্যে কার্যকর হতে পারে।
স্থানের বিবরণ সম্পূর্ণ দেখুন
স্থানের বিস্তারিত তথ্য প্রদর্শনের জন্য স্থানের বিস্তারিত পূর্ণাঙ্গ দৃশ্য ( PlaceDetailsView ) একটি বৃহত্তর পৃষ্ঠ প্রদান করে এবং আপনাকে আরও ধরণের তথ্য প্রদর্শন করতে দেয়।
কন্টেন্ট প্রদর্শনের বিকল্পগুলি
আপনি PlaceDetailsCompactContent অথবা PlaceDetailsContent এ enum ব্যবহার করে কোন কন্টেন্ট প্রদর্শন করবেন তা নির্দিষ্ট করতে পারেন।
| কম্প্যাক্ট ভিউ | সম্পূর্ণ দৃশ্য |
|---|---|
|
|
বিলিং
Place Details UI Kit ব্যবহার করার সময়, PlaceDetailsQuery পদ্ধতিটি কল করার সময় আপনাকে প্রতিবার বিল করা হবে। যদি আপনি একই স্থান একাধিকবার লোড করেন, তাহলে প্রতিটি অনুরোধের জন্য আপনাকে বিল করা হবে।
আপনার অ্যাপে স্থানের বিবরণ যোগ করুন
স্থানের বিবরণ উপাদানটি একটি সুইফট UI ভিউ। আপনি আপনার প্রয়োজন অনুসারে এবং আপনার অ্যাপের চেহারার সাথে মেলে স্থানের বিবরণ তথ্যের চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন। কাস্টমাইজেশন সম্পর্কে আরও জানুন ।
আপনি একটি Place ID, একটি রিসোর্স নাম, অথবা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক ব্যবহার করে Place Details কম্পোনেন্ট লোড করতে পারেন। আপনি যেকোনো পদ্ধতি, অথবা একাধিক নির্বাচন করতে পারেন। PlaceDetailsQuery struct-এ identifier .placeID , .resourceName , অথবা .coordinate এ সেট করুন।
কম্প্যাক্ট ভিউয়ের ডিফল্ট অবস্থান উল্লম্ব। যদি আপনি একটি অনুভূমিক লেআউট চান, তাহলে PlaceDetailsCompactView এ orientation: .horizontal উল্লেখ করুন। স্পষ্টতার জন্য আপনি ঐচ্ছিকভাবে orientation: .vertical ও উল্লেখ করতে পারেন। সম্পূর্ণ ভিউ শুধুমাত্র উল্লম্বভাবে প্রদর্শিত হতে পারে।
স্থানের বিবরণ উপাদানের উদাহরণ বিভাগে উদাহরণগুলি দেখুন।
ভিজ্যুয়াল চেহারা কাস্টমাইজ করুন
কাস্টম স্টাইলিং
আপনি আপনার স্থান বিবরণী উপাদানের রঙ, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং কোণগুলি কাস্টমাইজ করতে পারেন।
প্লেসেস ইউআই কিটটি ম্যাটেরিয়াল ডিজাইনের উপর ভিত্তি করে ভিজ্যুয়াল কাস্টমাইজেশনের জন্য একটি ডিজাইন সিস্টেম পদ্ধতি অফার করে (কিছু গুগল-ম্যাপ-নির্দিষ্ট পরিবর্তন সহ)। রঙ এবং টাইপোগ্রাফির জন্য ম্যাটেরিয়াল ডিজাইনের রেফারেন্স দেখুন। ডিফল্টরূপে, স্টাইলটি গুগল ম্যাপের ভিজ্যুয়াল ডিজাইন ভাষার সাথে সঙ্গতিপূর্ণ।
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) }