Fundamentos de SwiftUI y desarrollo de Interfaces
Desarrolla Apps Incre铆bles: primeros pasos con SwiftUI
Creaci贸n de views y uso de preview
Personalizaci贸n de views con modifiers y uso de shapes
Image render
Composici贸n de Layouts con Stacks
ScrollView y carousel
List y ForEach
Estructurando nuestra app
Quiz: Fundamentos de SwiftUI y desarrollo de Interfaces
Interacci贸n del Usuario y Componentes de Entrada
Button y manejo de estado con @State
Text Field y Text Editor
Picker y DatePicker
Toggle y Slider
Formularios
Alertas y Modales
Gestures
Animaciones y uso del ProgressView
Quiz: Interacci贸n del Usuario y Componentes de Entrada
Manejo del Estado y Arquitectura con ViewModels
ViewModels y @ObservedObject
Compartir Datos con @EnvironmentObject
Creaci贸n de Componentes Reutilizables con @Binding
Quiz: Manejo del Estado y Arquitectura con ViewModels
Navegaci贸n Avanzada
Navegaci贸n con NavigationStack
Personalizaci贸n de la Barra de Navegaci贸n
Quiz: Navegaci贸n Avanzada
Lanzamiento de la app
Funcionalidades extra
Lanzamiento en simulador
No tienes acceso a esta clase
隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera
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.
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
}
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)
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!
Aportes 0
Preguntas 0
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?