[CSA02] Escríbeme algo con Text

tags: blog, compose, csa

El texto es una pieza fundamental en cualquier interfaz de usuario, y Compose nos facilita su visualización o escritura. Hoy nos vamos a centrar en la visualización. El componente más básico para ello es BasicText, pero para seguir los principios Material Design, Compose nos proporciona la clase Text y es recomendable su uso.

La función Text

La función componible Text nos provee la funcionalidad de mostrar texto en la pantalla. Este es su constructor principal.

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

• text: Literal que se va a mostrar en el componible
• modifier: Modificador que se va a aplicar al componible
• color: Color del texto
• fontSize: Tamaño del texto
• fontStyle: Estilo de fuente del texto
• fontWeigth: Peso del texto
• fontFamily: Familia de fuentes aplicadas al texto
• letterSpacing: Espaciado entre caracteres
• textDecoration: Decoración aplicada al texto
• textAlign: Alineación del texto
• lineHeight: Altura de línea de texto
• overflow: Comportamiento del texto si no cabe el literal
• softWrap: Aplicar o no salto de línea inteligente
• maxLines: Número máximo de líneas a mostrar
• onTextLayout: Función que se activa cuando el texto está dispuesto
• style: Estilo aplicado al texto

Podemos mostrar texto de manera sencilla.

Text("Hello World")

Y como siempre en Android, es bueno mostrar los textos estáticos desde recursos.

Text(stringResource(R.string_hello_world))

Vamos a ir aplicando estilo a nuestro Text.

Text(
    text = "Hello World",
    color = Color.Green,
    fontSize = 18.sp,            
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif,
    textDecoration = TextDecoration.LineThrough,
    textAlign = TextAlign.Center,
    lineHeight = 2.sp,

)

Con el parámetro overflow podemos controlar de qué manera manejamos el recorte de texto cuando se desborda. Para ver esto, podemos limitar el número máximo de líneas con maxLines.

Text(
    text = "Texto con overfloooooooooooooooooooooooooooooooooooooooooooooooow",
    overflow = TextOverflow.Ellipsis,
    maxLines = 1,
)

El argumento softWrap, habilitado por defecto, representa si el texto debe romperse en saltos de línea suaves.

Text(
    text = "Texto con softWrap deshabilitado",
    softWrap = false,
)

Aplicando estilo con TextStyle

Todos estos parámetros, pueden ser aplicados mediante textStyle, facilitando la homogeneidad de nuestros estilos de texto entre los diferentes Text.

val commonTextStyle = TextStyle(
        color = Color.Green,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.SansSerif,
        textDecoration = TextDecoration.LineThrough,
        textAlign = TextAlign.Center,
        lineHeight = 2.sp,
    )

val labelHello = Text(
    text = "Hello",
    style = commonTextStyle
)

val labelWorld = Text(
    text = "World",
    style = commonTextStyle.copy(
        fontSize = 16.sp,
    )
)