Text
कंपोज़ेबल में कॉन्टेंट को स्टाइल देने के लिए कई वैकल्पिक पैरामीटर मौजूद हैं.
नीचे, हमने टेक्स्ट के साथ इस्तेमाल के सबसे सामान्य उदाहरणों को शामिल करने वाले पैरामीटर दिए हैं.
Text
के सभी पैरामीटर के लिए, टेक्स्ट लिखें
सोर्स कोड.
जब भी आप इनमें से कोई एक पैरामीटर सेट करते हैं, तो स्टाइल को पूरे टेक्स्ट मान. अगर आपको एक ही लाइन में एक से ज़्यादा स्टाइल लागू करने हों या पैराग्राफ़ में, एक से ज़्यादा इनलाइन पर सेक्शन देखें स्टाइल.
सामान्य टेक्स्ट स्टाइलिंग
इन सेक्शन में, टेक्स्ट को स्टाइल करने के सामान्य तरीकों के बारे में बताया गया है.
टेक्स्ट का रंग बदलें
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
टेक्स्ट साइज़ बदलना
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
टेक्स्ट को इटैलिक करें
टेक्स्ट को इटैलिक करने के लिए fontStyle
पैरामीटर का इस्तेमाल करें (या कोई दूसरा सेट करें
FontStyle
).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
टेक्स्ट को बोल्ड करें
टेक्स्ट को बोल्ड करने के लिए, fontWeight
पैरामीटर का इस्तेमाल करें या कोई दूसरा FontWeight
सेट करें.
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
शैडो जोड़ें
style
पैरामीटर की मदद से, TextStyle
टाइप का ऑब्जेक्ट सेट किया जा सकता है
और कई पैरामीटर कॉन्फ़िगर करें, जैसे कि शैडो.
Shadow
को एक रंग मिलता है
शैडो, ऑफ़सेट या जहां यह Text
के हिसाब से स्थित हो और
ब्लर रेडियस की वजह से वह धुंधला दिख रहा है.
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
टेक्स्ट में एक से ज़्यादा शैलियां जोड़ें
एक ही Text
में अलग-अलग स्टाइल सेट करने के लिए
लिखने के लिए, AnnotatedString
का इस्तेमाल करें,
स्ट्रिंग, जिसे आर्बिट्रेरी एनोटेशन की स्टाइल के साथ एनोटेट किया जा सकता है.
AnnotatedString
एक डेटा क्लास है जिसमें ये शामिल हैं:
Text
की वैल्यूSpanStyleRange
काList
, पोज़िशन के साथ इनलाइन स्टाइलिंग के बराबर टेक्स्ट वैल्यू के अंदर की रेंजParagraphStyleRange
काList
, जिसमें टेक्स्ट अलाइनमेंट और टेक्स्ट बताया गया है दिशा, लाइन की ऊंचाई, और टेक्स्ट इंडेंट स्टाइलिंग
TextStyle
इस्तेमाल के लिए है
Text
कंपोज़ेबल में, जबकि SpanStyle
में
और ParagraphStyle
AnnotatedString
में इस्तेमाल के लिए है. इसमें एक से ज़्यादा शैलियों के बारे में ज़्यादा जानकारी के लिए
किसी पैराग्राफ़ को खोजने पर, पैराग्राफ़ में एक से ज़्यादा स्टाइल जोड़ना को देखें.
AnnotatedString
में टाइप-सेफ़” है
बिल्डर
इसे आसानी से बनाने के लिए: buildAnnotatedString
.
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
Brush
के साथ बेहतर स्टाइलिंग चालू करें
ज़्यादा बेहतर टेक्स्ट स्टाइलिंग चालू करने के लिए, Brush
एपीआई का इस्तेमाल
TextStyle
और SpanStyle
. ऐसी कोई भी जगह जहां आम तौर पर
TextStyle
या SpanStyle
का इस्तेमाल करें, तो अब आप Brush
का भी इस्तेमाल कर सकते हैं.
टेक्स्ट स्टाइलिंग के लिए ब्रश का इस्तेमाल करें
TextStyle
में पहले से मौजूद ब्रश का इस्तेमाल करके, अपने टेक्स्ट को कॉन्फ़िगर करें. उदाहरण के लिए, आपके
आपके टेक्स्ट पर linearGradient
ब्रश को इस तरह कॉन्फ़िगर कर सकता है:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
इनमें से किसी भी कलर स्कीम या कलर स्कीम का इस्तेमाल किया जा सकता है. हालांकि
हमने हाइलाइट करने के लिए एक आसान उदाहरण दिया है. पहले से मौजूद
अपने टेक्स्ट को बेहतर बनाने के लिए, ब्रश या सिर्फ़ SolidColor
का इस्तेमाल करें.
इंटिग्रेशन
आपके पास TextStyle
और SpanStyle
, दोनों के साथ Brush
का इस्तेमाल करने का विकल्प है, इसलिए
TextField
और buildAnnotatedString
के साथ इंटिग्रेशन आसान है.
TextField
में ब्रश एपीआई का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, यहां देखें
ब्रश एपीआई की मदद से स्टाइल इनपुट.
SpanStyle
का इस्तेमाल करके बनाई गई अतिरिक्त स्टाइलिंग
टेक्स्ट के एक हिस्से पर ब्रश का इस्तेमाल करें
अगर आपको टेक्स्ट के सिर्फ़ हिस्सों पर ब्रश लगाना है, तो
buildAnnotatedString
और SpanStyle
एपीआई, आपके ब्रश के साथ
और विकल्पों के लिए ग्रेडिएंट का इस्तेमाल करें.
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
टेक्स्ट में अपारदर्शिता
टेक्स्ट के किसी खास स्पैन की ओपैसिटी (अपारदर्शिता) को घटाने या बढ़ाने के लिए, SpanStyle
alpha
पैरामीटर ज़रूरी नहीं है. इसके लिए, एक ही ब्रश का इस्तेमाल करें
साथ ही, टेक्स्ट के दोनों हिस्सों को शामिल कर सकता है. साथ ही, ऐल्फ़ा पैरामीटर को उससे जुड़े स्पैन में बदल सकता है.
कोड सैंपल में, टेक्स्ट की पहली स्पैन के तौर पर, ओपैसिटी का आधा हिस्सा दिखता है
(alpha =.5f
) और दूसरा विकल्प पूरी ओपैसिटी (alpha = 1f
) पर दिखता है.
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
अन्य संसाधन
पसंद के मुताबिक बनाने के ज़्यादा उदाहरण देखने के लिए, 'लिखने के लिए टेक्स्ट तैयार करने की सुविधा में बदलाव करना' देखें
रंग भरने के लिए ब्लॉग पोस्ट. अगर आपको हमारी वेबसाइट पर,
Brush
हमारे ऐनिमेशन एपीआई के साथ कैसे इंटिग्रेट होता है, देखें ब्रश के टेक्स्ट का ऐनिमेशन
लिखें.
टेक्स्ट पर मार्की इफ़ेक्ट लागू करें
basicMarquee
मॉडिफ़ायर को किसी भी कंपोज़ेबल में लागू किया जा सकता है
जिससे ऐनिमेशन वाला स्क्रोलिंग इफ़ेक्ट बनाया जा सकता है. मार्की इफ़ेक्ट तब लागू होता है, जब
की चौड़ाई बहुत ज़्यादा है. डिफ़ॉल्ट रूप से, basicMarquee
के पास
कुछ कॉन्फ़िगरेशन (जैसे कि वेलोसिटी और शुरुआती देरी) सेट होते हैं, लेकिन अगर
इफ़ेक्ट को पसंद के मुताबिक बनाने के लिए इन पैरामीटर में बदलाव करें.
नीचे दिया गया स्निपेट, Text
कंपोज़ेबल पर बेसिक मार्की इफ़ेक्ट लागू करता है:
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
छठी इमेज. टेक्स्ट पर basicMarquee
मॉडिफ़ायर लागू किया गया.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- स्टाइल पैराग्राफ़
- Compose में मटीरियल डिज़ाइन 2
- ग्राफ़िक्स मॉडिफ़ायर