Completando nuestra pantalla de inicio de sesión

Clase 7 de 36 • Curso de Desarrollo de Aplicaciones iOS con SwiftUI

Resumen

¿Cómo completar la pantalla de inicio de sesión en Xcode?

¿Estás listo para llevar tu pantalla de inicio de sesión al siguiente nivel en Xcode? ¡Hoy es tu día de suerte! En esta lección, aprenderemos cómo implementar toda la funcionalidad gráfica necesaria, incluyendo vistas ajustables al ancho de la pantalla y la incorporación de los botones, como el de "iniciar sesión". Así que prepárate tu entorno de desarrollo, y vamos al lío.

¿Cómo añadir el texto de contraseña?

Para empezar, nos centraremos en añadir un texto indicativo del campo de contraseña. Si ya tienes un diseño similar para el campo de correo electrónico, entonces, estás a medio camino. Simplemente copia el texto de correo, y pégalo debajo del divisor exacto donde debería aparecer "Contraseña", asegurándote de cambiar su color a blanco:

Text("Contraseña")
    .foregroundColor(.white)

¿Cómo ajustar el texto de "olvidaste tu contraseña"?

Necesitamos poner en nuestra vista el texto "¿Olvidaste tu contraseña?", alineado a la derecha y en color Dark Cyan. Aquí te mostramos cómo puedes hacerlo:

Escribe el texto:

Text("¿Olvidaste tu contraseña?")
    .foregroundColor(Color("DarkCyan"))

Ajusta su tamaño y posición:
Cambia el fontWeight y ajusta su frame para alinearlo adecuadamente:
```
.font(.footnote)
.frame(width: 300, alignment: .trailing)
```

¿Cómo implementar el botón de iniciar sesión?

El botón de "iniciar sesión" es crucial en tu interfaz, y aquí te muestro cómo desarrollarlo con un diseño atractivo:

Crea la acción: Antes de definir el botón, crea una función que se ejecutará al hacer clic.
```
func iniciarSesion() {
    print("Estoy iniciando sesión")
}
```

Define el botón y su vista:
Diseña el botón usando un label y asegúrate de que se integre adecuadamente en tu interfaz.

Button(action: iniciarSesion) {
    Text("Iniciar sesión")
        .fontWeight(.bold)
        .foregroundColor(.white)
        .frame(maxWidth: .infinity)
        .padding(.vertical, 11)
        .overlay {
            RoundedRectangle(cornerRadius: 6)
                .stroke(Color("DarkCyan"), lineWidth: 2)
        }
        .shadow(radius: 6, color: .white)
}

¿Cómo incorporar botones de método alternativo de inicio de sesión?

Finalicemos añadiendo botones para Facebook y Twitter que permitirán a los usuarios iniciar sesión mediante estas redes sociales, ubicados en un HStack para lograr un efecto horizontal:

Añade un texto descriptivo:

Text("Inicia sesión con redes sociales")
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, alignment: .center)

Crea los botones:
Utiliza botones que se ajusten al diseño y al concepto de UX/UI:

HStack {
    Button(action: /* Tu acción de Facebook */) {
        Text("Facebook")
            .foregroundColor(.white)
    }
    Button(action: /* Tu acción de Twitter */) {
        Text("Twitter")
            .foregroundColor(.white)
    }
}

Este es un reto excelente para trabajar por ti mismo: intenta estilizar estos botones de manera similar al de "iniciar sesión" para mantener la consistencia en tu aplicación.

La clave en estos elementos es experimentar y adaptar cada componente a tus necesidades específicas de diseño y funcionalidad. Sigue adelante y no dudes en explorar y aprender más sobre SwiftUI. ¡Tu itinerario de programación apenas está comenzando!

Jose Marco Fuentes Escamilla

student•

Dejo un pequeño aporte: Agregué (solo para practicar) un botón con la imagen de un ojo (como usualmente se le incluyen a algunos formularios de contraseña). Al darle click se cambia el SecureField por un TextField para dejar ver la contraseña.

