Cómo crear un TabView en SwiftUI

El uso de una barra de navegación con tabs en la parte inferior de la pantalla, puede que sea una de las formas de navegación entre el contenido de una aplicación más utilizadas en el mundo de IOS. Este tipo de navegación es uno de los que se recogen dentro de las directrices o guías de UX que Apple recomienda y aconseja.

Este tipo de navegación se realiza con un tipo de View que existe dentro de las APIS de SwiftUI y que no es otro que el Tabview, en UIKit es lo que sería el UITabBarController. Hoy vamos a ver como crear un TabView en SwiftUI de forma rápida y sencilla.

Creando un TabView con SwiftUI

Ciertamente es bastante simple este desarrollo y básicamente el como crear un TabView en SwiftUI consiste en añadir la vista TabView y dentro ir añadiendo las diferentes pestañas que deseemos agregar:

struct ContentView: View {
    var body: some View {
        TabView{
            Text("Home")
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
        }
    }
}

Con este código obtendremos este resultado:

Text(“Home”) debe de ser la View que queremos mostrar como contenido en esa Tab. A esa View y mediante modificadores, en este caso tabItem, seteamos los valores atributos que un Tab posee, como son un icono y un texto bajo este icono.

Si deseamos añadir otra Tab:

struct ContentView: View {
    var body: some View {
        TabView{
            Text("Home")
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            
            Text("Settings")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
        }
    }
}


Como vemos si pulsamos sobre cada tab, el contenido que se muestra cambia y vemos, en este caso, el texto que hemos seteado.

Ahora bien, lo normal sería que en vez de un texto deseemos mostrar otro tipo de vista algo más compleja, por ejemplo una lista. Vamos a abstraer el contenido de la primera pestaña en otra clase de SwiftUI que va a incorporar esta lista.

Creamos un archivo Home.swift y dentro incluimos los siguiente:

struct Home: View {
    var body: some View {
        List{
            Text("Fila 1")
            Text("Fila 2")
            Text("Fila 3")
            Text("Fila 4")
            Text("Fila 5")
            Text("Fila 6")
            Text("Fila 7")
        }
    }
}

Y ahora en nuestro archivo inicial reemplazamos el texto de «Home» por una instancia de nuestra nueva vista:

struct ContentView: View {
    var body: some View {
        TabView{
            Home()
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            
            Text("Settings")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
        }
    }
}

Al ser Home también una View, todo lo que se muestra en pantalla son estructuras que conforma el protocolo View, los modificadores que se le pueden aplicar siguen siendo los mismos, en este caso los que nos permiten dar valores a un Tab.

Si queremos cambiar el color de los iconos y/o el texto del tab cuando están seleccionados o no seleccionados, o el background de la barra en sí misma, podemos crearnos una extensión de clase con un método de configuración y llamarlo cuando se instancia la clase:

extension ContentView {
  func setupTabBar() {
    UITabBar.appearance().barTintColor = .orange
    UITabBar.appearance().unselectedItemTintColor = UIColor.green
  
  }
}

En este archivo usamos el protocolo UIAppearance que nos permite modificar ciertas propiedades de interfaz que las vistas implementan de forma global a la aplicación.

Todo el código lo tenéis en Github.

Comparte si lo consideras interesante
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.