Separar una aplicación en diferentes pantallas es una de las tareas más comunes al construir interfaces en SwiftUI. La vista TabView permite organizar múltiples pantallas dentro de una barra inferior donde el usuario puede alternar entre ellas con un simple toque. A continuación se explica paso a paso cómo implementarla.
¿Cómo se crea un TabView en SwiftUI?
El primer paso es crear un nuevo archivo de tipo SwiftUI View dentro del proyecto en Xcode [0:18]. Una vez listo, se utiliza la palabra reservada TabView, que funciona de forma muy similar a los stacks (VStack, HStack, ZStack): se abren y cierran llaves, y dentro se colocan las vistas que el usuario podrá seleccionar.
swift
TabView {
TextMode()
TextFields()
ZStackPadding()
}
Cada vista que se incluya dentro del TabView representará una pantalla independiente. El usuario verá en la parte inferior de la aplicación un rectángulo gris que actúa como barra de navegación entre esas pantallas [1:08].
¿Qué es el modificador tabItem y cómo se configura?
Si solo se agregan vistas dentro del TabView, la barra inferior aparecerá vacía. Para que cada pestaña muestre un ícono y un texto, es necesario aplicar el modificador .tabItem a cada vista [1:18].
El .tabItem recibe un label compuesto por dos elementos:
- Text: el nombre visible de la pestaña.
- Image: un ícono del catálogo SF Symbols de Apple.
swift
TabView {
TextMode()
.tabItem {
Text("Pantalla uno")
Image(systemName: "moon")
}
TextFields()
.tabItem {
Text("Pantalla dos")
Image(systemName: "play")
}
ZStackPadding()
.tabItem {
Text("Pantalla tres")
Image(systemName: "terminal")
}
}
El argumento systemName dentro de Image permite utilizar los íconos integrados del sistema, conocidos como SF Symbols. Algunos ejemplos usados son "moon", "play" y "terminal" [1:42].
¿Por qué necesitas más de una pestaña?
Tener una sola vista dentro de un TabView no tendría sentido, ya que se podría mostrar directamente sin necesidad de la barra de navegación [2:00]. La ventaja real aparece cuando se agregan dos o más pantallas, permitiendo al usuario cambiar de contexto sin salir de la interfaz principal.
¿Cómo se ve el resultado final?
Al compilar y ejecutar la aplicación, la barra inferior muestra las tres pestañas configuradas: Pantalla uno con el ícono de luna, Pantalla dos con el ícono de reproducción y Pantalla tres con el ícono de terminal [3:05]. Al pulsar cada una, el contenido de la pantalla cambia de forma inmediata.
¿Cuál es la diferencia entre TabView y Navigation View?
El TabView permite alternar entre vistas dentro de la misma pantalla, manteniendo la barra de pestañas siempre visible. Esto es diferente a una Navigation View, que lleva al usuario de una pantalla a otra completamente distinta, generalmente con una transición de empuje lateral [3:22].
Puntos clave para recordar:
TabView organiza vistas como pestañas en la parte inferior.- Cada vista necesita el modificador
.tabItem con un Text y un Image.
- Los íconos se obtienen de SF Symbols usando
Image(systemName:).
- Es ideal para aplicaciones con secciones principales que el usuario consulta con frecuencia.
Si ya probaste tu primer TabView, comparte en los comentarios cuántas pestañas configuraste y qué íconos de SF Symbols te parecieron más útiles.
