टेक्स्ट की शैली

Text कंपोज़ेबल में कॉन्टेंट को स्टाइल देने के लिए कई वैकल्पिक पैरामीटर मौजूद हैं. नीचे, हमने टेक्स्ट के साथ इस्तेमाल के सबसे सामान्य उदाहरणों को शामिल करने वाले पैरामीटर दिए हैं. Text के सभी पैरामीटर के लिए, टेक्स्ट लिखें सोर्स कोड.

जब भी आप इनमें से कोई एक पैरामीटर सेट करते हैं, तो स्टाइल को पूरे टेक्स्ट मान. अगर आपको एक ही लाइन में एक से ज़्यादा स्टाइल लागू करने हों या पैराग्राफ़ में, एक से ज़्यादा इनलाइन पर सेक्शन देखें स्टाइल.

सामान्य टेक्स्ट स्टाइलिंग

इन सेक्शन में, टेक्स्ट को स्टाइल करने के सामान्य तरीकों के बारे में बताया गया है.

टेक्स्ट का रंग बदलें

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

शब्द

टेक्स्ट साइज़ बदलना

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

शब्द

टेक्स्ट को इटैलिक करें

टेक्स्ट को इटैलिक करने के लिए fontStyle पैरामीटर का इस्तेमाल करें (या कोई दूसरा सेट करें FontStyle).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

शब्द

टेक्स्ट को बोल्ड करें

टेक्स्ट को बोल्ड करने के लिए, fontWeight पैरामीटर का इस्तेमाल करें या कोई दूसरा FontWeight सेट करें.

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

शब्द

शैडो जोड़ें

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
            )
        )
    )
}
TextSnippets.kt

शब्द

टेक्स्ट में एक से ज़्यादा शैलियां जोड़ें

एक ही 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")
        }
    )
}
TextSnippets.kt

शब्द

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
        )
    )
)
TextSnippets.kt

रंगों की तय सूची के साथ Brush API के `lineargradient` फ़ंक्शन का इस्तेमाल करना.
दूसरी इमेज. रंगों की तय सूची के साथ ब्रश एपीआई के linearGradient फ़ंक्शन का इस्तेमाल करना.

इनमें से किसी भी कलर स्कीम या कलर स्कीम का इस्तेमाल किया जा सकता है. हालांकि हमने हाइलाइट करने के लिए एक आसान उदाहरण दिया है. पहले से मौजूद अपने टेक्स्ट को बेहतर बनाने के लिए, ब्रश या सिर्फ़ 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.")
    }
)
TextSnippets.kt

टेक्स्ट की स्टाइल के तौर पर, लीनियर ग्रेडिएंट के साथ डिफ़ॉल्ट ब्रश का इस्तेमाल करना.
चौथी इमेज. Text की स्टाइल के तौर पर linearGradient वाले डिफ़ॉल्ट ब्रश का इस्तेमाल किया जा रहा है.
टेक्स्ट में अपारदर्शिता

टेक्स्ट के किसी खास स्पैन की ओपैसिटी (अपारदर्शिता) को घटाने या बढ़ाने के लिए, 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 ❤️")
    }
}
TextSnippets.kt

टेक्स्ट के एक हिस्से में ओपैसिटी (ओपैसिटी) जोड़ने के लिए, लीनियर ग्रेडिएंट के साथ-साथ बिल्डऐनोटेटेड स्ट्रिंग और SpanStyle के ऐल्फ़ा पैरामीटर का इस्तेमाल किया जाता है.
पांचवीं इमेज. टेक्स्ट के पूरे हिस्से में ओपैसिटी जोड़ने के लिए, linearGradient के साथ buildAnnotatedString और SpanStyle के ऐल्फ़ा पैरामीटर का इस्तेमाल किया जा रहा है.

अन्य संसाधन

पसंद के मुताबिक बनाने के ज़्यादा उदाहरण देखने के लिए, 'लिखने के लिए टेक्स्ट तैयार करने की सुविधा में बदलाव करना' देखें रंग भरने के लिए ब्लॉग पोस्ट. अगर आपको हमारी वेबसाइट पर, 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
        )
    }
}
TextSnippets.kt

छठी इमेज. टेक्स्ट पर basicMarquee मॉडिफ़ायर लागू किया गया.