Aplicar estilo al texto

El elemento componible Text tiene varios parámetros opcionales para aplicarle estilo a su contenido. A continuación, incluimos algunos parámetros que abarcan los casos de uso más comunes con texto. Para conocer todos los parámetros de Text, consulta Redactar texto. código fuente.

Cada vez que configuras uno de estos parámetros, aplicas el estilo a todo el valor de texto. Si necesitas aplicar varios estilos en la misma línea o párrafos, consulta la sección sobre varios estilos intercalados.

Estilos de texto comunes

En las siguientes secciones, se describen las formas comunes de aplicar diseño a tu texto.

Cómo cambiar el color del texto

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

Aparece la frase

Cómo cambiar el tamaño del texto

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

Aparece la frase

Convertir el texto en cursiva

Usa el parámetro fontStyle para que el texto aparezca en cursiva (o configurar otro FontStyle).

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

Aparece la frase

Aplicar negrita al texto

Usa el parámetro fontWeight para que el texto aparezca en negrita (o configura otro FontWeight).

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

Aparece la frase

Agregar sombra

El parámetro style te permite establecer un objeto de tipo TextStyle. y configurar varios parámetros, como la sombra. Shadow recibe un color para la sombra, el desplazamiento o su ubicación con respecto al Text y el radio de desenfoque, que es el aspecto borroso.

@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

Aparece la frase

Cómo agregar varios estilos al texto

Para configurar estilos diferentes en el mismo elemento componible Text, usa una AnnotatedString, una cadena que se puede anotar con estilos de anotaciones arbitrarias.

AnnotatedString es una clase de datos que contiene lo siguiente:

  • Un valor Text
  • Una List de SpanStyleRange, equivalente al estilo intercalado con el rango de posición dentro del valor de texto
  • Una List de ParagraphStyleRange que especifica la alineación del texto, la dirección del texto, la altura de la línea y el estilo de sangría del texto

TextStyle es para uso en el elemento componible Text, mientras que SpanStyle y ParagraphStyle se usan en AnnotatedString. Para obtener más información sobre los varios estilos en un párrafo, consulta Agrega varios estilos en un párrafo.

AnnotatedString tiene un compilador de tipo seguro para facilitar la creación: 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

Aparece la frase

Habilitar un estilo avanzado con Brush

Para habilitar diseños de texto más avanzados, puedes usar la API de Brush con TextStyle y SpanStyle. En cualquier lugar en el que normalmente usarías TextStyle o SpanStyle, ahora también puedes usar Brush.

Usa un pincel para aplicar estilos de texto

Configura tu texto con un pincel integrado en TextStyle. Por ejemplo, puedes configurar un pincel linearGradient para tu texto de la siguiente manera:

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

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

Usando la función "linearGradient" de la API de Brush con una lista de colores definida
Figura 2: Usar la función linearGradient de la API de Brush con una lista definida de colores

No estás limitado a este esquema de colores o estilo de color en particular. Mientras que ofrecemos un ejemplo sencillo para destacar: usa cualquiera de los pinceles o incluso un SolidColor para mejorar el texto.

Integraciones

Dado que puedes usar Brush junto con TextStyle y SpanStyle, la integración con TextField y buildAnnotatedString es perfecta.

Para obtener más información sobre el uso de la API de pincel dentro de una TextField, consulta Entrada de estilo con la API de Brush.

Aplica diseño adicional con SpanStyle

Cómo aplicar un pincel a un intervalo de texto

Si solo deseas aplicar un pincel a partes del texto, usa buildAnnotatedString y la API de SpanStyle, junto con el pincel y el gradiente que elijas.

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

Uso de un pincel predeterminado con linearGradient como estilo para el texto
Figura 4: Usa un pincel predeterminado con linearGradient como estilo para Text.
Opacidad en un fragmento de texto

Para ajustar la opacidad de un intervalo de texto en particular, usa el parámetro SpanStyle parámetro opcional alpha. Usa el mismo pincel para ambas partes de un texto y cambia el parámetro alfa en el intervalo correspondiente. En la muestra de código, el primer intervalo de texto se muestra con la mitad de opacidad (alpha =.5f), mientras que el segundo se muestra con opacidad 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

Se usa el parámetro alfa de buildAnnotatedString y SpanStyle, junto con linearGradient para agregar opacidad a un intervalo de texto.
Figura 5: Usa el parámetro alfa de buildAnnotatedString y SpanStyle, junto con linearGradient, para agregar opacidad a un intervalo de texto.

Recursos adicionales

Para ver más ejemplos de personalización, consulta el artículo Descripción general del texto de Compose. Coloring Si te interesa obtener más información sobre cómo Brush se integra en nuestra API de Animations, consulta Color de texto con Brush animado en Compose.

Aplica el efecto de marco al texto

Puedes aplicar el modificador basicMarquee a cualquier elemento componible para producir un efecto de desplazamiento animado. El efecto de marquesina se produce si el contenido es demasiado ancho para ajustarse a las restricciones disponibles. De forma predeterminada, basicMarquee tiene se establecen ciertas configuraciones (como la velocidad y el retraso inicial), pero puedes modifica estos parámetros para personalizar el efecto.

En el siguiente fragmento, se implementa un efecto de marquesina básico en un elemento Text componible:

@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: El modificador basicMarquee aplicado al texto.