En esta página, se describe cómo puedes darle estilo al texto de tu
párrafo. Para establecer un estilo a nivel de párrafo, puedes configurar parámetros como
textAlign
y lineHeight
, o bien define tu propio ParagraphStyle
.
Configurar alineación del texto
El parámetro textAlign
te permite establecer la posición
alineación del
texto dentro de un área de superficie componible Text
.
De forma predeterminada, Text
seleccionará la alineación del texto natural según su valor de contenido:
- Borde izquierdo del contenedor
Text
para alfabetos de izquierda a derecha, como el latino, el cirílico o el hangul - Borde derecho del contenedor
Text
para alfabetos de derecha a izquierda, como el árabe o el hebreo
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Si deseas establecer de forma manual la alineación del texto de un elemento Text
componible, es preferible que
usando TextAlign.Start
y TextAlign.End
en lugar de TextAlign.Left
, y
TextAlign.Right
respectivamente, ya que se resuelven en el borde derecho de Text
componible según la orientación de texto del idioma preferido. Por ejemplo, TextAlign.End
se alinea con el lado derecho para el texto en francés y con el lado izquierdo para el texto en árabe, pero TextAlign.Right
se alinea con el lado derecho, sin importar qué alfabeto se use.
Cómo agregar varios estilos en un párrafo
Para agregar varios estilos en un párrafo, puedes usar ParagraphStyle
en un
AnnotatedString
, que puede anotarse con estilos de anotaciones arbitrarias.
Una vez que una parte del texto se marca con un ParagraphStyle
, esa parte se
separadas del texto restante como si tuvieran feeds de líneas al principio y
final.
Para obtener más información sobre cómo agregar varios estilos en un texto, consulta Agrega varios estilos al texto.
AnnotatedString
tiene una política de tipo seguro
compilador
para facilitar su creación: buildAnnotatedString
. El siguiente fragmento usa
buildAnnotatedString
para configurar ParagraphStyle
:
@Composable fun ParagraphStyle() { Text( buildAnnotatedString { withStyle(style = ParagraphStyle(lineHeight = 30.sp)) { withStyle(style = SpanStyle(color = Color.Blue)) { append("Hello\n") } withStyle( style = SpanStyle( fontWeight = FontWeight.Bold, color = Color.Red ) ) { append("World\n") } append("Compose") } } ) }
Cómo ajustar la altura y el relleno de las líneas
includeFontPadding
es una propiedad heredada que agrega padding adicional en función de las métricas de fuente en la parte superior de la primera línea y en la parte inferior de la última línea de un texto.
A partir de la versión 2024.01.01
de la BoM de Compose, se establece includeFontPadding
a false
de forma predeterminada, lo que alinea más el diseño de texto predeterminado con
herramientas de diseño comunes.
La capacidad de configurar lineHeight
no es nueva. Está disponible desde Android Q. Puedes configurar lineHeight
para Text
mediante el parámetro lineHeight
, que distribuye la altura de la línea en cada línea de texto. Luego, puedes usar el nuevo LineHeightStyle API
para configurar aún más cómo se alinea este texto dentro del espacio y quitar los espacios en blanco.
Es posible que desees ajustar lineHeight
mediante la unidad de texto "em" (tamaño de fuente relativo) en lugar de "sp" (píxeles ajustados) para mejorar la precisión. Para obtener más información
Para seleccionar una unidad de texto adecuada, consulta TextUnit
.
![Imagen que muestra lineHeight como una medida según las líneas directamente arriba y abajo.](https://developer.android.com/static/develop/ui/compose/images/text-lineheightv3.png?authuser=5&hl=es)
lineHeight
y corta el espacio adicional si es necesario.
Text( text = text, style = LocalTextStyle.current.merge( TextStyle( lineHeight = 2.5.em, platformStyle = PlatformTextStyle( includeFontPadding = false ), lineHeightStyle = LineHeightStyle( alignment = LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None ) ) ) )
Además de ajustar lineHeight
, ahora puedes centrar aún más el texto y darle estilo
Usa parámetros de configuración con la API experimental de LineHeightStyle
: LineHeightStyle.Alignment
y LineHeightStyle.Trim
(includeFontPadding
se debe establecer en false
para
Cortar para trabajar). Alignment y Trim utilizan el espacio medido entre las líneas de texto para distribuirlo de manera más adecuada en todas las líneas, lo que incluye una sola línea de texto y la línea superior de un bloque de texto.
LineHeightStyle.Alignment
define cómo alinear la línea en el espacio que proporciona la altura de la línea. Dentro de cada una, puedes alinear el texto en la parte superior, inferior, central o de forma proporcional. Luego, LineHeightStyle.Trim
te permite dejar o quitar el espacio adicional en la parte superior de la primera línea y en la parte inferior de la última línea del texto, que se genera de cualquier ajuste de lineHeight
y Alignment. En los siguientes ejemplos, se muestra cómo luce un texto de varias líneas con varios parámetros de configuración de LineHeightStyle.Trim
cuando la alineación está centrada (LineHeightStyle.Alignment.Center
).
![]() |
![]() |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
![]() |
![]() |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
Consulta la entrada de blog Cómo corregir el padding de fuentes en Compose Text para obtener más información.
más información sobre el contexto de este cambio, cómo funcionó includeFontPadding
en la vista
sistema operativo y los cambios realizados en Compose y el nuevo LineHeightStyle
APIs
Insertar saltos de línea
La API de LineBreak
define los criterios según los que se divide el texto
varias líneas. Puedes especificar el tipo de salto de línea que deseas en la
Bloque TextStyle
del elemento Text
componible. Tipos de salto de línea predeterminados
incluyen lo siguiente:
Simple
: salto de línea rápido y básico. Se recomienda para los campos de entrada de texto.Heading
: salto de línea con reglas de ruptura perezosa. Recomendado para videos cortos texto, como títulos.Paragraph
: Salto de línea más lento y de mejor calidad para una mejor legibilidad. Se recomienda para cantidades de texto más grandes, como párrafos.
En el siguiente fragmento, se usan Simple
y Paragraph
para especificar
Comportamiento de salto de línea en un bloque de texto largo:
TextSample( samples = mapOf( "Simple" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Simple ) ) }, "Paragraph" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph ) ) } ) )
![Un bloque de texto que muestra una estrategia de salto de línea simple en comparación con un texto
con una estrategia de salto de página
optimizada para párrafos. El bloque de texto con el
la estrategia de salto de línea tiene más variabilidad en las longitudes de línea.](https://developer.android.com/static/develop/ui/compose/images/text/simple-paragraph.png?authuser=5&hl=es)
En el resultado anterior, observa que el comportamiento de salto de línea de Paragraph
produce
Esto brinda un resultado visualmente más equilibrado que el salto de línea de Simple
.
Personalizar saltos de línea
También puedes crear tu propia configuración de LineBreak
con Strategy
.
parámetro. El Strategy
puede ser cualquiera de los siguientes:
Balanced
: Intenta equilibrar la longitud de las líneas del texto y también se aplica. la separación silábica automática si está habilitada. Se recomienda para pantallas pequeñas, como relojes, para maximizar la cantidad de texto que se muestra.HighQuality
: Optimiza un párrafo para brindar texto más legible, lo que incluye: la separación silábica si está habilitada. (Debería ser la opción predeterminada para todo lo que no seaBalanced
oSimple
).Simple
: Estrategia básica y rápida. Si se habilita esta opción, la separación silábica se realiza solo para palabras que no caben en toda una línea por sí mismas. Útil para editar texto para evitar cambiar de posición mientras escribes.
En el siguiente fragmento, se muestra la diferencia entre un párrafo con la configuración predeterminada
y un párrafo optimizado para pantallas pequeñas con el salto de línea Balanced
estrategia:
TextSample( samples = mapOf( "Balanced" to { val smallScreenAdaptedParagraph = LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced) Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = smallScreenAdaptedParagraph ) ) }, "Default" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default ) } ) )
![Un párrafo con una estrategia de salto de línea equilibrada y un párrafo
formateado sin una estrategia. El párrafo con la línea de equilibrio rompiendo
tiene longitudes de línea más consistentes que la predeterminada.](https://developer.android.com/static/develop/ui/compose/images/text/balanced-default.png?authuser=5&hl=es)
Balanced
(arriba) en comparación con un párrafo con formato sin una estrategia de salto de línea.Consideraciones del CJK
También puedes personalizar LineBreak
con Strictness
y
APIs de WordBreak
, que se diseñaron específicamente para lenguajes CJK.
Es posible que no siempre veas los efectos de estas APIs en idiomas que no sean CJK. En general,
las reglas de salto de línea se definen según la configuración regional.
Strictness
describe la rigurosidad de la interrupción de línea de la siguiente manera:
propiedades:
Default
: Son las reglas de incumplimiento predeterminadas de la configuración regional. Puede corresponder aNormal
oStrict
.Loose
: Son las reglas menos restrictivas. Apto para líneas cortas.Normal
: Son las reglas más comunes para el salto de línea.Strict
: Son las reglas más estrictas para el salto de línea.
WordBreak
define cómo se deben insertar los saltos de línea en las palabras con el
siguientes propiedades:
Default
: Son las reglas de incumplimiento predeterminadas de la configuración regional.Phrase
: El salto de línea se basa en frases.
El siguiente fragmento usa una rigurosidad Strict
y una rotura de palabras en Phrase
configuración de un texto en japonés:
val customTitleLineBreak = LineBreak( strategy = LineBreak.Strategy.HighQuality, strictness = LineBreak.Strictness.Strict, wordBreak = LineBreak.WordBreak.Phrase ) Text( text = "あなたに寄り添う最先端のテクノロジー。", modifier = Modifier.width(250.dp), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = customTitleLineBreak ) )
![Texto en japonés con los parámetros de configuración de Estrictidad y WordBreak en comparación con el texto predeterminado.](https://developer.android.com/static/develop/ui/compose/images/text/cjk-line-break.png?authuser=5&hl=es)
Strictness
y WordBreak
(arriba)
en comparación con el texto con formato solo LineBreak.Heading
(parte inferior).Guionar texto dividido en líneas
La API de Hyphens
te permite agregar compatibilidad con la separación silábica a tu app.
La hifenación se refiere a la inserción de signos de puntuación en forma de guion para indicar que un
palabra se divide en líneas de texto. Cuando está habilitada, se agrega la separación silábica entre
las sílabas de una palabra en los puntos apropiados de separación silábica.
De forma predeterminada, la separación silábica no está habilitada. Para habilitar la separación silábica, agrega
Hyphens.Auto
como parámetro en un bloque TextStyle
:
TextSample( samples = mapOf( "Hyphens - None" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.None ) ) }, "Hyphens - Auto" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.Auto ) ) } ) )
![Un párrafo sin la separación silábica habilitada y un párrafo sin la separación silábica habilitada
Cuando se habilita la separación silábica, una palabra se divide en dos líneas y se divide en dos.](https://developer.android.com/static/develop/ui/compose/images/text/hyphens.png?authuser=5&hl=es)
Cuando se habilita, la separación silábica solo ocurre en las siguientes condiciones:
- Una palabra no cabe en una línea. Si usas una estrategia de salto de línea de
Simple
, la separación silábica de una palabra solo ocurre si una línea es más corta que el único una palabra. - Debes configurar la configuración regional adecuada en tu dispositivo, según la separación silábica adecuada. mediante los diccionarios que se encuentran en el sistema.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Estilo del texto
- Conceptos básicos sobre el diseño de Compose
- Medidas intrínsecas en los diseños de Compose