Jesús Daniel Medina Cruz

student•

Muy buena aportación. Te agradecería que compartieras el código utilizando el editor de comentarios de Platzi.

/// Si tu código viene en este formato 
/// es más fácil de copiar 
/// y compartir

Joaquin Segovia

student•

Aplique tu código pero al reciéntenlo note que el Secure Field hace que al cambiar, suba un pixel todo el contenido de abajo... eso se puede solucionar??

Francisco Javier Vázquez Paredes

student•

Un pequeño aporte: Para que el placeholder del correo no se vea en color azul se puede definir de la siguiente manera:

Text(verbatim:"ejemplo@gmail.com")
                            .font(.caption)
                            .foregroundColor(.gray)

Aldo David Garcia Garduño

student•

Excelente clase!

Saul Burgos

student•

Lo unico que no estoy deacuerdo es que la funcion la escribio fuera de los struct entonces quedo de manera global...

Todo lo demas quedo bien explicado

Nicolas Silva

student•

tremendamente de acuerdo, creo que no aplico el MVVM ahi xd

Fabricio Fernandez

student•

¿la solución sería incluirla dentro de un struct?

Julio cesar cruz calderón

student•

aqui otra opcion!!!

Rene Cruz Flores

student•

Pienso que el elemento de “¿Olvidaste tu contraseña?” debería ser un botón, ya que si es un texto no se podrá seleccionar, y aunque no esté implementada su acción, es preferible que sea un elemento seleccionable. Aquí mi cambio:

Grethell Vargas

student•

En vez de width: 300, no sería mejor que sea una proporción del width de la pantalla?

Andrés Sánchez

student•

Código DRY para los botones de las redes sociales, es un struct que regresa un view, estoy utilizando el init por defecto para pasarle el label y las acciones. El color esta en el figma el nombre es el código

HStack{
        Spacer()
        SocialNetworkButton(label:"Facebook",action: makeLoginFB)
        Spacer()
        SocialNetworkButton(label:"Twitter",action: makeLoginTW)
        Spacer()
} 

struct SocialNetworkButton:View {
    var label: String
    var action: () -> Void
    var body: some View{
        Button(action: action, label: {Text(label)
                .font(.caption)
                .fontWeight(.bold)
                .foregroundColor(.white)
                .frame(width: 150, height: 30, alignment: .center)
                .background(Color("24385B"))
                .cornerRadius(10.0)
        })   
    }
}```

Tulio Junior Rangel Nuñez

student•

Challenge accepted:

Jesús Daniel Medina Cruz

student•

La forma adecuada para hacer que el ancho del texto rellene la vista que lo contiene es la siguiente:

Text("¿Olvidaste tu contraseña?")
	.font(.footnote)
	.frame(
		maxWidth: .infinity,
		alignment: .trailing
	)

Sólo con utilizar maxWidth: .infinity logramos el efecto deseado.

La razón de que no sea apropiado utilizar números fijos es que en diferentes tamaños de pantalla, nuestra vista no se verá igual. Este es un principio de responsive design.

Joaquin Segovia

student•

Secure Field hace que al cambiar, suba un pixel todo el contenido de abajo... eso se puede solucionar??

Juan David Salazar Gil

student•

Hola tengo una pregunta sobre esta alerta que me sale al crear un proyecto nuevo en Xcode. saben como puedo solucionar eso ?

Duwal Abel Varillas Castro

student•

¿La funcion "iniciarSesion" del minuto 7:34 no podria estar dentro de la estructura "iniciarSesionView"?

Alejandro Zalazar

student•

Si puede, desde mi punto de vista es una mala práctica lo que ha mostrado.

Manuel Alejandro Aguilar Téllez Girón

student•

Yo necesitaba hacer otro botón:

Así que este fue mi código:

Button(action: {
  print("Iniciar Sesión")
}, label: {
  ZStack {
    RoundedRectangle(cornerRadius: 30)
      .shadow(color: .white, radius: 6)
      .foregroundStyle(.white)
      .frame(height: 50)
    
    Text("INICIAR SESIÓN")
      .foregroundStyle(Color("Color-Orange"))
      .fontWeight(.bold)
      .frame(maxWidth: .infinity)
      .padding(.vertical, 12)
  }
})
```Espero le sirva a alguien

