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
की मदद से, स्टाइल की बेहतर सुविधाएं चालू करना
टेक्स्ट की स्टाइल को ज़्यादा बेहतर बनाने के लिए, TextStyle
और SpanStyle
के साथ Brush
एपीआई का इस्तेमाल किया जा सकता है. आम तौर पर, जहां TextStyle
या SpanStyle
का इस्तेमाल किया जाता है वहां अब Brush
का भी इस्तेमाल किया जा सकता है.
टेक्स्ट की स्टाइल तय करने के लिए ब्रश का इस्तेमाल करना
TextStyle
में पहले से मौजूद ब्रश का इस्तेमाल करके, अपना टेक्स्ट कॉन्फ़िगर करें. उदाहरण के लिए, अपने टेक्स्ट के लिए linearGradient
ब्रश को इस तरह कॉन्फ़िगर किया जा सकता है:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
इनमें से किसी भी कलर स्कीम या कलर स्कीम का इस्तेमाल किया जा सकता है. हमने हाइलाइट करने के लिए एक आसान उदाहरण दिया है. हालांकि, अपने टेक्स्ट को बेहतर बनाने के लिए, पहले से मौजूद किसी भी ब्रश या सिर्फ़ SolidColor
का इस्तेमाल करें.
इंटिग्रेशन
Brush
का इस्तेमाल TextStyle
और SpanStyle
, दोनों के साथ किया जा सकता है. इसलिए, 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
हमारे ऐनिमेशन एपीआई के साथ कैसे इंटिग्रेट होता है, तो Compose में ब्रश टेक्स्ट कलर करने की सुविधा को ऐनिमेट करना देखें.
टेक्स्ट पर मार्की इफ़ेक्ट लागू करना
ऐनिमेशन वाला स्क्रोलिंग इफ़ेक्ट पाने के लिए, किसी भी कॉम्पोज़ेबल पर basicMarquee
मॉडिफ़ायर लागू किया जा सकता है. मार्की इफ़ेक्ट तब दिखता है, जब कॉन्टेंट उपलब्ध सीमाओं में फ़िट न हो. डिफ़ॉल्ट रूप से, basicMarquee
में कुछ कॉन्फ़िगरेशन (जैसे कि वेलोसिटी और शुरुआती देरी) सेट होते हैं. हालांकि, इफ़ेक्ट को पसंद के मुताबिक बनाने के लिए, इन पैरामीटर में बदलाव किया जा सकता है.
यहां दिया गया स्निपेट, Text
कॉम्पोज़ेबल पर मार्की इफ़ेक्ट लागू करता है:
@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 में Material Design 2
- ग्राफ़िक्स मॉडिफ़ायर