سبک‌بندی نوشتار

ترکیب‌پذیر 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
• List از SpanStyleRange، معادل سبک‌پردازی درون‌خطی با محدوده مکان در مقدار نوشتار
• List از ParagraphStyleRange، مشخص‌کننده تراز نوشتار، جهت نوشتار، ارتفاع خط، و سبک تورفتگی نوشتار

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

نمایش HTML با پیوندها در نوشتار

از AnnotatedString.fromHtml() برای نمایش نوشتار با قالب HTML با پیوندهای کلیک‌کردنی در برنامه Jetpack Compose استفاده کنید. این تابع رشته‌ای با برچسب‌های HTML را به AnnotatedString تبدیل می‌کند و امکان مدیریت پیوند و سبک‌دهی را فراهم می‌کند.

مثال: HTML با پیوند سبک‌دار

این گزیده نوشتار قالب‌بندی‌شده با HTML را با پیوند ارائه می‌کند و سبک خاصی را به پیوند اعمال می‌کند:

@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 سبک پیوندها را در HTML تعریف می‌کند. SpanStyle تزئین نوشتار، سبک قلم، و رنگ پیوندها را تنظیم می‌کند.

• عنصر ترکیبی Text AnnotatedString حاصل را نمایش می‌دهد.

نتیجه

این تکه‌کد «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

شما به این طرح رنگی یا سبک رنگ‌آمیزی خاص محدود نیستید. اگرچه مثال ساده‌ای برای برجسته کردن ارائه کرده‌ایم، از هریک از قلم‌موهای داخلی یا حتی فقط از SolidColor برای بهبود نوشتارتان استفاده کنید.

یکپارچگی

ازآنجاکه می‌توانید از Brush در کنار TextStyle و SpanStyle استفاده کنید، ادغام با TextField و buildAnnotatedString یکپارچه است.

برای کسب اطلاعات بیشتر درباره استفاده از API قلم‌مو در TextField، سبک ورودی با 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

ماتی در بازه نوشتار

برای تنظیم کردن کدورت یک محدوده خاص از نوشتار، از پارامتر اختیاری SpanStylealpha استفاده کنید. از همان قلم‌مو برای هر دو بخش نوشتار استفاده کنید و پارامتر آلفا را در بازه مربوطه تغییر دهید. در نمونه کد، اولین بازه نوشتار با نیمی از ماتی (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

اعمال جلوه گردان به نوشتار

می‌توانید اصلاح‌گر 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
• پشتیبانی از چندین پیوند در یک رشته متن