Programando la primera pantalla en módulos

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

Contenido del curso

Introducción al curso

Creando las primeras pantallas de la app

Aplicando arquitectura MVVM

Reproductor y búsqueda de video

Últimas pantallas de la app

Utilizando la cámara y fotos del iPhone

¿Qué más posibilidades tiene SwiftUI?

36
Mejoremos nuestra app
00:52 min

Tomar examen

Resumen

Recuerda que puedes descargar las imágenes del proyecto desde Figma.

Comentarios

Froylan Almeida

student•

El Logo

Julio Alberto Ocampo Rangel

student•

Muchas gracias :)

Hector Hugo Luna Miranda

student•

Pueden descargar todos los recursos y copiar los colores desde el proyecto de firma.

Para los colores seleccionan que quieren el código para iOS y nada más es copiar y pegar.

Espero les sirva.

Maximiliano Ovando Ramírez

student•

Mi avance del proyecto.

Yo en este caso realicé dos cosas extras para una mejor programación del proyecto.

Obtuve el color que necesitaba de la página. Y posteriormente lo agregué en una carpeta exclusiva para colores de nuestro proyecto.

De igual manera lo hice con la imagen.

Mi código

//
//  ContentView.swift
//  Stream Games
//
//  Created by Maxezio on 28/01/22.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
       
        ZStack{
            
            Color("Background").ignoresSafeArea()
            
            VStack{
                
                Image("logoAPP").resizable().aspectRatio(contentMode: .fit).frame(width: 250)
                
                LoginRegisterView()
                
            }
            
        }
        
    }
}

struct LoginRegisterView: View {
    var body: some View{
        
        HStack{
            
            Text("INICIA SESIÓN")
            
            Text("REGISTRATE")
            
            
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Resultado

Iader Emir Garcia Gomez

student•

Gracias!

Tulio Junior Rangel Nuñez

student•

El proyecto es retador y emocionante, lástima que la API esté caída, ojalá la levanten de nuevo, le encuentren un nuevo host o algo.

Gines Heredia Cuadrado

student•

Adjunto las dos imágenes por si alguien tiene algún problema para descargarlas

Miguel Torres

student•

Hello, te dio algún problema para descargarla? 😃

Gines Heredia Cuadrado

student•

No, yo las descargué desde sigma. De esta manera no tienes que entrar.

Gerardo Estrella

student•

Hola a todos los que están tomando el curso. Quiero compartirles una forma alternativa de definir el color del fondo (background).

En lugar de configurarlo directamente en el código, podemos hacerlo a través de los Assets:

Abre los Assets de tu proyecto.
Crea un nuevo Color Set.
En el panel de propiedades, define el color utilizando un valor hexadecimal o RGB.

Luego, para utilizarlo en tu código, simplemente llama al color con:

Color("bgColor")

Nota: bgColor es el nombre que asigné al Color Set al crearlo.

Alejandro Reyna

student•

Para la versión actual de XCode (En mi caso, la actual es 14.2) la View Color recibe de parámetro un UIColor. El cual creo puede crearse desde un Color Set (en el archivo assets) o, para seguir el curso de la forma más apegada se haría de la siguiente forma:

Color(UIColor(red: same, green: same, blue: same, opacity: same)

Entiéndase "same" cómo los valores que puso el instructor en el curso.

Giancarlo Castañeda García

student•

Aquí mi primera version con algunos errores aún. Separé las imágenes y colores en archivos que acceden a los assets, para así desde el código llamarlas como constantes.

//
//  ContentView.swift
//  Stream Games
//
//  Created by Maxezio on 28/01/22.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
       
        ZStack{
            
            Color("Background").ignoresSafeArea()
            
            VStack{
                
                Image("logoAPP").resizable().aspectRatio(contentMode: .fit).frame(width: 250)
                
                LoginRegisterView()
                
            }
            
        }
        
    }
}

struct LoginRegisterView: View {
    var body: some View{
        
        HStack{
            
            Text("INICIA SESIÓN")
            
            Text("REGISTRATE")
            
            
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Programando la primera pantalla en módulos

Introducción al curso

Construyamos una app para iOS

Introducción a la arquitectura MVVM

Planeando nuestra app

Creando las primeras pantallas de la app