Tenemos ya una App de lo más resultona después de todos los artículos que hemos visto hasta ahora. Puedes encontrarlos todos bien ordenaditos de forma gratuita en el área privada de Compose Expert.
¡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.
Pero antes de finalizar nuestro camino, quería mostrarte un elemento muy típico en el Material Design y que seguramente vas a usar a menudo: las Cards o tarjetas.
Qué son las Cards
Las Cards contienen un contenido y unas acciones relacionadas con un único tema.
Son una unidad estructurada de información que nos permite tanto consultar contenido como realizar acciones, si procede.
Esto nos podría encajar muy bien con cada uno de los elementos que tenemos en el listado de nuestra App. De forma un tanto sencilla los hemos delimitado con unos paddings, pero podríamos hacer más, podríamos usar este componente.
Cómo usar las Cards de Jetpack Compose
Lo único que necesitas es rodear el componente que quieras, con un Card:
Card(
modifier = modifier.clickable { onClick() }
) {
Column {
Thumb(mediaItem)
Title(mediaItem)
}
}El modifier anteriormente estaba en la Column, pero ahora hay que moverlo al Composable más externo que es la Card.
El aspecto inicial es muy sutil:
Un leve efecto redondeado (de 4dp) y una sombra casi imperceptible (de 1dp), pero todo esto es modificable.
Existen un par de Cards diferentes, y te voy a enseñar cómo definir cada una
Card Elevada
Es la que tenemos por defecto. La elevación es 1dp pero la podemos ampliar para que sea más evidente:
Card(
elevation = 8.dp
) {...}
También le podemos modificar el radio de los bordes si queremos:
Card(
elevation = 8.dp,
shape = RoundedCornerShape(8.dp)
) {...}
Card Contorneada
En vez de por una elevación, los límites se definen por un pequeño borde. Esta forma parece que es la que se está poniendo más de moda últimamente.
Necesitamos quitar la elevación y ponerle un borde. Para que se note un poco mejor, le voy a quitar también el fondo verde al Title, y a dejar el de la Card, que por defecto es el surface color definido en el tema.
Card(
elevation = 0.dp,
border = BorderStroke(1.dp, Color.LightGray)
) {...}
Otros elementos configurables de las Cards
Aparte de lo visto, podemos modificar otros elementos:
backgroundColor: se puede modificar el fondo de la tarjeta, a uno distinto del genéricosurface.contentColor: el color por defecto que tendrá el contenido. Por ejemplo, cambia el color del título en nuestro caso.
Por poner un ejemplo:
Card(
modifier = modifier.clickable { onClick() },
backgroundColor = MaterialTheme.colors.primary,
contentColor = MaterialTheme.colors.secondary
) {...}Puedes ver el ejemplo de uso de Cards en el repositorio de GitHub.
Añade todo lo que necesites a las Cards
Por supuesto, las Cards pueden tener texto, iconos, botones, y todo lo que necesiten.
Un ejemplo que definen en las guías de estilo:
En el siguiente veremos los temas, y cómo estos pueden afectar a las Cards y al resto de componentes de la UI.
Si quieres aprender más sobre Jetpack Compose, puedes acceder ya mismo al área privada de Compose Expert de forma gratuita, donde tendrás todo este contenido, más contenido exclusivo, soporte y muchas sorpresas.
Apúntate ahora a Compose Expert y accede a más de 3h de contenido gratuito, soporte, extras y mucho más totalmente gratis.
