Stile del testo

Il componibile Text ha diversi parametri facoltativi per applicare uno stile ai contenuti. Di seguito sono elencati i parametri che coprono i casi d'uso più comuni con il testo. Per tutti i parametri di Text, consulta il codice sorgente di Compose Text.

Ogni volta che imposti uno di questi parametri, applichi lo stile all'intero valore di testo. Se devi applicare più stili all'interno della stessa riga o degli stessi paragrafi, consulta la sezione relativa a più stili incorporati.

Stili di testo comuni

Le sezioni seguenti descrivono i modi più comuni per applicare uno stile al testo.

Modifica colore del testo

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

Modifica dimensione del testo

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

Mettere il testo in corsivo

Utilizza il parametro fontStyle per applicare il corsivo al testo (o impostare un altro FontStyle).

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

Mettere il testo in grassetto

Utilizza il parametro fontWeight per applicare il grassetto al testo (o impostare un altro FontWeight).

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

Aggiungi ombra

Il parametro style consente di impostare un oggetto di tipo TextStyle e configurare più parametri, ad esempio l'ombreggiatura. Shadow riceve un colore per l'ombra, l'offset o la posizione rispetto a Text e il raggio di sfocatura, che determina l'aspetto sfocato.

@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

Aggiungi più stili nel testo

Per impostare stili diversi all'interno dello stesso componibile Text, utilizza un AnnotatedString, una stringa che può essere annotata con stili di annotazioni arbitrarie.

AnnotatedString è una classe di dati contenente:

• Un valore Text
• Un List di SpanStyleRange, equivalente allo stile incorporato con l'intervallo di posizione all'interno del valore di testo
• Un List di ParagraphStyleRange, che specifica lo stile di allineamento del testo, direzione del testo, altezza della riga e rientro del testo

TextStyle è destinato all'uso nel componibile Text, mentre SpanStyle e ParagraphStyle sono destinati all'uso in AnnotatedString. Per ulteriori informazioni su più stili in un paragrafo, consulta Aggiungi più stili in un paragrafo.

AnnotatedString ha un builder con sicurezza dei tipi per semplificare la creazione: 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

Visualizza HTML con link nel testo

Utilizza AnnotatedString.fromHtml() per visualizzare il testo formattato in HTML con link cliccabili nella tua applicazione Jetpack Compose. Questa funzione converte una stringa con tag HTML in un AnnotatedString, consentendo la gestione dello stile e dei link.

Esempio: HTML con link con stile

Questo snippet mostra il testo formattato in HTML con un link, applicando uno stile specifico al link:

@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

Punti chiave sul codice

• AnnotatedString.fromHtml() converte la stringa htmlText in un AnnotatedString. Il parametro linkStyles personalizza l'aspetto del link.

• TextLinkStyles definisce lo stile dei link all'interno dell'HTML. SpanStyle imposta la decorazione del testo, lo stile del carattere e il colore dei link.

• Il componibile Text mostra il AnnotatedString risultante.

Risultato

Questo snippet attiva "Jetpack Compose" come link cliccabile, con stile di colore blu, sottolineato e in corsivo:

Figura 2. Un'intestazione e un paragrafo, in cui "Jetpack Compose" nel paragrafo è un link cliccabile e con stile.

Attiva lo stile avanzato con Brush

Per abilitare uno stile di testo più avanzato, puoi utilizzare l'API Brush con TextStyle e SpanStyle. In qualsiasi punto in cui in genere utilizzi TextStyle o SpanStyle, ora puoi utilizzare anche Brush.

Usa un pennello per lo stile del testo

Configura il testo utilizzando un pennello integrato in TextStyle. Ad esempio, puoi configurare un pennello linearGradient per il testo nel seguente modo:

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

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

Figura 3. Utilizzando la funzione linearGradient dell'API Brush con un elenco definito di colori.

Non sei vincolato a questa particolare combinazione di colori o stile di colorazione. Anche se abbiamo fornito un esempio semplice da evidenziare, utilizza uno dei pennelli integrati o anche solo un SolidColor per migliorare il testo.

Integrazioni

Poiché puoi utilizzare Brush insieme a TextStyle e SpanStyle, l'integrazione con TextField e buildAnnotatedString è perfetta.

Per saperne di più sull'utilizzo dell'API Brush all'interno di un TextField, consulta Stile dell'input con l'API Brush.

Stile aggiuntivo con SpanStyle

Applica un pennello a una sezione di testo

Se vuoi applicare un pennello solo a parti del testo, utilizza buildAnnotatedString e l'API SpanStyle, insieme al pennello e al gradiente che preferisci.

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

Figura 4. Utilizzo di un pennello predefinito con linearGradient come stile per Text.

Opacità in un intervallo di testo

Per regolare l'opacità di un determinato intervallo di testo, utilizza il parametro facoltativo alpha di SpanStyle. Utilizza lo stesso pennello per entrambe le parti di un testo e modifica il parametro alfa nello span corrispondente. Nell'esempio di codice, il primo intervallo di testo viene visualizzato con un'opacità dimezzata (alpha =.5f), mentre il secondo viene visualizzato con un'opacità completa (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

Figura 5. Utilizzo di buildAnnotatedString e del parametro alfa di SpanStyle, insieme a linearGradient per aggiungere opacità a un intervallo di testo.

Applica l'effetto di testo scorrevole al testo

Puoi applicare il modificatore basicMarquee a qualsiasi composable per produrre un effetto di scorrimento animato. L'effetto marquee si verifica se i contenuti sono troppo ampi per rientrare nei vincoli disponibili. Per impostazione predefinita, basicMarquee ha alcune configurazioni (come velocità e ritardo iniziale) impostate, ma puoi modificare questi parametri per personalizzare l'effetto.

Il seguente snippet implementa un effetto di testo scorrevole di base su un 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
        )
    }
}
TextSnippets.kt

Figura 6. Il modificatore basicMarquee applicato al testo.

Risorse aggiuntive

• Brushing Up on Compose Text Coloring
• Colorazione del testo con pennello animato in Compose
• Supporto di più link in un'unica stringa di testo