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
Explora el dibujado de íconos y a la personalización de imágenes en tus aplicaciones iOS en esta clase.
Para comenzar, debes tener un archivo en Xcode con el componente más básico, el texto "hello world". Vamos a transformar este texto en una imagen de sistema. Borra el texto y utiliza Image
con el identificador de system name
, que será un string. Por ejemplo, usa "star"
para obtener un ícono de estrella. Estos identificadores vienen de la librería de símbolos de sistema de Xcode, accesible desde la esquina superior derecha donde está el icono de "+".
Los íconos de sistema pueden ser tratados de manera similar al texto en cuanto a su tamaño y estilo. Para cambiar el tamaño, usa el modifier font
. Configura, por ejemplo, font(.largeTitle)
para aumentar el tamaño de tu ícono. Además, puedes personalizar el peso de la fuente usando .bold()
para darle un aspecto más robusto.
Para darle color, aplica el foregroundColor
modifier con el color que prefieras:
Image(systemName: "star")
.font(.largeTitle)
.bold()
.foregroundColor(.yellow)
Este código generará una estrella amarilla, grande y negrita.
Si prefieres tratar tu ícono como una imagen, puedes usar el modifier resizable
seguido de frame
para establecer un nuevo ancho y alto. Por ejemplo:
Image(systemName: "star")
.resizable()
.frame(width: 100, height: 100)
Esto ajustará tu ícono a las dimensiones especificadas sin perder calidad.
Si deseas cambiar entre una estrella contorneada y una rellena, debes buscar el ícono adecuado en la librería, por ejemplo, "star.fill"
para una estrella totalmente rellena:
Image(systemName: "star.fill")
Además de los íconos de sistema, SwiftUI permite usar imágenes personalizadas cargadas desde los assets. Puedes utilizar imágenes en formatos PNG, SVG, o PDF. Primero, ve a los assets en Xcode, haz clic en el botón "+" y selecciona Image Set
. Luego, ajusta el scale
al single scale
si es necesario. Puedes arrastrar y soltar tu imagen desde el Finder directamente al Xcode.
Para incluir tu imagen en el ContentView
, solo nómbrala como lo hiciste en los assets, por ejemplo, "logo"
. Si deseas ajustar su tamaño:
Image("logo")
.resizable()
.frame(width: 200, height: 200)
Si notas distorsiones, aplica el modifier aspectRatio
con el contentMode
adecuado:
fit
: Ajusta la imagen dentro del frame.fill
: Rellena el espacio permitido, incluso si se sale del frame.Para visualizar cómo el aspectRatio
afecta tu imagen, añade un background
colorido:
Image("logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200)
.background(Color.gray)
Este código mantiene la relación de aspecto de la imagen sin cortes incómodos.
Atrévete a utilizar estos conocimientos, modifica tu botón de la clase pasada cambiando el texto por una imagen, y compártelo en los comentarios. ¡Nos vemos en la próxima lección para seguir explorando SwiftUI!
Aportes 3
Preguntas 0
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?