স্থান বিবরণ উপাদান
প্লেস 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 মানচিত্রের ভিজ্যুয়াল ডিজাইনের ভাষা মেনে চলে।
কম্পোনেন্টের চেহারা ও অনুভূতি placesMaterialColor , placesMaterialFont , placesMaterialShape , এবং placesMaterialTheme থিম স্ট্রাকট দিয়ে কাস্টমাইজ করা হয়েছে।
আপনি নিম্নলিখিত শৈলী কাস্টমাইজ করতে পারেন:
| থিম বৈশিষ্ট্য | ব্যবহার |
|---|---|
| রঙ | |
theme.color.surface | ধারক এবং ডায়ালগ ব্যাকগ্রাউন্ড |
theme.color.outlineDecorative | ধারক সীমানা |
theme.color.primary | লিঙ্ক, লোডিং সূচক, ওভারভিউ আইকন |
theme.color.onSurface | শিরোনাম, সংলাপের বিষয়বস্তু |
theme.color.onSurfaceVariant | স্থান তথ্য |
theme.color.secondaryContainer | বোতাম ব্যাকগ্রাউন্ড |
theme.color.onSecondaryContainer | বোতাম পাঠ্য এবং আইকন |
theme.color.neutralContainer | তারিখ ব্যাজ পর্যালোচনা করুন, স্থানধারক আকার লোড হচ্ছে |
theme.color.onNeutralContainer | পর্যালোচনার তারিখ, লোডিং ত্রুটি৷ |
theme.color.positiveContainer | উপলব্ধ EV চার্জার ব্যাজ |
theme.color.onPositiveContainer | উপলব্ধ EV চার্জার ব্যাজ সামগ্রী |
theme.color.positive | "খুলুন" এখন লেবেল রাখুন |
theme.color.negative | "বন্ধ" এখন লেবেল রাখুন |
theme.color.info | অ্যাক্সেসযোগ্য প্রবেশ আইকন |
theme.measurement.borderWidthButton | মানচিত্র এবং ঠিক আছে বোতাম খুলুন |
| টাইপোগ্রাফি | |
theme.font.bodySmall | স্থান তথ্য |
theme.font.bodyMedium | স্থান তথ্য, ডায়ালগ বিষয়বস্তু |
theme.font.labelMedium | ব্যাজ সামগ্রী |
theme.font.labelLarge | বোতাম সামগ্রী |
theme.font.headlineMedium | ডায়ালগ শিরোনাম |
theme.font.displaySmall | স্থানের নাম |
theme.font.titleSmall | স্থানের নাম |
| ব্যবধান | |
theme.measurement.spacingExtraSmall | |
theme.measurement.spacingSmall | |
theme.measurement.spacingMedium | |
theme.measurement.spacinglarge | |
theme.measurement.spacingExtraLarge | |
theme.measurement.spacingTwoExtraLarge | |
| পরিমাপ | |
borderWidth | ধারক |
theme.measurement.borderWidthButton | |
| আকৃতি | |
theme.shape.cornerRadius | ধারক |
theme.shape.cornerRadiusButton | মানচিত্র এবং ঠিক আছে বোতামে খুলুন (বৃত্তাকার আইকন বোতাম বাদ) |
theme.shape.cornerRadiusThumbnail | থাম্বনেইল ছবি রাখুন |
theme.shape.cornerRadiusCollageOuter | মিডিয়া কোলাজ |
theme.shape.cornerRadiusCard | প্লেস কার্ড, ইউজার রিভিউ কার্ড |
theme.shape.cornerRadiusDialog | Google Maps প্রকাশের ডায়ালগ |
| গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন | |
attribution.lightModeColor | হালকা থিম গুগল ম্যাপ অ্যাট্রিবিউশন এবং ডিসক্লোজার বোতাম (সাদা, ধূসর এবং কালো জন্য enums) |
attribution.darkModeColor | ডার্ক থিম গুগল ম্যাপ অ্যাট্রিবিউশন এবং ডিসক্লোজার বোতাম (সাদা, ধূসর এবং কালো জন্য enums) |
স্থান বিবরণ উপাদান উদাহরণ বিভাগে উদাহরণ দেখুন.
প্রস্থ এবং উচ্চতা কাস্টমাইজেশন
কমপ্যাক্ট ভিউ
প্রস্তাবিত প্রস্থ:
- উল্লম্ব অভিযোজন: 180 পিক্সেল এবং 300 পিক্সেলের মধ্যে।
- অনুভূমিক অভিযোজন: 180 পিক্সেল এবং 500 পিক্সেলের মধ্যে।
সর্বোত্তম অনুশীলন হল কমপ্যাক্ট ভিউয়ের জন্য উচ্চতা নির্ধারণ না করা। এটি উইন্ডোতে থাকা বিষয়বস্তুকে উচ্চতা সেট করার অনুমতি দেবে, সমস্ত তথ্য প্রদর্শনের অনুমতি দেবে।
160 পিক্সেলের চেয়ে ছোট প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে।
সম্পূর্ণ ভিউ
সম্পূর্ণ দর্শনের জন্য, প্রস্তাবিত প্রস্থ হল 250 পিক্সেল এবং 450 পিক্সেলের মধ্যে৷ 250 পিক্সেলের চেয়ে ছোট প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে।
আপনি উপাদানের উচ্চতা সেট করতে পারেন: উল্লম্ব স্থানের বিবরণ দৃশ্যটি বরাদ্দকৃত স্থানের মধ্যে উল্লম্বভাবে স্ক্রোল করবে।
সর্বোত্তম অনুশীলন হল সম্পূর্ণ দর্শনের জন্য একটি উচ্চতা সেট করা। এটি উইন্ডোতে থাকা বিষয়বস্তুকে সঠিকভাবে স্ক্রোল করার অনুমতি দেবে।
অ্যাট্রিবিউশন রং
Google Maps-এর পরিষেবার শর্তাবলীর জন্য আপনাকে Google Maps অ্যাট্রিবিউশনের জন্য তিনটি ব্র্যান্ডের রঙের মধ্যে একটি ব্যবহার করতে হবে। কাস্টমাইজেশন পরিবর্তন করা হলে এই অ্যাট্রিবিউশনটি দৃশ্যমান এবং অ্যাক্সেসযোগ্য হতে হবে।
আমরা বেছে নেওয়ার জন্য 3টি ব্র্যান্ডের রঙ অফার করি যা হালকা এবং অন্ধকার থিমের জন্য স্বাধীনভাবে সেট করা যেতে পারে:
- হালকা থিম:
attributionColorLightসাদা, ধূসর এবং কালোর জন্য enums সহ। - ডার্ক থিম:
attributionColorDarkসাদা, ধূসর এবং কালোর জন্য enums সহ গাঢ়।
স্থান বিবরণ উপাদান উদাহরণ
উল্লম্ব বিন্যাস সহ একটি সম্পূর্ণ দৃশ্য তৈরি করুন
সুইফট
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 )
শৈলী বৈশিষ্ট্য কাস্টমাইজ করুন
এই নমুনা দেখায় কিভাবে একটি সম্পূর্ণ বা কমপ্যাক্ট ভিউ এর ডিফল্ট শৈলী বৈশিষ্ট্য কাস্টমাইজ করা যায়।
সুইফট
// 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) }