סגנון הטקסט

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

הצגת 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

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

החלת אפקט רמרק על טקסט

אפשר להחיל את המשתנה 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 שהוחל על הטקסט.

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

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