Pantalla home: programación de interfaces estáticas

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

Pantalla home: programación de interfaces estáticas

Resumen

Recuerda que puedes descargar las imágenes desde Figma.

Oscar Gutiérrez

Estudiante

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.

Anthony Ismael Manotoa Moreno

Stiven Castillo Montero

MIGUEL BELLO

juan pablo gómez quiroga

Tulio Junior Rangel Nuñez

Johán Andrés Suárez Quintanilla

Jesús Henríquez

Joaquin Segovia

Andy Antonio Paz Cambara

Ulises Serrano Pérez

Juan Camilo Garzón Patiño

Carlos Eduardo Gomez García

Profesor

Omar Daniel Centeno

Jose Bueno

Luiggy Tamayo

Ramon Gajardo

Fernando Molano Castrillón

Rodrigo Viveros Ramirez

Luis Alberto Vargas Méndez

Jose Alberto Martinez Uribe

Company_admin

Aldo Rodriguez Victoria

Nicolas Silva

Nicolás Posa

Diego Gerardo Corbinaud Castañeda

Eric Eduardo Manzano Leal

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