סגנון הטקסט

לרכיב ה-composable 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. 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 composable, ואילו 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

הפעלת עיצוב מתקדם באמצעות Brush

כדי להפעיל סגנונות טקסט מתקדמים יותר, אפשר להשתמש ב-API של 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

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

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

דוגמאות נוספות להתאמה אישית מפורטות בפוסט בבלוג הסבר על צביעת טקסט בזמן כתיבת אימייל. למידע נוסף על השילוב של Brush עם Animations API, אפשר לקרוא את המאמר אנימציה של צביעת טקסט במברשת ב-Compose.

הוספת אפקט הבלטה לטקסט

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

קטע הקוד הבא מיישם אפקט marquee בסיסי על רכיב 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

איור 6. הצירוף basicMarquee הוחל על הטקסט.