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

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:58

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

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 22 de 23

Clase 22 / 23

Recursos

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!

Resumen

¿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?

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.

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

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

Lanzamiento de tu Primera App con SwiftUI en el Simulador

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

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos