Text en Jetpack Compose: da vida a tus textos
Antonio Leiva

Los textos son una parte imprescindible en cualquier interfaz de usuario, y por tanto es importante saber cómo usarlos y sacarles el máximo partido.

En Jetpack Compose, el Composable encargado de renderizar texto se llama simplemente Text (a diferencia del sistema clásico, donde era TextView).

En realidad, existe una versión más básica llamada BasicText, que no aplica las guías de estilo de Material, pero que en general no vamos a necesitar.

¡Atención! Si quieres acceder más rápido a todo el contenido en vídeo, organizado, con contenido extra, soporte y muchas más sorpresas, puedes apuntarte gratis a mi formación Compose Expert y ver gratis el primer módulo de más de 3 horas con todo lo necesario para empezar.

Ya hemos visto que mostrar un texto es muy fácil, solo necesitamos pasarle el texto a mostrar como argumento:

@Composable
fun Greeting(name: String) {
    Text("Hello $name!")
}

Si lo que queremos es obtener un string de los resources de Android, solo tenemos que usar la función stringResource():

Text(stringResource(R.string.hello_world))

Pero si te fijas, Text tiene muchos argumentos más, por lo que se pueden configurar de infinidad de formas:

text ya sabemos como funciona, y de Modifier ya tenemos un artículo entero. Así que vamos a ir viendo los siguientes:

color

Permite modificar el color de la fuente. Ya hemos visto que tenemos varios colores por defecto en el objeto Color:

Text(
    text = "Hello World",
    color = Color.Red
)

Color por supuesto tiene constructores para definir colores de distintas formas:

fontSize

Permite definir el tamaño de la fuente. El tipo es TextUnit, que permite definir el tamaño tanto en dp como en sp.

Text(
    text = "Hello World",
    fontSize = 25.sp
)

fontStyle

El estilo de fuente simplemente permite definir si el texto estará en cursiva (o itálica) o normal

Text(
    text = "Hello World",
    fontStyle = FontStyle.Italic
)

fontWeight

Define el peso de la fuente. La clásica negrita, pero a día de hoy las fuentes permiten definir varios niveles. Así que el Text también está adaptado para esto.

Hay un montón de opciones. Nosotros por ejemplo vamos a configurar ExtraBold:

Text(
    text = "Hello World",
    fontWeight = FontWeight.ExtraBold
)

fontFamily

Permite definir la fuente que el texto va a usar. Esto tiene su complejidad, así que también vamos a necesitar un artículo aparte. Déjame en comentarios si quieres que escriba sobre ello.

En cualquier caso hay varias fuentes genéricas que podemos utilizar:

Por ejemplo, si usamos Monospace:

Text(
    text = "Hello World",
    fontFamily = FontFamily.Monospace
)

Obtenemos esto:

letterSpacing

Identifica el espacio entre letras. Se puede indicar tanto en dp como en sp. Por ejemplo:

Text(
    text = "Hello World",
    letterSpacing = 5.sp
)

textDecoration

Decoraciones extra para el texto, como tachado, subrayado, o incluso se pueden definir combinaciones de ambas.

Text(
    text = "Hello World",
    textDecoration = TextDecoration.LineThrough
)

textAlign

Alineación del texto en el párrafo: izquierda, derecha, centrado, justificado…

He cambiado el texto a uno más largo para que podamos ver este y alguno de los siguientes:

Text(
    text = stringResource(id = R.string.lorem),
    textAlign = TextAlign.End
)

lineHeight

Altura de línea, sirve para separar más o menos las líneas entre sí. Se pueden utilizar sp y em. Los em identifican el tamaño de la letra: 1 em es igual a la altura de la fuente.

Si dejamos 2em:

Text(
    text = stringResource(id = R.string.lorem),
    lineHeight = 2.em
)

maxLines, textOverflow y softWrap

Estos tres funcionan en conjunto. Imaginemos que indicamos que el número de líneas máximos es de 1:

Text(
    text = stringResource(id = R.string.lorem),
    maxLines = 1
)

Solo veríamos una línea, con el resto del texto cortado:

¿Cómo definimos la forma de cortarlo? Por defecto softWrap es true, lo que indica que cortará por la última palabra completa, pero lo podemos desactivar:

Text(
    text = stringResource(id = R.string.lorem),
    maxLines = 1,
    softWrap = false
)

Por defecto el texto se corta con TextOverflow.Clip, lo que quiere decir que simplemente se corta donde está, pero podemos usar TextOverflow.Ellipsis, y se cortará con puntos suspensivos…

