Definiendo ButtonLike recetas
Ejercicio
Vamos a definir la siguiente prueba de un Card donde se visualizará información de una receta. En el preview se muestra una card siguiendo los convenios de Material Design 3 (M3).
En la parte inferior derecha se muestra un botón de tipo Like que vamos a definir nosotros a partir de otros componentes de M3. Dicho botón, mostrará un contador de los likes que ha recibido la receta de todos los usuarios y un icono que indicará si el usuario actual ha pulsado el botón o no. Además, abajo fuera del card, un botón que simulará que otro usuario ha pulsado el botón Like incrementando la cuenta de los mismos.
- Puedes partir del siguiente proyecto: Recetas_vacio.zip
Paso 1: Definiendo un componente ButtonLike
En el paquete com.pmdm.recetas.ui vamos a crear el paquete composables donde según la arquitectura propuesta en el curso, se definirán componentes de la capa de UI que se puedan reutilizar en diferentes features y aplicaciones. Dentro crearemos el paquete buttonlike donde definiremos el componente en el fichero ButtonLike.kt.
El aspecto de la preview del componente ButtonLike será el de la imagen de la derecha donde tenemos en un row un botón al que no se le ha dado like e indica 4 likes en total y otro donde hemos pulsado like y además hemos sobrepasado los 100 likes y por tanto la muestra es 99+ indicando que tenemos 100 o más likes.
El interface de la función composable que define nuestro componente ButtonLike será el siguiente:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ButtonLike(
iLike: Boolean, // Estado que indica si se ha pulsado like o no.
numberOfLikes: Int, // Número de likes que llevamos.
onILikePressed: () -> Unit // Función que se ejecutará cuando se pulse el botón.
)
El componentes estará formado por:
Un Box que contendrá:
-
Un
IconButtonde M3 que gestionará elonILikePressedy que tendrá los modificadoresclipybackgroundcon los valores correspondientes definidos enButtonDefaultsde M3.- Un
Iconcon el tamaño de los iconos en los botones y el color del contenido en los botones definidos enButtonDefaultsde M3.
- Un
-
Un
Badgede M3 alineado abajo a la derecha y un componenteTextque mostrará el número de likes.
Define un @Preview para que se muestre como la imagen de ejemplo anterior.
Paso 2: Definiendo el Card Receta
En el paquete com.pmdm.recetas.ui vamos a crear el paquete features donde según la arquitectura propuesta en el curso, se definirán componentes de la capa de UI que serán características de la aplicación como visualizar una receta. Dentro crearemos el paquete receta donde definiremos el componente en el fichero Receta.kt.
Definiremos una clase ButtonLikeUiState que contendrá el estado del componente ButtonLike para nuestra receta y que será el siguiente:
data class ButtonLikeUiState(
val numberOfLikes: Int,
val iLike: Boolean
)
El interface de la función composable que define nuestro componente Receta será el siguiente:
@Composable
fun Receta(
iLike: ButtonLikeUiState,
recipeName: String,
recipeDescription: String,
recipeChef: String,
onILikePressed: () -> Unit
)
El componentes estará formado por:
Un Card con similar al ejemplo de los apuntes. Pero con la diferencia de que el primer texto tendrá el tamaño MaterialTheme.typography.headlineSmall. EL resto de componentes los dejamos a tu criterio para que se parezca lo máximo posible a la imagen de ejemplo.
Paso 3: Definiendo el @Preview
A continuación tienes el código del preview de la primera imagen de este ejercicio y en el cual debes completar el código donde se defines los estados y los manejadores de los mismos.
@Preview(showBackground = true)
@Composable
fun RecetaPreview() {
// Aquí definiremos los estados.
RecetasTheme {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Receta(
iLike = iLikeState,
recipeName = "Magdalemas de la abuela",
recipeDescription = "Fabulosas magdalenas con pepitas de chocolate y un suave sabor a naranja.",
recipeChef = "Carlos Arguiñano",
onILikePressed = onLocallyLikePressed
)
Spacer(modifier = Modifier.size(20.dp))
Button(onClick = onRemoteLikePressed) {
Text(text = "Otro usuario pulsa Like")
}
}
}
}