סגנון הטקסט

לרכיב הקומפוזבילי Text יש כמה פרמטרים אופציונליים לעיצוב התוכן שלו. בהמשך מפורטים פרמטרים שמתאימים לתרחישים הנפוצים ביותר של שימוש בטקסט. כדי לראות את כל הפרמטרים של Text, עיינו בקוד המקור של Compose Text.

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

סגנונות טקסט נפוצים

בקטעים הבאים מתוארות דרכים נפוצות לעיצוב הטקסט.

שינוי של צבע הטקסט

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

המילים

שינוי גודל הטקסט

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}

המילים

הפיכת הטקסט לנטוי

משתמשים בפרמטר fontStyle כדי להציג טקסט בכתב נטוי (או להגדיר FontStyle אחר).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}

המילים

הדגשת טקסט

משתמשים בפרמטר fontWeight כדי להדגיש טקסט (או להגדיר FontWeight אחר).

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

המילים

הוספת צל

הפרמטר 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
            )
        )
    )
}

המילים

הוספת כמה סגנונות בטקסט

כדי להגדיר סגנונות שונים באותו רכיב 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")
        }
    )
}

המילים

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

מידע חשוב על הקוד

  • הפונקציה AnnotatedString.fromHtml() ממירה את המחרוזת htmlText ל-AnnotatedString. הפרמטר linkStyles משמש להתאמה אישית של מראה הקישור.

  • TextLinkStyles מגדיר את הסגנון של הקישורים ב-HTML. SpanStyle מגדיר את עיצוב הטקסט, סגנון הגופן והצבע של הקישורים.

  • הפונקציה הקומפוזבילית Text מציגה את ה-AnnotatedString שנוצר.

תוצאה

קטע הקוד הזה הופך את Jetpack Compose לקישור שאפשר ללחוץ עליו, בצבע כחול, עם קו תחתון ובכתב נטוי:

כותרת H1 &quot;Jetpack פיתוח נייטיב&quot; ואחריה &quot;פיתוח אפליקציות טובות יותר באמצעות Jetpack פיתוח נייטיב&quot;, כאשר &quot;Jetpack פיתוח נייטיב&quot; הוא קישור ישיר בצבע כחול, עם קו תחתון ובכתב נטוי.
איור 2. כותרת ופסקה, שבהן "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
        )
    )
)

שימוש בפונקציה linearGradient של Brush API עם רשימה מוגדרת של צבעים.
איור 3. שימוש בפונקציה 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.")
    }
)

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

כדי לשנות את האטימות של קטע טקסט מסוים, משתמשים בפרמטר האופציונלי alpha של SpanStyle. משתמשים באותו מברשת לשני חלקי הטקסט, ומשנים את הפרמטר אלפא בטווח המתאים. בדוגמת הקוד, קטע הטקסט הראשון מוצג ב-50% אטימות (alpha =.5f) והקטע השני מוצג ב-100% אטימות (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 ❤️")
    }
}

שימוש ב-buildAnnotatedString ובפרמטר אלפא של SpanStyle, יחד עם linearGradient כדי להוסיף שקיפות לקטע טקסט.
איור 5. שימוש בפרמטר אלפא של buildAnnotatedString ו-SpanStyle, יחד עם linearGradient כדי להוסיף אטימות לטווח של טקסט.

החלת אפקט של טקסט נע על הטקסט

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

קטע הקוד הבא מטמיע אפקט בסיסי של טקסט נע ברכיב ה-Composable‏ 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
        )
    }
}

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

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