Text(
    text = stringResource(id = R.string.lorem),
    maxLines = 1,
    softWrap = false,
    overflow = TextOverflow.Ellipsis
)

onTextLayout

Es un listener que nos devuelve un TextLayoutResult cuando la disposición del texto termina de calcularse.

Devuelve un montón de información sobre cómo se ha mostrado el texto, si hubo overflow, número de líneas, tamaño, y un largo etcétera.

Se puede usar para añadir funcionalidad extra, decoraciones al texto y otro tipo de detalles. Si te interesa un artículo sobre esto, házmelo saber también en los comentarios, porque es un tema complejo para tratarlo aquí.

style

Todos estos parámetros que hemos visto, e incluso algunos más, se pueden configurar directamente en este style. Muchos de ellos no tendrás que usarlos casi nunca, así que no vamos a entrar a fondo.

Pero sí que es interesante saber que gracias a este estilo, podemos aplicar de forma sencilla las tipografías definidas en el tema.

Si te vas a Type.kt, verás que hay definido un objeto Typography. Eso objeto permite definir todos los niveles de tipografía especificados por las guías de Material Design.

Si no se configura, utilizará los valores por defecto. En ese archivo puedes ver algunos ejemplos.

Todas las tipografías del tema se pueden usar de forma muy sencilla desde MaterialTheme.typography. Por ejemplo:

Text(
    text = "Hello World",
    style = MaterialTheme.typography.h4
)

Si necesitas usar una tipografía, pero aplicándole algún cambio, puedes usar la función copy de las data class. Vamos a aplicar una sombra:

Text(
    text = "Hello World",
    style = MaterialTheme.typography.h4.copy(
        shadow = Shadow(
            offset = Offset(10f, 10f),
            blurRadius = 10f
        )
    )
)

Aplicando lo aprendido a nuestro ejemplo

Aquí tampoco vamos a hacer muchos cambios. Simplemente le vamos a aplicar una tipografía al título:

Text(
    text = "Title 1",
    style = MaterialTheme.typography.h6
)

Con esto que has aprendido hoy vas a poder configurar cualquier texto que se te presente para que se adapte a las necesidades del diseño.

Pero esto se nos está quedando ya un poco cojo sin poder cargar imágenes. Así que en el próximo artículo vamos a hablar sobre cómo mostrar imágenes y drawables en Jetpack Compose.

Si no quieres perderte nada y además acceder de forma prioritaria, con soporte y con extras a todo este contenido, apúntate mi curso gratuito ya mismo.

Apúntate ahora a Compose Expert y accede a más de 3h de contenido gratuito, soporte, extras y mucho más totalmente gratis.

Quizá también te interese…

Cargar imágenes e iconos en Jetpack Compose

Cargar imágenes e iconos en Jetpack Compose

Algo que vas a tener que hacer casi siempre en una App es cargar imágenes, ya sea desde un servidor remoto, o desde tu propio dispositivo. En el sistema clásico de vistas nunca existió una forma "oficial", y siempre hemos tenido que recurrir a librerías de terceros....

Modifiers: Personaliza cualquier vista en Jetpack Compose

Modifiers: Personaliza cualquier vista en Jetpack Compose

Muchas veces no nos es suficiente con la configuración básica que nos provee una vista, y por tanto vamos a necesitar modificarla para adaptarla a nuestras necesidades. Esto es exactamente para lo que sirven los Modifiers. Es un cajón de sastre que nos da la opción de...

Layouts en Jetpack Compose: Estructura la UI con Box, Column y Row

Layouts en Jetpack Compose: Estructura la UI con Box, Column y Row

Organizar los elementos de UI en la pantalla siempre es una parte importante, y tenemos los layouts en Jetpack Compose que nos van a permitir hacerlo de distintas formas en función de nuestras necesidades. https://youtu.be/xyBkLS5OPtk Si te fijas, en el artículo...

0 comentarios

Enviar un comentario

Los datos personales que proporciones a través de este formulario quedarán registrados en un fichero de Antonio Leiva Gordillo, con el fin de gestionar los comentarios que realizas en este blog. La legitimación se realiza a través del consentimiento de la parte interesada. Si no se acepta, no podrás comentar en este blog. Los datos que proporciona solo se utilizan para evitar el correo no deseado y no se usarán para nada más. Puede ejercer los derechos de acceso, rectificación, cancelación y oposición en contacto@devexperto.com.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad *