Creación de Interfaces Básicas con SwiftUI en iOS

¿Por qué SwiftUI revolucionó el desarrollo de interfaces?

SwiftUI cambió radicalmente el panorama del desarrollo de interfaces para aplicaciones iOS. Desaparecieron los viejos storyboards y el Auto Layout, brindando una forma mucho más directa y elegante de construir interfaces. Sin embargo, es esencial entender cuándo usar SwiftUI, ya que solo es compatible con iOS 13 y versiones posteriores. Esto significa que dispositivos como el iPhone 5, 5C, los iPod y iPads más antiguos están fuera de juego.

¿Cómo crear un nuevo proyecto en SwiftUI?

Para sumergirte en SwiftUI, necesitas crear un nuevo proyecto en Xcode usando algunas configuraciones específicas. Aquí te explico cómo:

1. Crear un nuevo proyecto: Selecciona "Single View App" y asegúrate de elegir SwiftUI como la opción de interfaz de usuario.
2. Definir los ajustes iniciales: Este cambio se observa directamente en el archivo SceneDelegate, que configura una UIWindow y un UIHostingController para mostrar la vista inicial, que por defecto es ContentView.

Cosas únicas de SwiftUI

• Canvas y Preview: El entorno de SwiftUI permite ver previsualizaciones instantáneas de la interfaz en desarrollo. Puedes habilitar y ajustar el canvas para observar cómo se verá tu aplicación.
• Custom Preview: En el preview puedes modificar parámetros para simular diferentes dispositivos, algo que antes requería ejecutar constantemente la aplicación.

¿Cómo estructurar una vista con SwiftUI?

En SwiftUI las vistas se organiza en estructuras visuales como VStack, que facilita agregar varios elementos alineados verticalmente. Todo componente dentro de un body debe estar contenido y alineado bajo un solo padre.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            Text("Welcome to SwiftUI")
        }
    }
}

¿Cómo añadir propiedades a los elementos visuales?

SwiftUI ofrece métodos encadenables para estilizar y personalizar elementos, como cambiar colores, fuentes y agregar márgenes. Por ejemplo, para una imagen:

Image("logo")
    .resizable()
    .frame(width: 250, height: 54)
    .clipped()

Y para un texto:

Text("Inicia sesión para continuar")
    .fontWeight(.light)
    .foregroundColor(.white)
    .multilineTextAlignment(.center)
    .padding(10)

¿Cómo integrar la funcionalidad de entrada de texto?

Las entradas de texto se manejan mediante TextField, que ahora admite estados dentro de las vistas para capturar y manejar su valor.

@State private var emailValue = ""

TextField("Email", text: $emailValue)
    .padding(10)
    .background(Color.white)
    .cornerRadius(25)

Personalización del TextField

Puedes modificar el placeholder, el color del texto mientras escribes, e incluso el color de fondo. Todo se configura rápidamente desde las opciones que el propio SwiftUI te proporciona. Si quieres ver todas las propiedades de un TextField, puedes hacerlo a través del panel de propiedades en Xcode.

¿Cuál es la ventaja de reutilizar componentes en SwiftUI?

Reutilizar componentes es una de las grandes ventajas de SwiftUI. Te permite copiar y adaptar elementos UI de manera ágil, haciendo que el diseño de interfaces sea más eficiente y menos repetitivo. En las siguientes clases se abordarán ejemplos prácticos para crear componentes reutilizables. ¡No te pierdas la oportunidad de dominar esta nueva tecnología!