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

আপনি এই স্থানগুলির UI কিট উপাদানগুলির রঙ, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং কোণগুলি কাস্টমাইজ করতে পারেন:
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) |
অ্যাট্রিবিউশন রং

Google Maps-এর পরিষেবার শর্তাবলীর জন্য আপনাকে Google Maps অ্যাট্রিবিউশনের জন্য তিনটি ব্র্যান্ডের রঙের মধ্যে একটি ব্যবহার করতে হবে। কাস্টমাইজেশন পরিবর্তন করা হলে এই অ্যাট্রিবিউশনটি দৃশ্যমান এবং অ্যাক্সেসযোগ্য হতে হবে।
আমরা বেছে নেওয়ার জন্য 3টি ব্র্যান্ডের রঙ অফার করি যা হালকা এবং অন্ধকার থিমের জন্য স্বাধীনভাবে সেট করা যেতে পারে:
- হালকা থিম:
attributionColorLight
সাদা, ধূসর এবং কালোর জন্য enums সহ। - ডার্ক থিম:
attributionColorDark
সাদা, ধূসর এবং কালোর জন্য enums সহ গাঢ়।
উদাহরণ
এই ফাংশনটি একটি থিম তৈরি করে যা ডিফল্ট শৈলী বৈশিষ্ট্যগুলিকে ওভাররাইড করে। যে কোনো থিম বৈশিষ্ট্য ওভাররাইড করা হয় না ডিফল্ট শৈলী ব্যবহার করে।সুইফট
// 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 }