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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estructura de las pantallas con TabView

10/36
Recursos

¿Cómo crear una aplicación navegable con SwiftUI y Xcode?

El desarrollo de aplicaciones móviles exige familiaridad con diversos conceptos y herramientas. En este artículo, vamos a explorar cómo crear una interfaz de usuario navegable utilizando SwiftUI y Xcode. Precisamente, implementaremos un control llamado TabView para mejorar la estructura y organización de nuestra aplicación.

¿Qué es un navigation view y cómo se implementa?

Un NavigationView es un componente esencial en SwiftUI que permite a los usuarios navegar entre diferentes vistas de una aplicación. Al integrarlo, podemos enlazar distintas pantallas, brindando una experiencia de usuario más fluida.

Para implementarlo, embebemos la vista principal dentro de un NavigationView:

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                // Contenido de la vista
            }
        }
    }
}

Esto permite conectar la pantalla de inicio de sesión o registro a otras pantallas mediante enlaces de navegación (NavigationLink).

¿Cómo configurar un navigation link?

El NavigationLink es el componente que permite saltar de una vista a otra. Puedes establecer qué sucede cuando el usuario realiza una acción específica, como iniciar sesión:

NavigationLink(destination: HomeView(), isActive: $isHomeActive) {
    EmptyView()
}

Aquí, destination apunta a la vista Home y isActive determina si el enlace está activo. Para activar este enlace al iniciar sesión, simplemente cambia el estado de isHomeActive a true.

¿Qué es un tab view y cómo se integra?

El TabView es un componente que permite organizar múltiples vistas en una interfaz de pestañas. Es ideal para aplicaciones con varias secciones, como perfiles, juegos o favoritos.

Para integrarlo, define las vistas que quieres mostrar dentro de él:

TabView {
    HomeView()
        .tabItem {
            Image(systemName: "house")
            Text("Inicio")
        }
    ProfileView()
        .tabItem {
            Image(systemName: "person")
            Text("Perfil")
        }
    GameView()
        .tabItem {
            Image(systemName: "gamecontroller")
            Text("Juegos")
        }
    FavoritesView()
        .tabItem {
            Image(systemName: "heart")
            Text("Favoritos")
        }
}

Cada tabItem representa un ítem en la barra inferior de la aplicación y puede ser personalizado con texto e íconos del sistema.

¿Cómo personalizar la apariencia de los ítems del tab view?

Personalizar el estilo de los ítems en el TabView aporta a la estética y usabilidad de la aplicación. Puedes ajustar la fuente y el diseño utilizando modificadores de SwiftUI:

.font(.system(size: 30, weight: .bold, design: .rounded))

Este fragmento ajusta el tamaño, el peso y el diseño de la fuente de los textos en las pestañas.

¿Cómo gestionar la navegación y el control de estados?

Para facilitar la navegación y gestionar los estados, es crucial manipular adecuadamente las variables de estado. Una manera eficaz es mediante @State:

@State private var isHomeActive: Bool = false

Esto gestiona el estado que controla si la navegación hacia la pantalla home está activa, permitiendo cambios en la UI basados en las interacciones del usuario.

Al final, integrar NavigationView, NavigationLink y TabView en tus vistas de SwiftUI no solo facilita la organización del código, sino que también mejora significativamente la experiencia del usuario. Practicar con estas herramientas te acercará más al desarrollo de aplicaciones móviles robustas y amigables. ¡Sigue aprendiendo y experimentando con nuevas funcionalidades!

Aportes 6

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

es 2023 y estás estresado con que navigation view está descontinuado en swift 16 y las indicaciones no son iguales y no sabes cómo se hace?

  1. Envuelvelo todo en un NavigationStack en vez de un NavigationView
  1. Cuando crees el NavigationLink añádele un valor por defecto y un EmptyView.
  2. Añádele un .navigationDestination, con el atributo isPresented y un atributo de estado cómo en el curso.
  1. Cambia el valor del estado dentro del botón.

Me di cuenta que el Tabview te ejecuta el onAppear 2 veces… segun mi investigacion on google …esto es un Bug

No me aparecía el background del tabview donde van los tabItem, entonces lo pude solucionar agregando este bloque de código dentro de la struct y antes de la var body.

init(){
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .blue
UITabBar.appearance().standardAppearance = appearance
if #available(iOS 15.0, *) {
UITabBar.appearance().scrollEdgeAppearance = appearance
}
}

Logre solucionar el error del navigationLink al trabajar en iOS 16 y fue bajando el target version a la version 15.1 ( solo seleccione una que no era la version 16)

Pueden usar .navigationBarBackButtonHidden(true) al tabview para quitar el back

Todo super pero me sigue saliendo el tabView en blanco :c