Añadir botón de favoritos y configurar icono de aplicación

Clase 22 de 23 • Curso de Desarrollo de Aplicaciones con SwiftUI

Resumen

Iniciemos mejorando nuestra aplicación al agregar la funcionalidad de favoritos. Este es un paso crucial para ofrecer una experiencia más personalizada a los usuarios. Vamos a modificar nuestro código para que las tarjetas puedan ser marcadas como favoritas. Encontraremos el código del ícono de corazón en nuestras vistas Cards y lo ajustaremos para que sea más mantenible. Es fundamental crear una función específica que administre estas acciones, así optimizaremos nuestro proyecto.

¿Cómo crear un botón de favoritos reutilizable?

Al implementar funciones reutilizables, facilitamos tareas futuras de mantenimiento en el código. Para lograr esto, debemos seguir los siguientes pasos:

Crear una función: copiamos el código del ícono de corazón y lo convertimos en una función llamada favoriteButton. Dicha función devolverá una vista que contiene la lógica del ícono de corazón.
```
func favoriteButton() -> some View {
    // Código del botón de favoritos
}
```
Modificar las imágenes: en nuestras vistas de tarjetas, reemplace la imagen del corazón por la nueva función favoriteButton, asegurándonos de que dependa del estado isFavorite del objeto.
```
Image(systemName: card.isFavorite ? "heart.fill" : "heart")
```
Agregar gestos: para interactuar con el ícono, introducimos un gesto de tap que ejecuta el cambio de estado del favorito.
```
.onTapGesture {
    // Código para cambiar el estado de favorito
}
```

¿Cómo manejar el cambio de estado a nivel de aplicación?

Como el cambio de favoritos debe reflejarse en toda la aplicación, se debe configurar desde el AppInfo:

Definir un closure: añadimos un closure llamado onToggleFavorite a la parte superior de la vista para manejar el cambio de estado y lo declaramos como opcional para evitar errores.

Agregar la función en AppInfo: necesitamos una función llamada toggleFavorite que cambiará el estado de isFavorite.

func toggleFavorite(for card: Card) {
    if let index = cards.firstIndex(of: card) {
        cards[index].isFavorite.toggle()
    }
}

Llamar la función desde las vistas: en la lista de vistas de tarjetas, asignamos el closure para que active el cambio de estado.
```
info.toggleFavorite(for: card)
```

¿Cómo personalizar el ícono de la aplicación?

Aunque ya nuestra aplicación tiene casi todas las funcionalidades listas, un aspecto visual clave es el ícono. Un buen diseño puede marcar la diferencia y hacer que nuestra aplicación se destaque.

Ubicar los Assets: primero, debemos acceder a la carpeta assets de nuestro proyecto, donde encontraremos la opción para el ícono de la app.
Configurar el ícono: cambiamos la opción Appearances a None para ofrecer más simplicidad y luego arrastramos nuestro diseño a este espacio.

Diseñar un ícono puede ser un reto creativo emocionante, y si buscas mejorar tus capacidades de diseño, recuerda que la Escuela de Diseño Gráfico en Platzi ofrece muchos recursos útiles. Siempre recuerda que cada detalle cuenta en el mundo del desarrollo de aplicaciones, ¡así que haz que tu app se distinga!