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

Text composable دارای چندین پارامتر اختیاری برای سبک‌دهی به محتوای خود است. در زیر، پارامترهایی را فهرست کرده‌ایم که رایج‌ترین موارد استفاده از نوشتار را پوشش می‌دهند. برای همه پارامترهای Text، به کد منبع Compose 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
  • 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")
        }
    )
}

کلمات

نمایش 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
    )
}

نکات کلیدی درباره کد

  • ‫AnnotatedString.fromHtml() رشته htmlText را به AnnotatedString تبدیل می‌کند. پارامتر linkStyles ظاهر پیوند را سفارشی می‌کند.

  • TextLinkStyles سبک پیوندها را در HTML تعریف می‌کند. SpanStyle تزیین نوشتار، سبک قلم، و رنگ پیوندها را تنظیم می‌کند.

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

نتیجه

این قطعه کد «Jetpack Compose» را به‌عنوان پیوند کلیک‌کردنی فعال می‌کند، با رنگ آبی، زیرخط‌دار، و مورب:

عنوان H1 «Jetpack Compose» و به‌دنبال آن «ساختن برنامه‌های بهتر با Jetpack Compose» که 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
        )
    )
)

استفاده از تابع `linearGradient` در Brush API با فهرست مشخصی از رنگ‌ها.
شکل ۳. استفاده از تابع linearGradient Brush API با فهرست تعریف‌شده‌ای از رنگ‌ها.

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

یکپارچگی‌ها

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

برای کسب اطلاعات بیشتر درباره استفاده از Brush API در TextField، سبک ورودی با Brush API را ببینید.

سبک‌بندی بیشتر بااستفاده از 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.")
    }
)

استفاده از قلم‌موی پیش‌فرض با linearGradient به‌عنوان سبکی برای Text.
شکل ۴. درحال استفاده از قلم‌موی پیش‌فرض با linearGradient به‌عنوان سبک برای Text.
ماتی در بخشی از نوشتار

برای تنظیم کردن میزان ماتی بخش خاصی از نوشتار، از پارامتر اختیاری alpha در SpanStyle استفاده کنید. از یک قلم‌مو برای هر دو بخش نوشتار استفاده کنید و پارامتر آلفا را در گستره مربوطه تغییر دهید. در نمونه کد، اولین بخش نوشتار با نصف ماتی (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 ❤️")
    }
}

استفاده از buildAnnotatedString و پارامتر آلفای SpanStyle، همراه با linearGradient برای افزودن شفافیت به بخشی از نوشتار.
شکل ۵. استفاده از پارامتر آلفای buildAnnotatedString و SpanStyle، به‌همراه linearGradient برای افزودن کدر بودن به بخشی از نوشتار.

اعمال کردن جلوه خیمه به نوشتار

می‌توانید اصلاح‌کننده basicMarquee را روی هر composable اعمال کنید تا جلوه پیمایش پویانمایی‌شده ایجاد کنید. اگر محتوا برای قرار گرفتن در محدودیت‌های موجود بیش‌ازحد عریض باشد، جلوه خیمه رخ می‌دهد. به‌طور پیش‌فرض، 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 روی نوشتار اعمال شد.

منابع بیشتر