Después de construir las pantallas de inicio de sesión y registro, llega un momento clave: comprobar que todo funcione correctamente y pulir los detalles que marcan la diferencia en la experiencia de usuario. Aquí se revisa el resultado en Xcode, se resuelven los retos previos y se ajustan elementos visuales como colores y alineaciones para que la interfaz quede profesional.
¿Cómo se resolvió el reto de alineación y eliminación de elementos?
El reto consistía en dos tareas: quitar el elemento innecesario ("¿Olvidaste tu contraseña?") y alinear los campos de texto hacia la izquierda. La solución fue directa:
- Se añadió el modificador alignment: .leading en el VStack correspondiente para que los elementos de texto (correo, contraseña, confirmar contraseña) se alinearan a la izquierda [1:07].
- Al eliminar el texto "¿Olvidaste tu contraseña?", se perdía el frame de trescientos puntos que hacía que los demás elementos se expandieran correctamente. Para compensarlo, ese frame de trescientos se reasignó al campo de correo electrónico [1:28].
- Al campo de correo electrónico también se le aplicó alignment: .leading, ya que el diseño lo requiere específicamente.
Este ajuste es un buen ejemplo de cómo en SwiftUI el frame de un elemento puede influir en el tamaño de todos los elementos hermanos dentro de un mismo contenedor.
¿Cómo se programaron los botones de Facebook y Twitter?
Los botones de redes sociales se ubican en la parte inferior de la pantalla y están embebidos dentro de un HStack, ya que se muestran en disposición horizontal [2:02].
Antes de los botones hay un texto que dice "Iniciar sesión con redes sociales", con estas propiedades:
- Frame con maxWidth: .infinity para expandirse.
- Alineamiento centrado.
- Color blanco.
Cada botón comparte una estructura similar. Por ejemplo, el botón de Facebook tiene:
- Un label con texto "Facebook".
- Font de tipo subheadline, que no es un título grande pero tiene un tamaño visible [2:30].
- Font weight en negritas (bold).
- Color de texto blanco.
- Padding vertical de 3.0.
- Frame con maxWidth: .infinity para que crezca dentro de su contenedor, que en este caso es el HStack.
- Background color llamado blue gray, un color personalizado que se encuentra en el documento de diseño y se agrega mediante assets en Xcode [3:07].
- Clip shape con RoundedRectangle y un radio de esquina de cuatro puntos.
- Un padding adicional para separarlo del botón de Twitter.
El botón de Twitter sigue exactamente la misma estructura, cambiando únicamente el texto y el color de fondo.
¿Qué es clip shape y para qué sirve?
El modificador clipShape permite recortar la forma visual de un elemento. Al usarlo con RoundedRectangle(cornerRadius: 4), los botones obtienen esquinas ligeramente redondeadas, lo que les da un aspecto más pulido y coherente con el diseño.
¿Cómo se corrigió el color del texto en los campos de entrada?
Al ejecutar la aplicación y probar los text fields, se detectó que el color del texto era negro y no se distinguía bien sobre el fondo oscuro [4:33]. La solución fue agregar el modificador foregroundColor(.white) a cada campo.
Un detalle importante: al aplicar este cambio, se colocó accidentalmente en el SecureField en lugar del TextField. Esto sirvió como recordatorio de que hay que verificar exactamente en qué elemento se aplica cada modificador [5:04].
Como pequeño reto, queda pendiente aplicar ese mismo cambio de color a todos los demás campos de texto y secure fields en ambas pantallas.
¿Qué sigue después de verificar las pantallas?
Con las pantallas de inicio de sesión y registro funcionando correctamente, el siguiente paso es implementar la navegación hacia la pantalla home [5:30]. Esto implica pasar de alternar entre vistas dentro de una misma pantalla a realizar una navegación real entre pantallas distintas en SwiftUI.
Si algún paso resulta complicado, vale la pena repasar las lecciones anteriores. Lo importante es avanzar a un ritmo cómodo y constante. ¿Qué parte del diseño de botones te resultó más interesante? Comparte tu experiencia en los comentarios.
