Jetpack Compose Glimmer-এ, Text কম্পোনেন্ট আপনাকে বিভিন্ন টেক্সট
প্রপার্টি সেট করতে দেয়, যেমন রঙ, ফন্ট সাইজ, ফন্ট স্টাইল, ফন্ট ওয়েট, ফন্ট ফ্যামিলি, লেটার
স্পেসিং ও টেক্সট অ্যালাইনমেন্ট।
Jetpack Compose Glimmer Text অনন্য কারণ এটি বুদ্ধিমানের মতো রঙ ম্যাচিং ম্যানেজ করে। যেমন, কোনও কালার ওভাররাইড নির্দিষ্ট করা না থাকলে, টেক্সট ডিফল্ট হিসেবে সেটি যে সবচেয়ে কাছের সারফেসে রয়েছে তার দেওয়া কন্টেন্ট কালার ব্যবহার করে।
যেমন: বক্সের মধ্যে টেক্সট হেডিং তৈরি করা
@Composable fun TextSample() { Text( text = "Hello Glimmer", style = GlimmerTheme.typography.titleLarge ) }
কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট
- কোনও রঙ নির্দিষ্ট করা না থাকার কারণে, এই টেক্সটটি সবচেয়ে কাছের সারফেসের দিকে তাকায় যাতে সবচেয়ে ভালোভাবে পড়া যায় এমন রঙ (সাধারণত সাদা) বেছে নেওয়া যায়।
ঘড়ি সারানো
Jetpack Compose Glimmer-এ টাইপোগ্রাফি স্কেল উল্লেখযোগ্যভাবে
স্ট্যান্ডার্ড মোবাইল মেটেরিয়াল ডিজাইনের চেয়ে বড়। TitleLarge ও BodyLarge-এর মতো স্টাইল
দুটিই 30.sp এবং ক্যাপশন হল 18.sp:
| স্টাইল | সাইজ (sp) | ওজন | লাইনের উচ্চতা |
|---|---|---|---|
titleLarge |
৩০ |
750 |
36.sp |
titleMedium |
24 |
750 |
28.sp |
titleSmall |
20 |
750 |
28.sp |
bodyLarge |
৩০ |
৫২০ |
36.sp |
bodyMedium |
24 |
৫২০ |
36.sp |
bodySmall |
20 |
৫২০ |
28.sp |
ক্যাপশন |
18 |
৬৫০ |
24.sp |
Google Sans Flex ব্যবহার করা
Google Sans Flex হল একটি পরিবর্তনযোগ্য ফন্ট যা বিশেষভাবে AI গ্লাসের জন্য বেছে নেওয়া হয়েছে এবং এটি Jetpack Compose Glimmer-এর অংশ হিসেবে প্রদান করা হয়েছে। ফন্টের গোলাকার কোণ ও অ্যাডজাস্ট করা যায় এমন অ্যাক্সিস, অপটিক্যাল সাইজিংয়ের জন্য আদর্শ। এর ফলে টেক্সট এক ঝলকেই পড়া যায় এবং তা স্পষ্ট থাকে। সম্ভব হলে, আপনার অ্যাপ ও সিস্টেমের মধ্যে ব্যবহারকারীদের জন্য সামঞ্জস্য উন্নত করতে, ডিসপ্লে গ্লাসে দেখানো সব টেক্সটের জন্য Google Sans Flex ব্যবহার করুন।
Google Sans Flex ব্যবহার করতে, আপনার অ্যাপের
ডিপেন্ডেন্সিতে glimmer-google-fonts লাইব্রেরি যোগ করুন, তারপর GlimmerTheme-এ ফন্টটি গ্লোবালি প্রয়োগ করুন:
@Composable
fun GoogleSansFlexTypographySample() {
val typography = createGoogleSansFlexTypography()
GlimmerTheme(typography = typography) {
Text("Hello World", style = GlimmerTheme.typography.titleLarge)
}
}