Introducci贸n al curso

1

Construyamos una app para iOS

2

Introducci贸n a la arquitectura MVVM

3

Planeando nuestra app

Creando las primeras pantallas de la app

4

Programando la primera pantalla en m贸dulos

5

Escribiendo la l贸gica para mostrar dos pantallas

6

Pantalla de inicio de sesi贸n con SecureField y Scroll

7

Completando nuestra pantalla de inicio de sesi贸n

8

Pantalla de registro de usuario

9

Comprobando el funcionamiento de nuestras pantallas

10

Estructura de las pantallas con TabView

11

Creando nuestra pantalla home

12

Pantalla home: logo y barra de b煤squeda

13

Pantalla home: programaci贸n de interfaces est谩ticas

14

Pantalla home: carruseles

Aplicando arquitectura MVVM

15

Creando estructura para arquitectura MVVM

16

Modelando nuestro JSON

17

Peticiones al servidor

18

Mostrar informaci贸n de un servidor de manera din谩mica

19

Mostrar im谩genes de forma din谩mica y eficiente con LazyVGrid

Reproductor y b煤squeda de video

20

Pasar datos entre pantallas

21

Darle datos de inicio a un Canvas

22

Reproducir videos din谩micamente de un servidor

23

Mostrar im谩genes din谩micamente de un servidor

24

Mostrar alertas

25

Programar clase de b煤squeda

26

Programar m茅todo de b煤squeda

脷ltimas pantallas de la app

27

Pantalla de favoritos

28

Pantalla de perfil de usuario

29

M贸dulo de ajustes de perfil con Toggle

30

Pantalla de edici贸n de perfil

31

M贸dulo de edici贸n de perfil

32

Guardado interno de datos

Utilizando la c谩mara y fotos del iPhone

33

Captura de foto de perfil: ImagePicker y vista Sheet

34

Captura de foto de perfil con la c谩mara: modificar librer铆as de terceros

35

Captura de foto de perfil con la c谩mara: recuperar im谩genes guardadas

驴Qu茅 m谩s posibilidades tiene SwiftUI?

36

Mejoremos nuestra app

Pantalla de inicio de sesi贸n con SecureField y Scroll

6/36
Recursos

Aportes 6

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

En la secci贸n de los botones Iniciar Sesi贸n y Reg铆strate, yo prefer铆 quitar los Spacer a lado y lado de los botones y mejor poner un padding horizontal de 30 al contenedor HStack. Igual que hicimos con el VStack de InicioSesionView.
De esta forma queda m谩s parecido al dise帽o original, no tan apretado todo el contenido.

(

Si en el placeholder ([email protected]) no te agarra el color puedes hacer esto:

Text(verbatim: "[email protected]").font(.caption).foregroundColor(.gray)

Yo recomiendo para los placeholders crear una extensi贸n de View y agregar el metodo placeholder

extension View {
    
    func placeholder<Content: View>(
          when shouldShow: Bool,
          alignment: Alignment = .leading,
          @ViewBuilder placeholder: () -> Content) -> some View {

        ZStack(alignment: alignment) {
            placeholder().opacity(shouldShow ? 1 : 0)
            self
        }
    }
}

Que luego podemos utilizar de esta manera, para que quede el c贸digo m谩s limpio y m谩s legible

TextField("", text: $email).placeholder(when: email.isEmpty) {              				 
      Text("[email protected]").font(.caption).foregroundColor(.gray)
}

Cuando un color va ser igual tanto para el modo light como para el modo dark, puedes colocar en el inspector en la parte de Appearances en un valor 鈥淣one鈥

Como complemento a la extencion aportada por Omar, yo crearia otra extencion de View para implementar el TextField completo

extension View {
    
    func customize(
        when shouldShow: Bool,
        hint: String,
        title: String) -> some View {

        VStack(alignment: .leading){
            Text(title).foregroundColor(Color("dark-cyan")).padding(.bottom, -4.0)
            ZStack(alignment: .leading){
                Text(hint)
                    .font(.caption)
                    .foregroundColor(.gray)
                    .opacity(shouldShow ? 1 : 0)
                    .padding(.leading, 4.0)
                self
            }
            Divider().frame(height:1).background(Color("dark-cyan"))
        }
    }
    
}

Y se utlizaria desde asi:

<code> 
 TextField("", text: $email).customize(when: email.isEmpty, hint: "julianmp0", title: "Correo Electr贸nico")

Hice este componente para reutilizar los estilos de los inputs de esta pantalla:

struct GameStreamAuthInput<Content: View>: View {
    let input: () -> Content
    let title: String
    let placeholderText: String
    let showPlaceholder: Bool
    
    init(
        title: String,
        placeholderText: String,
        showPlaceholder: Bool,
        aligment: Alignment = .leading,
        input: @escaping () -> Content
    ) {
        self.input = input
        self.title = title
        self.placeholderText = placeholderText
        self.showPlaceholder = showPlaceholder
    }
    var body: some View {
        Text(title)
            .foregroundColor(Color("dark_cyan"))
        
        ZStack(alignment: .leading){
            input().placeholder(
                when: self.showPlaceholder
            ) {
                Text(self.placeholderText)
                    .font(.caption)
                    .foregroundColor(.gray)
            }
        }
        Divider()
            .frame(height: 1)
            .background(Color("dark_cyan"))
            .padding(.bottom)
    }
}

Y en la pantalla de log in:

                GameStreamAuthInput(
                    title: "Correo electr贸nico",
                    placeholderText: "[email protected]",
                    showPlaceholder: email.isEmpty
                ) {
                    TextField(
                        "",
                        text: $email
                    )
                }
                GameStreamAuthInput(
                    title: "Contrase帽a",
                    placeholderText: "********",
                    showPlaceholder: password.isEmpty
                ) {
                    SecureField(
                        "",
                        text: $password
                    )
                }