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 |
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 |
650 |
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)
}
}