# [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,
    )
)