Pantalla home: programación de interfaces estáticas

Clase 13 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 desde Figma.

Comentarios

Anthony Ismael Manotoa Moreno

student•

Les dejo acá las variables con las URLs :D

struct SubModuloHome:View {
    @State var url = "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4"
    @State var isPlayerActive = false
    let urlVideos:[String] = ["https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256671638/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256720061/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256814567/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256801252/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256757119/movie480.mp4"]

Stiven Castillo Montero

student•

Debajo del HStack de input de busqueda va este pedazo

...
}.padding([.top, .leading, .bottom], 11.0)
                .background(Color("Blue-Gray"))
                .clipShape(Capsule())

ScrollView(showsIndicators: false){
                SubModuloHome()
                    
                }

Porque al parecer no muestra como lo hace

MIGUEL BELLO

student•

gracias

juan pablo gómez quiroga

student•

No me gustó que del video 12 al 13 se saltararon una asignacion de codigo, por ejemplo, el struct llamado "SubModuloHome" y el Spacer que asignaron a la imagen y al textfield para que estos subieran, los anterior pensando en personas que quizá les sea mas dificl identificar esto que dieron por hecho

Tulio Junior Rangel Nuñez

student•

Completamente de acuerdo contigo, no fue difícil deducir lo que hay que hacer para que la pantalla quede igual a como inicia la clase, pero aún así ése tipo de cosas no deberían suceder

Johán Andrés Suárez Quintanilla

student•

La verdad, si, que complicado se hace el seguir esta parte, porque toca ir al código a revisar que fue lo que pasó y me ví la mitad del video creyendo que lo arreglaban pero no, hasta me devolví al anterior, pero nunca se hizo una acotación de ello

Jesús Henríquez

student•

Es importante mencionar que el NavigationLink(destination:isActive:label) va ser deprecado en futuras versiones, es recomendable utilizar NavigationLink(isActive:destination:label).

Joaquin Segovia

student•

Que bien gracias, lo que si cambia como se llama al destination, requiere {}. NavigationLink(isActive: $isActiveHome, destination: {MenuTabView()}, label: {EmptyView()})

Andy Antonio Paz Cambara

student•

Oye una pregunta si quisiera utilizar mis propios videos debería subirlos a google drive para tener el link ? o como le podría hacer.

Ulises Serrano Pérez

student•

Esta es la nueva url del recurso de la API: link la otra dejo de funcionar pero ya la arreglaron.

Juan Camilo Garzón Patiño

student•

¿De donde descargo la carpeta imagenesDefault? ya que en el drive no esta, osea hay unos juegos pero no los que Juan trabaja en la clase

Carlos Eduardo Gomez García

teacher•

Hola!! Si lees la descripción de la clase puedes ver que te dice que puedes descargar las imágenes desde Figma. 👀

Omar Daniel Centeno

student•

También se cargan vistas previas de los videos, pero eso lo hace a través de las direcciones url, no son imágenes, más bien los videos.

struct SubModuloHome:View {
    @State var url = "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4"
    @State var isPlayerActive = false
    let urlVideos:[String] = ["https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256671638/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256720061/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256814567/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256801252/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256757119/movie480.mp4"]
    
