COLUMNAS en JETPACK COMPOSE

Hoy vamos a seguir con el curso de Jetpack Compose donde te voy a explicar que son las columnas. En el vídeo anterior estuvimos hablando de la introducción a Jetpack Compose y todo lo que nos trae, pero obviamente con lo que vimos no podemos ni empezar a maquetar vistas ya que si pones más de un componente se van a pisar el uno al otro.

Esto ocurre porque la maquetación de estas vistas es se realiza a través de filas, columnas y cajas. Las columnas son simplemente como un LinearLayout por lo que nosotros podemos ir poniendo componentes y cada uno se irá añadiendo debajo del anterior, vamos al código para verlo mejor.

Es hora de ponernos manos a la obra y para ello solo necesitaremos la última versión estable de Android Studio, llamada Artic Fox.

Una vez actualizado verás que la pantalla inicial ha cambiado pero haremos clic en Empty Compose Actitivty y pulsamos Next

En la siguiente pantalla solo tendremos que poner un nombre a nuestro proyecto, yo lo llamaré ColumnApplication. Fíjate también que la versión mínima en Jetpack Compose es con el API 21.

Una vez que haya cargado por completo, vamos a eliminar todo, excepto setContent, hasta que tu código quede de la siguiente manera: recuerda que todo lo que se encuentre dentro de setContent sera la vista de esta Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
        }
    }
}

Como no podemos colocar la etiqueta @Preview dentro de setContent{}, vamos a crear una función @Composable y para este ejemplo la nombraremos app() después agregaremos la etiqueta @Preview para poder previsualizar todo lo que hagamos.

@Preview(showBackground = true)
@Composable
fun app() {
    Text(text = "Aristidevs")
    Text(text = "Suscribete")
    Text(text = "Hola")
}

Si agregamos un Text, y sucesivamente otros nuestra preview, estará toda amontonada, pisándose un Text encima de otro

Para eso usaremos las Column(){}, dentro de ellas coloquemos los Text, dando como preview los Text ordenados correctamente

@Preview(showBackground = true)
@Composable
fun app() {
    Column(){
        Text(text = "Aristidevs")
        Text(text = "Suscribete")
        Text(text = "Hola")
    }
}

Diseñando Vista Compleja

Si eres observador se distingue que cada Text tiene el atributo WrapContent, y al momento de ejecutarlo se puede distinguir que solo utiliza este pequeño cuadrado, es decir solo toma el ancho y alto que tiene el Text

Esto puede modificarse con modifier, que básicamente lo usamos para colocar un MatchParent con fillMaxSize estos modificadores es posible concatenarlos con “.” Si queremos poner mas de uno, es importante que sepas que los modificadores siguen el orden de definición, es decir de izquierda a derecha, y el orden afecta su funcionamiento, en este ejemplo concatenamos el modificador para background dándole de atributo el color rojo.

@Preview(showBackground = true)
@Composable
fun app() {
    Column(modifier= Modifier.fillMaxSize().background(Color.Red)){
        Text(text = "Aristidevs")
        Text(text = "Suscribete")
        Text(text = "Hola")
    }
}

Agregar una imagen a un Column en Compose

Si queremos agregar un Image este traerá dos valores, painter que trae el resource es decir la imagen (para mas info de imagenes en Android) y contentDescription que es el texto que se escuchara para los invidentes o débiles visuales, este último puede colocarse como null.
También para modificar algunos atributos en un Text en Compose añadimos un fontSize y modificamos su color con .color

@Preview(showBackground = true)
@Composable
fun app() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {
        Image(
            painter = painterResource(id = R.drawable.aristidevsbackground),
            contentDescription = "logo Aristidevs"
        )
        Text(text = "Aristidevs", fontSize = 32.sp, color = Color.White)
        Text(text = "Suscribete")
        Text(text = "Hola")
    }
}

Centrar un Text en Compose

Fíjate que el Text “AristiDevs” está centrado dentro de su mismo ancho al tener el atributo WrapContent, así que hay que darle un ancho total, es decir un MatchParent esto se logra con el modifier y como solo buscamos centrarlo a lo ancho usamos la función fillMaxWidth

        Text(
            text = "Aristidevs",
            fontSize = 32.sp,
            color = Color.White,
            modifier = Modifier.fillMaxWidth()
        )

Centrar un Image en Compose

Cuando emulamos el proyecto al momento de rotar la pantalla aun la imagen no abarca todo el ancho y como no hay scroll no es posible ver los Text que están debajo de la imagen, para solucionar esto lo primero es igual que en el Text usar modifier – fillMaxWidth  para poder centrarlo y a lo ancho establecemos una altura fija en dp.

Image(
            modifier = Modifier.fillMaxWidth().height(400.dp),
            painter = painterResource(id = R.drawable.aristidevsbackground),
            contentDescription = "logo Aristidevs"
        )

Añadir Scroll en Compose

En Compose no existen los Scroll (al menos por ahora no los veremos), pero existe una alternativa a esto llamado LazyColumn el cual sustituirá a Column, este componente actúa como un RecyclerView que prepara lo que se va a ver en pantalla, cargando componentes por arriba y por debajo, y a medida que se hace scroll se van cargando los nuevos Items con el fin de optimizar la memoria puesto que no tiene caso cargar todos los Items que no se están utilizando.

@Preview(showBackground = true)
@Composable
fun app() {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {
        Image(
            modifier = Modifier.fillMaxWidth().height(400.dp),
            painter = painterResource(id = R.drawable.aristidevsbackground),
            contentDescription = "logo Aristidevs"
        )
        Text(
            text = "Aristidevs",
            fontSize = 32.sp,
            color = Color.White,
            modifier = Modifier.fillMaxWidth()
        )
        Text(text = "Suscribete", color = Color.White)
        Text(text = "Hola", color = Color.White)
    }
}

Después de agregar LazyColumn habrá muchos errores, esto porque un LazyColumn solo puede contener Items.

Agregar un Item en Compose

Es posible agregar diferentes Text, Image, etc. a diferentes Items pero en este caso no es necesario ya que son pocos, y basta solo con agregar la palabra reservada item seguido de llaves que contengan los elementos que queremos agrupar

@Preview(showBackground = true)
@Composable
fun app() {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {
        item {
            Image(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp),
                painter = painterResource(id = R.drawable.aristidevsbackground),
                contentDescription = "logo Aristidevs"
            )
            Text(
                text = "Aristidevs",
                fontSize = 32.sp,
                color = Color.White,
                modifier = Modifier.fillMaxWidth()
            )
            Text(text = "Suscribete", color = Color.White)
            Text(text = "Hola", color = Color.White)
        }
    }
}

Continúa con el curso: Capítulo 3 – Filas en Jetpack Compose

Te recuerdo que puedes seguirme en mis redes sociales en Aristi.Dev. Y si tienes dudas con este o cualquier otro artículo del blog únete al Discord de la comunidad y te ayudaremos.