Text en Jetpack Compose: da vida a tus textos

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.

https://youtu.be/yu6rxgBEh1Y

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 aprender Jetpack Compose a fondo, con todo el contenido en vídeo organizado, soporte y extras, echa un vistazo a Compose Expert.

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 quieres aprender todo este contenido con soporte y extras, echa un vistazo a Compose Expert.