סגנון הטקסט

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

באמצעות הפונקציה linearGradient של Brush API עם רשימה מוגדרת של צבעים.
איור 2. באמצעות הפונקציה linearGradient של Brush API עם רשימה מוגדרת של צבעים.

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

שימוש במברשת ברירת המחדל עם linearGradient כסגנון של טקסט.
איור 4. שימוש במברשת ברירת מחדל עם linearGradient כסגנון ל-Text.
שקיפות בקטעי טקסט

כדי לשנות את רמת האטימות של קטע טקסט מסוים, משתמשים בפרמטר האופציונלי alpha של SpanStyle. משתמשים באותה מברשת בשני חלקי הטקסט, ומשנים את פרמטר האלפא ב-span התואם. בקוד לדוגמה, קטע הטקסט הראשון מוצג עם חצי שקיפות (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 ובפרמטר alpha של SpanStyle, יחד עם linearGradient כדי להוסיף אטימות לקטע טקסט.
איור 5. שימוש בפרמטר האלפא של buildAnnotatedString ו-SpanStyle, יחד עם linearGradient כדי להוסיף אטימות לקטע טקסט.

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

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