סגנון הטקסט

בתוכן הקומפוזבילי 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 יש סוג בטוח לשימוש 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

הפעלת עיצוב מתקדם באמצעות 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

אטימוּת בחלק של טקסט

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

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

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

קטע הקוד הבא מיישם אפקט הבלטה בסיסי בתוכן קומפוזבילי מסוג Text:

@OptIn(ExperimentalFoundationApi::class)
@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 הוחל על הטקסט.