    var body: some View{

Jose Bueno

student•

Para los que tengan problemas con el tema del Navigation, les dejo cómo lo solucione:

NavigationStack {
                ZStack {
                    Button(action: {
                        url = urlVideos[0]
                        print("URL: \(url)")
                        isPlayerActive = true
                    }, label: {
                        VStack (spacing: 0){
                            Image("The Witcher 3").resizable().scaledToFill()
                            Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                .background(Color("Blue-Gray"))
                        }
                    })
                    
                    Image(systemName: "play.circle.fill")
                        .resizable()
                        .foregroundColor(.white)
                        .frame(width: 42, height: 42)
                    
                    
                }.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                    .padding(.vertical)
            }.navigationDestination(isPresented: $isPlayerActive) {
                VideoPlayer(player: AVPlayer(url: URL(string: url)!))
                    .frame(width: 400, height: 300)
            }

Joaquin Segovia

student•

Los iconos del navtab en un celular se ve todo en blanco, alguien probo en un celular??

Joaquin Segovia

student•

Alguien puedo con el espacio de arriba.??... aunque tenga el scroll y dentro del modulo, al agregar el scroll por cualquier lado, me deja ese espacio, cuando voy a la vista de video y vuelo, ahi se acomoda.

Luiggy Tamayo

student•

Me sucede exactamente el mismo problema, ¿Lograste dar con la solución?

Actualmente sigo investigando.

Ramon Gajardo

student•

Hola no como hizo que logo quedara bien arriba porque a mi no?

Fernando Molano Castrillón

student•

Revisa que tengas el SubModuloHome incluido dentro de un ScrollView

Ramon Gajardo

student•

fermolanoc Muchas Gracias eso era

Rodrigo Viveros Ramirez

student•

Hola. alguien tiene la resolución a este problema con la nueva versión 16.0?

Luis Alberto Vargas Méndez

student•

Jose Alberto Martinez Uribe

company_admin•

como saco la ventana donde hace uso de VStack, Hstack?

Aldo Rodriguez Victoria

student•

Una pregunta como seria este bloque de código en la nueva version, gracias.

Nicolas Silva

student•

En el Button() coloca esto

.destinationNavigation(isPresented: $isPlayerActive) {
    VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
}

Nicolas Silva

student•

perdon es navigationDestination xd la dislexia pega fuerte

Nicolás Posa

student•

Arregle el error de NavigationLink de la siguiente manera

  VStack {
            Text("THE MOST POPULAR")
                .font(.title3)
                .foregroundStyle(.white)
                .bold()
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                .padding(.top)
            
            ZStack {
                Button(action: {
                    url = urlVideos[0]
                    print("URL: \(url)")
                    isPlayerActive = true
                }, label: {
                    VStack(spacing: 0) {
                        Image("The Witcher 3").resizable().scaledToFill()
                        Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .background(Color("Blue-Gray"))
                    }
                })
                Image(systemName: "play.circle.fill")
                    .resizable()
                    .foregroundStyle(.white)
                    .frame(width: 42, height: 42)
            }.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                .padding(.vertical)
                .navigationDestination(isPresented: $isPlayerActive) {
                VideoPlayer(player: AVPlayer(url: URL(string: url)!))
                    .frame(width: 400, height: 300)
            }
        }
```VStack {

Text("THE MOST POPULAR")

.font(.title3)

.foregroundStyle(.white)

.bold()

.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

.padding(.top)



ZStack {

Button(action: {

url = urlVideos\[0]

print("URL: \\(url)")

isPlayerActive = **true**

}, label: {

VStack(spacing: 0) {

Image("The Witcher 3").resizable().scaledToFill()

Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

.background(Color("Blue-Gray"))

}

})

Image(systemName: "play.circle.fill")

.resizable()

.foregroundStyle(.white)

.frame(width: 42, height: 42)

}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)

.padding(.vertical)

.navigationDestination(isPresented: $isPlayerActive) {

VideoPlayer(player: AVPlayer(url: URL(string: url)!))

.frame(width: 400, height: 300)

}

}

Oscar Gutiérrez

student•

Button Vs NavigationLink

Mientras sigo las clases del profesor y me doy cuenta que la forma que utiliza esta o será deprecada me toca buscar alternativas que solucionen el problema, hasta el momento he encontrado 2 formas, una es muy similar a la del profesor que seria con un Button y la otra que encontré es solo utilizar un NavigationLink:

Solución con button

ZStack {
	Button(action: {
		url = urlVideos[0]
		print("URL: \(url)")
		isPlayerActive = true
	}) {
			VStack(spacing: 0) {
			Image("thewitcher").resizable().scaledToFit()
			Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).background(Color("Blue-Gray"))
			}
		}.navigationDestination(isPresented: $isPlayerActive, destination: {
			VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
		})
	Image(systemName: "play.circle.fill").resizable().foregroundStyle(.white).frame(width: 42, height: 42)
}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center).padding(.vertical)

Como podemos observar en lugar de agregar un NavigationLink lo ponemos como un modificador del botón (esta solución la vi en un comentario de este curso)

Solución con navigationLink

NavigationLink(destination: {
	VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
 }) {
	ZStack {
		VStack(spacing: 0) {
			Image("thewitcher").resizable().scaledToFit()
			Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).background(Color("Blue-Gray")).foregroundStyle(.white)
		}
		Image(systemName: "play.circle.fill").resizable().foregroundStyle(.white).frame(width: 42, height: 42)
	}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center).padding(.vertical)
}

Personalmente mi favorita porque considero que el código se ve más legible, pero no se si es una buena practica así que toca escoger la que mas te guste.

Diego Gerardo Corbinaud Castañeda

student•

ZStack {
                    Button(action: {
                        url = urlVideos[0]
                        isPlayerActive = true
                    }, label: {
                        VStack(spacing: 0) {
                            Image("The Witcher 3")
                                .resizable()
                                .scaledToFill()
                            
                            Text("The Witcher 3")
                                .frame(
                                    minWidth: 0,
                                    maxWidth: .infinity,
                                    minHeight: 42,
                                    alignment: .leading
                                ).padding(.leading)
                                .background(.blueGray)
                                .font(.subheadline)
                                .bold()
                            
                        }
                    }).navigationDestination(isPresented: $isPlayerActive, destination: {
                        VideoView(url: URL(string: url)!)
                    })
                    

                    Image(systemName: "play.circle.fill").resizable()
                        .foregroundStyle(.white)
                        .frame(width: 42, height: 42)
                }
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                .padding(.vertical)







import SwiftUI
import AVKit

struct VideoView: View {
    let url: URL
    private var player: AVPlayer

    init(url: URL) {
        self.url = url
        self.player = AVPlayer(url: url)
    }
    
    var body: some View {
        VideoPlayer(player: player)
            .onAppear() {
                player.play()
            }
            .onDisappear() {
                player.pause()
            }
            .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    VideoView(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4")!)
}

Eric Eduardo Manzano Leal

student•

struct SubModuloHome:View {
    @State var url = "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4"
    @State var isPlayerActive = false
    let urlVideos:[String] = ["https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256671638/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256720061/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256814567/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256801252/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256757119/movie480.mp4"]

...
}.padding([.top, .leading, .bottom], 11.0)
                .background(Color("Blue-Gray"))
                .clipShape(Capsule())

ScrollView(showsIndicators: false){
                SubModuloHome()
                    
                }

struct SubModuloHome:View {
    @State var url = "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4"
    @State var isPlayerActive = false
    let urlVideos:[String] = ["https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256671638/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256720061/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256814567/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256801252/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256757119/movie480.mp4"]
    
    var body: some View{

NavigationStack {
                ZStack {
                    Button(action: {
                        url = urlVideos[0]
                        print("URL: \(url)")
                        isPlayerActive = true
                    }, label: {
                        VStack (spacing: 0){
                            Image("The Witcher 3").resizable().scaledToFill()
                            Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                .background(Color("Blue-Gray"))
                        }
                    })
                    
                    Image(systemName: "play.circle.fill")
                        .resizable()
                        .foregroundColor(.white)
                        .frame(width: 42, height: 42)
                    
                    
                }.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                    .padding(.vertical)
            }.navigationDestination(isPresented: $isPlayerActive) {
                VideoPlayer(player: AVPlayer(url: URL(string: url)!))
                    .frame(width: 400, height: 300)
            }

  VStack {
            Text("THE MOST POPULAR")
                .font(.title3)
                .foregroundStyle(.white)
                .bold()
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                .padding(.top)
            
            ZStack {
                Button(action: {
                    url = urlVideos[0]
                    print("URL: \(url)")
                    isPlayerActive = true
                }, label: {
                    VStack(spacing: 0) {
                        Image("The Witcher 3").resizable().scaledToFill()
                        Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .background(Color("Blue-Gray"))
                    }
                })
                Image(systemName: "play.circle.fill")
                    .resizable()
                    .foregroundStyle(.white)
                    .frame(width: 42, height: 42)
            }.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                .padding(.vertical)
                .navigationDestination(isPresented: $isPlayerActive) {
                VideoPlayer(player: AVPlayer(url: URL(string: url)!))
                    .frame(width: 400, height: 300)
            }
        }
```VStack {

Text("THE MOST POPULAR")

.font(.title3)

.foregroundStyle(.white)

.bold()

.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

.padding(.top)



ZStack {

Button(action: {

url = urlVideos\[0]

print("URL: \\(url)")

isPlayerActive = **true**

}, label: {

VStack(spacing: 0) {

Image("The Witcher 3").resizable().scaledToFill()

Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

.background(Color("Blue-Gray"))

}

})

Image(systemName: "play.circle.fill")

.resizable()

.foregroundStyle(.white)

.frame(width: 42, height: 42)

}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)

.padding(.vertical)

.navigationDestination(isPresented: $isPlayerActive) {

VideoPlayer(player: AVPlayer(url: URL(string: url)!))

.frame(width: 400, height: 300)

}

}

ZStack {
	Button(action: {
		url = urlVideos[0]
		print("URL: \(url)")
		isPlayerActive = true
	}) {
			VStack(spacing: 0) {
			Image("thewitcher").resizable().scaledToFit()
			Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).background(Color("Blue-Gray"))
			}
		}.navigationDestination(isPresented: $isPlayerActive, destination: {
			VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
		})
	Image(systemName: "play.circle.fill").resizable().foregroundStyle(.white).frame(width: 42, height: 42)
}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center).padding(.vertical)

