Escribiendo la lógica para mostrar dos pantallas

¿Cómo mostrar múltiples pantallas dentro de una sola?

En el desarrollo de aplicaciones móviles, uno de los retos fue siempre crear interfaces limpias y eficientes. Este artículo te guiará en la creación de una lógica que permita mostrar dos pantallas en una sola, utilizando botones para navegar entre ellas, sin la necesidad de un Navigation View. Acompáñanos en este viaje de ciberdesarrollo donde cada línea de código te acerca a una experiencia de usuario más fluida.

¿Cómo se crean los botones de navegación?

Para comenzar, es esencial implementar dos botones que permitirán alternar entre la pantalla de inicio de sesión y la de registro. Estos botones deben ser fácilmente accesibles y convertir las acciones del usuario en interacciones significativas.

Button(action: {
    // Acción al presionar el botón
}) {
    Text("Iniciar sesión")
}

Button(action: {
    // Acción al presionar el botón
}) {
    Text("Regístrate")
}

¿Cómo se manejan los espacios entre elementos?

El diseño de UX/UI requiere de una distribución armónica de elementos en pantalla. Utilizar espaciadores o Spacer es clave para lograr un layout equilibrado. Aquí se divide el espacio entre los botones para mantener un alineamiento estético y funcional:

HStack {
    Spacer() 
    Button(action: {
        // Acción del botón
    }) {
        Text("Iniciar sesión")
    }
    Spacer()
    Button(action: {
        // Acción del botón
    }) {
        Text("Regístrate")
    }
    Spacer()
}

¿Cómo se gestionan los estados de la aplicación?

Usamos una propiedad envuelta en un State Wrapper para monitorear el estado de la aplicación y determinar qué vista se debe mostrar.

@State private var tipoInicioSesion: Bool = true

Esta variable se encargará de controlar si se muestra la pantalla de inicio de sesión o la de registro.

¿Cómo se muestran las vistas condicionalmente?

Dependiendo de la variable tipoInicioSesion, se emplea un simple pero efectivo if-else para mostrar la vista adecuada:

if tipoInicioSesion {
    InicioSesionView()
} else {
    RegistroView()
}

¿Cómo se implementan las vistas para inicio de sesión y registro?

Creamos dos estructuras que conforman cada una de las pantallas, InicioSesionView y RegistroView, asegurando que cada una cumpla con el protocolo View de SwiftUI.

struct InicioSesionView: View {
    var body: some View {
        Text("Soy la vista de inicio de sesión")
    }
}

struct RegistroView: View {
    var body: some View {
        Text("Soy la vista de registro")
    }
}

¿Cómo se altera el color conforme al estado?

Para mejorar la experiencia visual y la claridad de la interacción, cambiamos los colores de los botones según el estado actual utilizando el operador ternario.

Button(action: {
    tipoInicioSesion = true
}) {
    Text("Iniciar sesión")
}.foregroundColor(tipoInicioSesion ? .white : .gray)

Button(action: {
    tipoInicioSesion = false
}) {
    Text("Regístrate")
}.foregroundColor(tipoInicioSesion ? .gray : .white)

¿Cómo se ajustan los elementos visuales?

Finalmente, para un mejor diseño unificado, aplicamos padding y espaciadores adicionales, asegurando que los elementos no se sobrecarguen y permanezcan dentro de los límites seguros de la interfaz.

VStack {
    Spacer(minLength: 42)
    if tipoInicioSesion {
        InicioSesionView()
    } else {
        RegistroView()
    }
    Spacer()
}.padding(.bottom, 42)

Al dominar estas técnicas, no solo mejorarás la organización de tu código, sino también la experiencia del usuario, lo cual es crucial en un entorno de desarrollo de app móvil. Sigue explorando las infinitas posibilidades que SwiftUI ofrece y permite que tus aplicaciones brillen con innovación y funcionalidad.