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

Text कंपोज़ेबल में, कॉन्टेंट को स्टाइल करने के लिए कई वैकल्पिक पैरामीटर होते हैं. यहां हमने उन पैरामीटर की सूची दी है जो टेक्स्ट के साथ इस्तेमाल के सबसे सामान्य उदाहरणों को कवर करते हैं. Text के सभी पैरामीटर के लिए, Compose 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 वैल्यू
• List का SpanStyleRange, जो टेक्स्ट वैल्यू में पोज़िशन रेंज के साथ इनलाइन स्टाइलिंग के बराबर है
• 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

टेक्स्ट में लिंक के साथ एचटीएमएल दिखाना

Jetpack Compose ऐप्लिकेशन में, क्लिक किए जा सकने वाले लिंक के साथ एचटीएमएल फ़ॉर्मैट में टेक्स्ट दिखाने के लिए, AnnotatedString.fromHtml() का इस्तेमाल करें. यह फ़ंक्शन, एचटीएमएल टैग वाली स्ट्रिंग को AnnotatedString में बदलता है. इससे स्टाइलिंग और लिंक को मैनेज करने की सुविधा मिलती है.

उदाहरण: स्टाइल वाले लिंक के साथ एचटीएमएल

यह स्निपेट, एचटीएमएल फ़ॉर्मैट में टेक्स्ट को लिंक के साथ रेंडर करता है. साथ ही, लिंक पर खास स्टाइल लागू करता है:

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

कोड के बारे में अहम बातें

• AnnotatedString.fromHtml(), htmlText स्ट्रिंग को AnnotatedString में बदलता है. linkStyles पैरामीटर, लिंक के दिखने के तरीके को पसंद के मुताबिक बनाता है.

• TextLinkStyles, एचटीएमएल में मौजूद लिंक की स्टाइल तय करता है. SpanStyle, लिंक के लिए टेक्स्ट डेकोरेशन, फ़ॉन्ट स्टाइल, और रंग सेट करता है.

• Text कंपोज़ेबल, नतीजे के तौर पर AnnotatedString दिखाता है.

नतीजा

यह स्निपेट, "Jetpack Compose" को क्लिक किए जा सकने वाले लिंक के तौर पर चालू करता है. इसे नीले रंग में स्टाइल किया गया है, अंडरलाइन किया गया है, और इटैलिक किया गया है:

दूसरी इमेज. एक हेडिंग और पैराग्राफ़, जिसमें पैराग्राफ़ में मौजूद 'Jetpack Compose' पर क्लिक किया जा सकता है. यह एक स्टाइल वाला लिंक है.

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 फ़ंक्शन का इस्तेमाल करके, रंगों की तय की गई सूची के साथ.

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

पांचवीं इमेज. buildAnnotatedString और SpanStyle के ऐल्फ़ा पैरामीटर का इस्तेमाल करके, टेक्स्ट के किसी हिस्से को ओपेसिटी देने के लिए linearGradient का इस्तेमाल करना.

टेक्स्ट पर मार्की इफ़ेक्ट लागू करना

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

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

अन्य संसाधन

• Compose में टेक्स्ट को कलर करने की सुविधा के बारे में जानकारी
• Compose में टेक्स्ट के रंग को ऐनिमेट करने वाला ब्रश
• टेक्स्ट की एक स्ट्रिंग में कई लिंक जोड़ना