El elemento componible Text
tiene varios parámetros opcionales para aplicarle estilo a su contenido.
A continuación, enumeramos los parámetros que abarcan los casos de uso más comunes con texto.
Para ver 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 dentro de la misma línea o párrafos, consulta la sección sobre varios párrafos y estilos.
Estilos de texto comunes
En las siguientes secciones, se describen formas comunes de darle estilo al texto.
Cambiar el color del texto
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Cómo cambiar el tamaño del texto
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
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) }
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) }
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 ) ) ) }
Cómo agregar varios estilos al texto
Para configurar diferentes estilos en el mismo Text
, sigue estos pasos:
componible, usa un AnnotatedString
una cadena que puede anotarse con estilos de anotaciones arbitrarias.
AnnotatedString
es una clase de datos que contiene lo siguiente:
- Un valor
Text
- Una
List
deSpanStyleRange
, equivalente al estilo intercalado con el rango de posición dentro del valor de texto - Una
List
deParagraphStyleRange
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
está disponible para usarse
en el elemento Text
componible, mientras que SpanStyle
y ParagraphStyle
se utiliza en AnnotatedString
. Para obtener más información sobre varios estilos en
un párrafo, consulta Cómo agregar varios estilos en un párrafo.
AnnotatedString
tiene una política de tipo seguro
compilador
para facilitar su 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") } ) }
Habilitar un estilo avanzado con Brush
Para habilitar un estilo de texto más avanzado, puedes usar la API de Brush
con
TextStyle
y SpanStyle
. En cualquier lugar donde normalmente
usa TextStyle
o SpanStyle
, ahora también puedes usar Brush
.
Cómo usar el pincel para dar estilo al texto
Configura tu texto con un pincel integrado en TextStyle
. Por ejemplo,
Puedes configurar un pincel linearGradient
en tu texto de la siguiente manera:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![Usando la función "linearGradient" de la API de Brush con una lista de colores definida](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=5&hl=es)
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
Como puedes usar Brush
junto con TextStyle
y SpanStyle
,
la integración con TextField
y buildAnnotatedString
es fluida.
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.
Diseño adicional con SpanStyle
Aplica un pincel a un intervalo de texto
Si solo quieres aplicar un pincel a partes de tu texto, usa
buildAnnotatedString
y la API de SpanStyle
, junto con tu 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.") } )
![Uso de un pincel predeterminado con linearGradient como estilo para el texto](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=5&hl=es)
linearGradient
como estilo para Text
.Opacidad en un intervalo 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 cambiar el parámetro alfa en el intervalo correspondiente.
En la muestra de código, el primer intervalo de texto se muestra a media opacidad.
(alpha =.5f
), mientras que el segundo se muestra con la 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 ❤️") } }
![Se usa el parámetro alfa de buildAnnotatedString y SpanStyle, junto con linearGradient para agregar opacidad a un intervalo de texto.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=5&hl=es)
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 se integra Brush
con nuestra API de animaciones; consulta Coloración de texto con pincel animado
en Compose.
Aplicar un efecto de marquesina al texto
Puedes aplicar el modificador basicMarquee
a cualquier elemento componible para
producen un efecto de desplazamiento animado. El efecto de marquesina se produce si el contenido
es demasiado ancha 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:
@OptIn(ExperimentalFoundationApi::class) @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 ) } }
Figura 6: El modificador basicMarquee
aplicado al texto.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Párrafo de estilo
- Material Design 2 en Compose
- Modificadores de gráficos