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

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 वैल्यू
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

ये शब्द

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

अपने 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 , लिंक के लिए टेक्स्ट डेकोरेशन, फ़ॉन्ट स्टाइल, और रंग सेट करता है.
The Text कंपोज़ेबल, नतीजे में मिलने वाली AnnotatedString को दिखाता है.

नतीजा

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

'Jetpack Compose' H1 हेडिंग के बाद, 'Jetpack Compose की मदद से बेहतर ऐप्लिकेशन बनाएँ' लिखा गया है. इसमें Jetpack Compose पर क्लिक किया जा सकता है. इसे नीले रंग, अंडरलाइन, और इटैलिक स्टाइल में लिखा गया है. — **दूसरी इमेज.** एक हेडिंग और पैराग्राफ़. इसमें पैराग्राफ़ में मौजूद 'Jetpack Compose', क्लिक किया जा सकने वाला, स्टाइल वाला लिंक है.

`Brush` की मदद से, बेहतर स्टाइलिंग की सुविधा चालू करना

टेक्स्ट को स्टाइल करने के लिए, Brush API के साथ 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` फ़ंक्शन का इस्तेमाल करके, रंगों की तय की गई सूची के साथ. — **तीसरी इमेज.** रंगों की तय की गई सूची के साथ, Brush API के `linearGradient` फ़ंक्शन का इस्तेमाल करना.

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

इंटिग्रेशन

Brush का इस्तेमाल TextStyle और SpanStyle, दोनों के साथ किया जा सकता है. इसलिए, TextField और buildAnnotatedString के साथ इसका इंटिग्रेशन आसानी से किया जा सकता है.

ब्रश एपीआई का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, TextField देखें Brush API की मदद से इनपुट को स्टाइल करना.

`SpanStyle` का इस्तेमाल करके, अन्य स्टाइलिंग करना

टेक्स्ट के किसी हिस्से पर ब्रश लागू करना

अगर आपको अपने टेक्स्ट के सिर्फ़ कुछ हिस्सों पर ब्रश लागू करना है, तो buildAnnotatedString और SpanStyle API का इस्तेमाल करें. साथ ही, अपनी पसंद का ब्रश और ग्रेडिएंट इस्तेमाल करें.

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's वैकल्पिक 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 का इस्तेमाल करना. — **पांचवी इमेज.** टेक्स्ट के किसी हिस्से में ओपैसिटी जोड़ने के लिए, `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 मॉडिफ़ायर.

अन्य संसाधन

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर, लिंक का टेक्स्ट दिखता है
पैराग्राफ़ को स्टाइल करना
Compose में Material Design 2 का इस्तेमाल करना
ग्राफ़िक्स मॉडिफ़ायर

टेक्स्ट को स्टाइल करने के सामान्य तरीके

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

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

टेक्स्ट को इटैलिक करना

टेक्स्ट को बोल्ड करना

शैडो जोड़ना

टेक्स्ट में एक से ज़्यादा स्टाइल जोड़ना

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

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

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

नतीजा

Brush की मदद से, बेहतर स्टाइलिंग की सुविधा चालू करना

टेक्स्ट को स्टाइल करने के लिए, ब्रश का इस्तेमाल करना

इंटिग्रेशन

SpanStyle का इस्तेमाल करके, अन्य स्टाइलिंग करना

टेक्स्ट के किसी हिस्से पर ब्रश लागू करना

टेक्स्ट के किसी हिस्से में ओपैसिटी सेट करना

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

अन्य संसाधन

आपके लिए सुझाव

`Brush` की मदद से, बेहतर स्टाइलिंग की सुविधा चालू करना

`SpanStyle` का इस्तेमाल करके, अन्य स्टाइलिंग करना