סגנון הטקסט

לרכיב Text composable יש כמה פרמטרים אופציונליים לעיצוב התוכן שלו. בהמשך מפורטים פרמטרים שמתאימים לתרחישי השימוש הנפוצים ביותר עם טקסט. כל הפרמטרים של 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. ‫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 composable, משתמשים ב-AnnotatedString, מחרוזת שאפשר להוסיף לה הערות עם סגנונות של הערות שרירותיות.

‫AnnotatedString הוא מחלקת נתונים שמכילה:

• ערך של Text
• ‫List של SpanStyleRange, ששווה לעיצוב מוטבע עם טווח מיקום בתוך ערך הטקסט
• ‫List של ParagraphStyleRange, שמציין את יישור הטקסט, כיוון הטקסט, גובה השורה וסגנון הכניסה של הטקסט

‫TextStyle מיועד לשימוש ב-Text, ואילו SpanStyle ו-ParagraphStyle מיועדים לשימוש ב-AnnotatedString. מידע נוסף על כמה סגנונות בפסקה זמין במאמר הוספה של כמה סגנונות בפסקה.

‫AnnotatedString יש לו builder בטוח לטיפוסים כדי להקל על יצירת: 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 הוא חלק.

מידע נוסף על השימוש ב-Brush API בתוך TextField זמין במאמר הזנת סגנון באמצעות Brush API.

עיצוב נוסף באמצעות SpanStyle

החלת מברשת על טווח טקסט

אם רוצים להשתמש במברשת רק בחלקים מהטקסט, משתמשים ב-buildAnnotatedString וב-API‏ 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

שקיפות בטווח של טקסט

כדי לשנות את רמת השקיפות של טווח טקסט מסוים, משתמשים בפרמטר האופציונלי 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 ❤️")
    }
}
TextSnippets.kt

החלת אפקט של טקסט רץ על טקסט

אפשר להחיל את משנה ה-basicMarquee על כל רכיב שאפשר להרכיב כדי ליצור אפקט של גלילה מונפשת. אפקט המרקיז מתרחש אם התוכן רחב מדי ולא מתאים למגבלות הזמינות. כברירת מחדל, basicMarquee מוגדר עם הגדרות מסוימות (כמו מהירות והשהיה ראשונית), אבל אפשר לשנות את הפרמטרים האלה כדי להתאים אישית את האפקט.

קטע הקוד הבא מיישם אפקט בסיסי של marquee ברכיב Text composable:

@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

איור 6. המשנה basicMarquee חל על הטקסט.

מקורות מידע נוספים

• שינוי צבע הטקסט בהודעות
• הוספת אנימציה לצביעת טקסט במברשת בכתיבה
• תמיכה בכמה קישורים במחרוזת טקסט אחת