NavigationLink(destination: {
	VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
 }) {
	ZStack {
		VStack(spacing: 0) {
			Image("thewitcher").resizable().scaledToFit()
			Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).background(Color("Blue-Gray")).foregroundStyle(.white)
		}
		Image(systemName: "play.circle.fill").resizable().foregroundStyle(.white).frame(width: 42, height: 42)
	}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center).padding(.vertical)
}

ZStack {
                    Button(action: {
                        url = urlVideos[0]
                        isPlayerActive = true
                    }, label: {
                        VStack(spacing: 0) {
                            Image("The Witcher 3")
                                .resizable()
                                .scaledToFill()
                            
                            Text("The Witcher 3")
                                .frame(
                                    minWidth: 0,
                                    maxWidth: .infinity,
                                    minHeight: 42,
                                    alignment: .leading
                                ).padding(.leading)
                                .background(.blueGray)
                                .font(.subheadline)
                                .bold()
                            
                        }
                    }).navigationDestination(isPresented: $isPlayerActive, destination: {
                        VideoView(url: URL(string: url)!)
                    })
                    

                    Image(systemName: "play.circle.fill").resizable()
                        .foregroundStyle(.white)
                        .frame(width: 42, height: 42)
                }
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                .padding(.vertical)







import SwiftUI
import AVKit

struct VideoView: View {
    let url: URL
    private var player: AVPlayer

    init(url: URL) {
        self.url = url
        self.player = AVPlayer(url: url)
    }
    
    var body: some View {
        VideoPlayer(player: player)
            .onAppear() {
                player.play()
            }
            .onDisappear() {
                player.pause()
            }
            .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    VideoView(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4")!)
}

Pantalla home: programación de interfaces estáticas

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

Programando la primera pantalla en módulos

Escribiendo la lógica para mostrar dos pantallas

Pantalla de inicio de sesión con SecureField y Scroll

Completando nuestra pantalla de inicio de sesión

Pantalla de registro de usuario

Comprobando el funcionamiento de nuestras pantallas

Estructura de las pantallas con TabView

Creando nuestra pantalla home

Pantalla home: logo y barra de búsqueda