Gaspar Dolcemascolo

student•

Dejo mi Componente de TextField, incluye todo lo necesario para crear los inputs como el diseño

struct FormField: View {
    let label: String
    let placeholder: String
    var isSecure: Optional<Bool> = false
    var value: Binding<String>
    @FocusState private var isFocused: Bool
    @State var showSecureValue: Bool = false
    
    var body: some View {
        // Label
        Text(self.label).foregroundColor(
            isFocused ? .white : Color("Dark-Cian"))
        .fontWeight(.bold).font(.title2)
        
        
        if isSecure == false {
            TextField(text: value) {
                Text(placeholder).foregroundColor(.gray)
            }.foregroundColor(.white)
                .bold()
                .focused($isFocused)
                .onChange(of: isFocused) { isFocused in
                    self.isFocused =  isFocused
                }
        } else {
            HStack {
                VStack(alignment: .leading) {
                    if showSecureValue {
                        HStack {
                            TextField(text: value) {
                                Text(placeholder).foregroundColor(.gray)
                            }.foregroundColor(.white)
                                .bold()
                                .focused($isFocused)
                                .onChange(of: isFocused) { isFocused in
                                    self.isFocused =  isFocused
                                }
                            Button(action: self.tabSecureField, label: {
                                if showSecureValue {
                                    Image(systemName: "eye").foregroundColor(.white)
                                } else {
                                    Image(systemName: "eye.slash").foregroundColor(.white)
                                }
                            })
                        }
                    } else {
                        HStack {
                            SecureField(text: value) {
                                Text(placeholder).foregroundColor(.gray)
                            }.foregroundColor(.white)
                                .bold()
                                .focused($isFocused)
                                .onChange(of: isFocused) { isFocused in
                                    self.isFocused =  isFocused
                                }
                            Button(action: self.tabSecureField, label: {
                                if showSecureValue {
                                    Image(systemName: "eye").foregroundColor(.white)
                                } else {
                                    Image(systemName: "eye.slash").foregroundColor(.white)
                                }
                            })
                        }
                    }
                }
            }
        }
        
        // Bottom line
        Divider().frame(height: 1).background(isFocused ? .white : Color("Dark-Cian"))
        
    }
    
    func tabSecureField() {
        self.showSecureValue = !showSecureValue
    }
}
// USO Con modificadores para tipo de teclado Email
struct SigninView: View {
    @State var email = String()
    @State var password = String()
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                FormField(label: "Email",
                     placeholder: "example@gmail.com",
                     value: $email).keyboardType(.emailAddress).autocapitalization(.none)
                
                Divider().frame(height: 30)
                
                FormField(label: "Password",
                     placeholder: "*****",
                     isSecure: true,
                     value: $password)
                
                Divider().frame(height: 12).autocapitalization(.none)
                
            }.padding(.horizontal, 20)
            VStack(alignment: .trailing) {
                HStack {
                    Spacer()
                    Text("Fogote your password?").foregroundColor(Color("Dark-Cian"))
                }
            }.padding(.horizontal, 20)
        }
    }
}

Christians Bonilla

student•

Lo hecho todo muy diferente a lo que el profesor explica que con el mismo fin dejare parte de mi codigo en Github https://github.com/chrisballack/GameSteamPlatziApp

Diego Gerardo Corbinaud Castañeda

student•

Vittorio Giuseppe Babino

student•

Alejandro Reyna

student•

Tengo la mala costumbre del maquetado de páginas con modelo de caja (jaja), así que por mi parte, todo lo metí en un stack al cual le añadí un padding de 30 y lo dejé extenderse al infinito. Y alinee el botón de "Forgot password" con un HStack y un spacer, para quien le sirva.

Juan David Salazar Gil

student•

![](url