Jetpack Compose Glimmer में, Text कॉम्पोनेंट की मदद से, टेक्स्ट की अलग-अलग प्रॉपर्टी सेट की जा सकती हैं. जैसे, रंग, फ़ॉन्ट का साइज़, फ़ॉन्ट स्टाइल, फ़ॉन्ट वेट, फ़ॉन्ट फ़ैमिली, लेटर स्पेसिंग, और टेक्स्ट अलाइनमेंट.
Jetpack Compose Glimmer Text यूनीक है, क्योंकि यह रंग मिलान को बेहतर तरीके से मैनेज करता है. उदाहरण के लिए, अगर रंग बदलने की सुविधा के बारे में नहीं बताया गया है, तो टेक्स्ट का रंग डिफ़ॉल्ट रूप से, उस कॉन्टेंट के रंग पर सेट हो जाता है जो उसके सबसे नज़दीकी सर्फ़ेस पर मौजूद होता है.
उदाहरण: बॉक्स में टेक्स्ट हेडिंग बनाना
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
कोड के बारे में अहम बातें
- कोई रंग तय न होने की वजह से, यह टेक्स्ट सबसे नज़दीकी सतह के हिसाब से सबसे सही रंग (आम तौर पर, सफ़ेद) चुनता है.
साइज़ बदलना
Jetpack Compose Glimmer में टाइपोग्राफ़ी स्केल, स्टैंडर्ड मोबाइल मटीरियल डिज़ाइन से काफ़ी बड़ा होता है. TitleLarge और BodyLarge जैसी स्टाइल, दोनों 30.sp हैं. साथ ही, कैप्शन 18.sp है:
| शैली | साइज़ (sp) | वज़न | लाइन की ऊंचाई |
|---|---|---|---|
titleLarge |
30 |
750 |
36.sp |
titleMedium |
24 |
750 |
28.sp |
titleSmall |
20 |
750 |
28.sp |
bodyLarge |
30 |
520 |
36.sp |
bodyMedium |
24 |
520 |
36.sp |
bodySmall |
20 |
520 |
28.sp |
कैप्शन |
18 |
टर्किश लीरा |
24.sp |
Google Sans Flex का इस्तेमाल करना
Google Sans Flex एक वैरिएबल फ़ॉन्ट है. इसे खास तौर पर एआई चश्मे के लिए चुना गया है. यह 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) } }