Styl tekstu

Element kompozycyjny Text ma kilka opcjonalnych parametrów, które umożliwiają stylizowanie jego treści. Poniżej znajdziesz listę parametrów, które obejmują najczęstsze przypadki użycia tekstu. Wszystkie parametry elementu Text znajdziesz w kodzie źródłowym Compose Text.

Gdy ustawisz jeden z tych parametrów, styl zostanie zastosowany do całej wartości tekstowej. Jeśli musisz zastosować kilka stylów w tym samym wierszu lub akapicie, zapoznaj się z sekcją dotyczącą wielu stylów w tekście.

Typowe style tekstu

W kolejnych sekcjach opisujemy typowe sposoby stylizowania tekstu.

Zmień kolor tekstu

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

Zmień rozmiar tekstu

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

Kursywa

Aby tekst był pisany kursywą (lub ustawić inny FontStyle), użyj parametru fontStyle.

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

Pogrubienie

Aby tekst był pogrubiony (lub ustawić inny FontWeight), użyj parametru fontWeight.

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

Dodaj cień

Parametr style umożliwia ustawienie obiektu typu TextStyle i skonfigurowanie wielu parametrów, np. cienia. Shadow przyjmuje kolor cienia, przesunięcie lub jego położenie względem elementu Text oraz promień rozmycia, który określa, jak rozmyty ma być cień.

@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

Dodawanie wielu stylów w tekście

Aby ustawić różne style w tym samym Text elemencie kompozycyjnym, użyj elementu AnnotatedString, czyli ciągu znaków, który można opatrzyć stylami dowolnych adnotacji.

AnnotatedString to klasa danych zawierająca:

• wartość Text
• List elementu SpanStyleRange, który odpowiada stylowi w tekście z zakresem pozycji w wartości tekstowej
• List elementu ParagraphStyleRange, który określa wyrównanie tekstu, kierunek tekstu, wysokość wiersza i styl wcięcia tekstu

TextStyle jest używany w elemencie kompozycyjnym Text, a elementy SpanStyle i ParagraphStyle – w elemencie AnnotatedString. Więcej informacji o wielu stylach w akapicie znajdziesz w artykule Dodawanie wielu stylów w akapicie.

AnnotatedString ma bezpieczny typowo kreator który ułatwia tworzenie: 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

Wyświetlanie kodu HTML z linkami w tekście

Aby wyświetlać tekst sformatowany w HTML z linkami, które można kliknąć, w aplikacji Jetpack Compose, użyj funkcji AnnotatedString.fromHtml(). Ta funkcja przekształca ciąg znaków z tagami HTML w element AnnotatedString, co umożliwia stylizowanie i obsługę linków.

Przykład: HTML ze stylizowanym linkiem

Ten fragment kodu renderuje tekst sformatowany w HTML z linkiem, stosując do niego określony styl:

@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

Najważniejsze informacje o kodzie

• AnnotatedString.fromHtml() przekształca ciąg znaków htmlText w element AnnotatedString. Parametr linkStyles umożliwia dostosowanie wyglądu linku.

• Element TextLinkStyles określa styl linków w HTML. Element SpanStyle ustawia dekorację tekstu, styl czcionki i kolor linków.

• Element kompozycyjny Text wyświetla wynikowy element AnnotatedString.

Wynik

Ten fragment kodu umożliwia kliknięcie linku „Jetpack Compose” stylizowanego na niebieski, podkreślony i pisany kursywą:

Włączanie zaawansowanego stylizowania za pomocą elementu Brush

Aby włączyć bardziej zaawansowane stylizowanie tekstu, możesz użyć interfejsu Brush API z elementami TextStyle i SpanStyle. W każdym miejscu, w którym zwykle używasz elementu TextStyle lub SpanStyle, możesz teraz używać też elementu Brush.

Używanie pędzla do stylizowania tekstu

Skonfiguruj tekst za pomocą wbudowanego pędzla w elemencie TextStyle. Możesz na przykład skonfigurować pędzel linearGradient w tekście w ten sposób:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Nie musisz ograniczać się do tego konkretnego schematu kolorów ani stylu kolorowania. Aby wyróżnić tekst, możesz użyć dowolnego z wbudowanych pędzli lub nawet tylko elementu SolidColor.

Integracje

Ponieważ możesz używać elementu Brush zarówno z elementem TextStyle, jak i SpanStyle, integracja z elementem TextField i funkcją buildAnnotatedString jest bezproblemowa.

Więcej informacji o używaniu interfejsu Brush API w elemencie TextField znajdziesz w artykule Stylizowanie danych wejściowych za pomocą interfejsu Brush API.

Dodatkowe stylizowanie za pomocą elementu SpanStyle

Stosowanie pędzla do fragmentu tekstu

Jeśli chcesz zastosować pędzel tylko do części tekstu, użyj buildAnnotatedString i interfejsu SpanStyle API wraz z wybranym pędzlem i gradientem.

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

Przezroczystość w fragmencie tekstu

Aby dostosować przezroczystość określonego fragmentu tekstu, użyj SpanStyle's opcjonalnego alpha parametru. Użyj tego samego pędzla w obu częściach tekstu i zmień parametr alfa w odpowiednim fragmencie. W przykładowym kodzie pierwszy fragment tekstu jest wyświetlany z przezroczystością na poziomie połowy (alpha =.5f), a drugi – z pełną przezroczystością (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

Stosowanie efektu markizy do tekstu

Aby uzyskać animowany efekt przewijania, możesz zastosować modyfikator basicMarquee do dowolnego elementu kompozycyjnego. Efekt markizy występuje, gdy treść jest zbyt szeroka, aby zmieścić się w dostępnych ograniczeniach. Domyślnie element basicMarquee ma ustawione określone konfiguracje (np. prędkość i opóźnienie początkowe), ale możesz zmodyfikować te parametry, aby dostosować efekt.

Ten fragment kodu implementuje podstawowy efekt markizy w elemencie kompozycyjnym 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

Rysunek 6. Modyfikator basicMarquee zastosowany do tekstu.

Dodatkowe materiały

• Brushing Up on Compose Text Coloring
• Animating brush Text coloring in Compose
• Support multiple links in a single string of text