Las vistas con pestañas se crean en SwiftUI utilizando la vista del contenedor TabView y constan de una variedad de vistas secundarias que representan las pantallas por las que navegará el usuario en el tab bar.
Una tab bar permite a las personas navegar entre diferentes áreas de una aplicación, como las pestañas Alarma, Cronómetro y Temporizador en la aplicación Reloj. Si necesitas proporcionar controles que actúan sobre los elementos de la vista actual, utilice una barra de herramientas.
Asegúrate de que la tab bar está visible cuando las personas naveguen a diferentes áreas de tu aplicación.
De forma predeterminada, TabView presenta una barra de pestañas en la parte inferior del diseño que contiene los elementos de pestaña utilizados para navegar entre las vistas secundarias.
Se aplica un elemento de pestaña a cada vista de contenido mediante un modificador y se puede personalizar para que contenga vistas de texto e imagen (otros tipos de vista no son compatibles con elementos de pestaña).
La pestaña seleccionada actualmente también se puede controlar mediante programación agregando etiquetas a los elementos de la pestaña.
Poner tabs en una TabView es tan fácil como usar:
TabView {
Text("Tab 1")
Text("Tab 2")
}Utiliza tabItem(_:) para configurar una vista como elemento de la barra de pestañas en TabView. Utilizo label como contenido de un elemento de pestaña que me permite definir el título y la imagen.
De manera que nuestro código quedaría así:
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label("Home", systemImage: "house")
}
Text("Search")
.tabItem {
Label("Sun", systemImage: "sun.max")
}
Text("Location")
.tabItem {
Label("Location", systemImage: "location")
}
Text("Settings")
.tabItem {
Label("Settings", systemImage: "gearshape")
}
}
}
}Nuestra app quedaría de la siguiente manera:
TabView puede mostrar un máximo de 5 tab items, de manera que si ponemos más de cinco items, podemos cambiar el último item por “More…”, seleccionando el tab “More…” presentará una lista de todos los items que faltan.
Debido al espacio limitado que hay en la pantalla de un iPhone, un TabView solo puede mostrar un máximo de 5 tabs simultaneamente en un iPhone con iOS como sistema operativo y 7 tabs en un iPad con iPadOS como sistema operativo.
Así es como quedaría nuestro código con más de 5 tabs, voy a crear una app con 8 tabs.
Este sería el código fuente:
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label("Home", systemImage: "house")
}
Text("Search")
.tabItem {
Label("Sun", systemImage: "sun.max")
}
Text("Notification")
.tabItem {
Label("Notification", systemImage: "bell")
}
Text("Notification")
.tabItem {
Label("Keyboard", systemImage: "keyboard")
}
Text("Printer")
.tabItem {
Label("Printer", systemImage: "printer")
}
Text("Display")
.tabItem {
Label("Display", systemImage: "display")
}
Text("Iphone")
.tabItem {
Label("Iphone", systemImage: "iphone")
}
}
}
}Y este sería el resultado en XCode:
Si seleccionamos una tab extra, nuestra vista sera una navigation stack.
Crear pestañas es tan fácil como poner diferentes vistas dentro de una instancia de TabView, pero para agregar una imagen y texto al elemento de la barra de pestañas de cada vista necesitamos usar el modificador tabItem()
Entonces, una tabView es una vista especial que cambia entre múltiples vistas secundarias mediante UI de elementos.
Estos elementos de la interfaz de usuario son los tabItem.
Para crear una interfaz de usuario con pestañas, debemos colocar las vistas en una vista de pestaña (TabView) y aplicar el modificador de elemento superior.
Como añadir una SwiftUIView en una tab bar en XCode
Para trabajar y tener todo bien organizado es recomendable, tener las vistas o views separadas en diferentes ficheros para así poder trabajar mejor.
Lo que vamos a hacer a continuación es añadir una vista o view a nuestro proyecto en XCode.
En nuestro proyecto usamos el botón derecho para añadir un nuevo fichero a nuestro proyecto y seleccionamos New File.
A continuación vamos a seleccionar una SwiftUI View y le damos a Next, como se puede apreciar en la imagen
Una vez seleccionado se nos abrirá una ventana como la de la imagen en la que tenemos que poner el nombre de nuestro fichero, le pondremos de nombre SettingsView.swift
Nuestros ficheros quedarán de la siguiente forma:
El fichero SettingsView.swift tiene el siguiente código:
import SwiftUI
struct SettingsView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
}
}
#Preview {
SettingsView()
}De manera que vamos a añadir esta view en nuestro ContenView.swift de la siguiente forma:
SettingsView()Nuestro fichero ContentView.swift quedará de la siguiente forma:
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label("Home", systemImage: "house")
}
SettingsView()
.tabItem {
Label("Settings", systemImage: "gearshape")
}
Text("Notification")
.tabItem {
Label("Notification", systemImage: "bell")
}
Text("Notification")
.tabItem {
Label("Keyboard", systemImage: "keyboard")
}
Text("Printer")
.tabItem {
Label("Printer", systemImage: "printer")
}
Text("Display")
.tabItem {
Label("Display", systemImage: "display")
}
Text("Iphone")
.tabItem {
Label("Iphone", systemImage: "iphone")
}
}
}
}De manera que la segunda pestaña de este tab bar (“Settings”) tendrá como destino el fichero SettingsView.swift que hemos añadido a nuestro proyecto en XCode, como se puede ver en la siguiente imagen:
Resumen de lo que has aprendido
En este artículo has aprendido:
-Que es un tab bar
-Que para crear una interfaz de usuario con pestañas (tab bar), solo tienes que colocar las vistas en un TabView y aplicar el modificador tabItem(_:) al contenido de cada pestaña.
-Añadir vistas desde un fichero SwiftUI View a una tab bar