En esta página, se describe cómo puedes aplicar 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 definir tus propios ParagraphStyle.
Cómo configurar la alineación del texto
El parámetro textAlign te permite establecer la alineación horizontal 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
Textpara alfabetos de izquierda a derecha, como el latino, el cirílico o el hangul - Borde derecho del contenedor
Textpara 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 quieres establecer de forma manual la alineación del texto de un elemento componible Text, usa TextAlign.Start y TextAlign.End en lugar de TextAlign.Left y TextAlign.Right respectivamente, ya que se resuelven en el borde derecho del elemento 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 diseños en un párrafo, puedes usar ParagraphStyle en una AnnotatedString, que se puede anotar con estilos de anotaciones arbitrarias.
Una vez que una parte del texto está marcada con una ParagraphStyle, esa parte se separa del texto restante como si tuviera feeds de líneas al principio y al final.
Si deseas obtener más información para agregar varios estilos en un texto, consulta Cómo agregar varios estilos en un texto.
AnnotatedString tiene un compilador de tipo seguro para facilitar la creación: buildAnnotatedString. En el siguiente fragmento, se 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 padding de la línea
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, includeFontPadding se establece en false de forma predeterminada, lo que hace que el diseño de texto predeterminado se alinee mejor con las 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. Si quieres obtener más información para seleccionar una unidad de texto adecuada, consulta TextUnit.
lineHeight, y recorta los espacios adicionales 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 y aplicar diseño al texto aún más mediante configuraciones con la API experimental de LineHeightStyle: LineHeightStyle.Alignment y LineHeightStyle.Trim (includeFontPadding se deben establecer en false para que funcione Corte). 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 relleno de fuentes en Compose Text para obtener más información sobre el contexto de este cambio, cómo funcionaba includeFontPadding en el sistema de View y los cambios que se realizaron para Compose y las nuevas APIs de LineHeightStyle.
Insertar saltos de línea
La API de LineBreak define los criterios por los que el texto se divide en varias líneas. Puedes especificar el tipo de salto de línea que desees en el bloque TextStyle del elemento componible Text. Entre los tipos de salto de línea predeterminados, se incluyen los siguientes:
Simple: Salto de línea básico y rápido. Se recomienda para los campos de entrada de texto.Heading: Falla de línea con reglas de incumplimiento más flexibles. Se recomienda para textos cortos, como títulos.Paragraph: Es un salto de línea más lento y de mejor calidad para mejorar la legibilidad. Se recomienda para cantidades grandes de texto, como párrafos.
En el siguiente fragmento, se usan Simple y Paragraph para especificar el 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
)
)
}
)
)
En el resultado anterior, observa que el comportamiento de salto de línea Paragraph produce un resultado visualmente más equilibrado que el de la línea Simple.
Personalizar saltos de línea
También puedes crear tu propia configuración de LineBreak con el parámetro Strategy. El Strategy puede ser cualquiera de las siguientes opciones:
Balanced: Intenta equilibrar las longitudes de línea del texto y también 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 que obtenga texto más legible, incluida la separación silábica si está habilitada. (debe ser un valor predeterminado para todo lo que no seaBalancedniSimple).Simple: Estrategia básica y rápida. Si se habilita, la separación silábica solo se realiza para palabras que por sí mismas no caben en una línea completa. Es útil para editar texto y no cambiar de posición mientras se escribe.
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 la estrategia de salto de línea Balanced:
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
)
}
)
)
Balanced (arriba) en comparación con un párrafo con formato sin una estrategia de salto de líneaConsideraciones sobre la CJK
También puedes personalizar LineBreak con las APIs de Strictness y WordBreak, que se diseñaron específicamente para los idiomas CJK.
Es posible que no siempre veas los efectos de estas APIs en lenguajes 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 línea que interrumpe con las siguientes propiedades:
Default: Son reglas de incumplimiento predeterminadas para la configuración regional. Puede corresponder aNormaloStrict.Loose: Es la regla menos restrictiva. Apto para líneas cortas.Normal: Son las reglas más comunes para los saltos de línea.Strict: Son las reglas más estrictas para los saltos de línea.
WordBreak define cómo se deben insertar los saltos de línea en las palabras con las siguientes propiedades:
Default: Son reglas de incumplimiento predeterminadas para la configuración regional.Phrase: El salto de línea se basa en frases.
En el siguiente fragmento, se usa una rigurosidad Strict y una configuración de interrupción de palabras Phrase para 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
)
)
Strictness y WordBreak (arriba), en comparación con texto con formato LineBreak.Heading (parte inferior).Usa guiones de texto divididos 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 un signo de puntuación en forma de guion para indicar que una 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 de separación silábicos adecuados.
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
)
)
}
)
)
Cuando está habilitada, 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
Simple, la separación silábica de una palabra solo se produce si una línea es más corta que la sola palabra. - La configuración regional adecuada se establece en tu dispositivo, según la separación silábica adecuada se determina mediante los diccionarios presentes en el sistema.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Cómo aplicar estilo al texto
- Conceptos básicos sobre el diseño de Compose
- Medidas intrínsecas en los diseños de Compose