TABVIEW en SWIFTUI en Español

TabView en SwiftUI 2.0 es una vista que nos permite tener una barra inferior en nuestra app para poder seleccionar distintas vistas secundarias y así poder navegar entre ellas. Cuando pulsamos una opción del TabView automáticamente se muestra la vista que pertenece a esa opción del TabView.

TabView en código

Para crear nuestro primer TabView creamos un proyecto de cero y a continuación debemos añadirlo en la variable body de nuestro contentView.

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Hello, world!")
                .padding()
        }
    }
}

Podemos ver en el canvas que nuestro TabView aparece abajo del todo de la pantalla, pero no aparece ningún opción clickable, es decir está vacío.
Vamos a crear nuestra primera opción dentro del TabView. Para ello debemos añadir el modificador .tabBarItem en nuestro único Text, con este modificador como veremos a continuación añadiremos un Image y un Text, de esta manera el user verá esta opción en el TabView y sabrá que podrá seleccionarla para ir a esa vista.

Como hemos dicho dentro del modificador .tabBarItem añadiremos dos vistas un Image y un Text. El Image lo usaremos para mostrar un icono del sistema y el Text para darle un texto más descriptivo, por ejemplo Home.

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

Ya tenemos una opción en nuestra TabView. Vamos a añadir otra vista que llamaremos Profile. Así el user podrá escoger entre seleccionar Home y Profile.

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Hello, world!")
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            Text("Profile")
                .tabItem {
                    Image(systemName: "person.crop.circle.fill")
                    Text("Home")
                }
        }
    }
}

Ahora mismo tenemos la posibilidad de navegar entre estas dos vistas. Todo gracias al TabView. Como curiosidad podemos modificar el color que aparece cuando seleccionamos una de las opciones, es tan sencillo como usar el modificador .accentColor

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Hello, world!")
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            Text("Profile")
                .tabItem {
                    Image(systemName: "person.crop.circle.fill")
                    Text("Home")
                }
        }.accentColor(.green)
    }
}

Añadiendo este modificador hemos cambiado el color que aparece al seleccionar una opción del TabView, hemos pasado del azul (que es el que tenemos por defecto), al verde.

En nuestro ejemplo estamos usando vistas muy simples, si pulsamos en Home aparece un Text y si pulsamos en Profile aparece otro Text. Podríamos modificarlo para que fueran vistas más complejas. Vamos a ver qué pasaría.

struct ContentView: View {
    var body: some View {
        TabView {
            VStack {
                Image(systemName: "house.fill")
                    .resizable()
                    .scaledToFit()
                    .frame(height: 200)
                Text("Home")
                    .padding(.top, 32)
            }.tabItem {
                Image(systemName: "house.fill")
                Text("Home")
            }
            Text("Profile")
                .tabItem {
                    Image(systemName: "person.crop.circle.fill")
                    Text("Home")
                }
        }.accentColor(.green)
    }
}

Hemos sustituido nuestro Text por un VStack con más vistas en su interior. Aún así esta vista es simple, pero es solo para que te hagas la idea de que podría tener muchos más componentes. Si seguimos añadiendo más vistas sería muy complejo actualizar la vista donde tenemos nuestro TabView (en este caso es ContentView).

¿Conoces el dicho "Divide y vencerás"? pues en este caso es una buena práctica para evitar tener vistas con muchas lineas de código. La idea es separarlas en vistas más pequeñas y después componerlas en otra vista. Por eso vamos a extraer nuestra vista que aparece al pulsar Home en el TabView.

En este caso, lo que significa extraer es mover una parte del código de una vista con muchas líneas, a otra vista que solo tendrá el código que movemos.

Para ello vamos a extraer el código, y vamos a meter el VStack:

struct HomeView: View {
    var body: some View {
        VStack {
            Image(systemName: "house.fill")
                .resizable()
                .scaledToFit()
                .frame(height: 200)
            Text("Home")
                .padding(.top, 32)
        }.tabItem {
            Image(systemName: "house.fill")
            Text("Home")
        }
    }
}

De esta manera, dentro de nuestro TabView quedaría de la siguiente manera:

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
            Text("Profile")
                .tabItem {
                    Image(systemName: "person.crop.circle.fill")
                    Text("Home")
                }
        }.accentColor(.green)
    }
}

Mucho más "limpio" y legible para cualquiera que vea tu código. Vamos hacer lo mismo para la vista del Profile:

struct ProfileView: View {
    var body: some View {
        Text("Profile")
            .tabItem {
                Image(systemName: "person.crop.circle.fill")
                Text("Home")
            }
    }
}

Y vamos a sacar de cada vista que hemos creado el tabItem, ¿por qué? para que nos sea más fácil ver el código relacionado con el TabView en un único lugar y no repartido en diferentes vistas.
Nuestro código quedaría de la siguiente manera:

• ContentView con la TabView y el modificador .tabItem
• La vista HomeView con su código específico.
• La vista ProfileView con su código específico.

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            ProfileView()
                .tabItem {
                    Image(systemName: "person.crop.circle.fill")
                    Text("Home")
                }
        }.accentColor(.green)
    }
}

PageTabViewStyle

Podemos usar TabView con un estilo de PageTabViewStyle para que en lugar de pulsar en las opciones del TabView, podamos hacer Swipe derecho o izquierdo para movernos entre las distintas vistas de nuestro TabView.

Es muy útil por ejemplo en pantallas de onboarding de tu app, donde puedes explicas al user cómo usar tu app o qué funcionalidades tiene. Puedes añadir todos los pasos con un simple TabView y añadiendo el estilo PageTabViewStyle.

struct ContentView: View {
    var body: some View {
        TabView {
            RoundedRectangle(cornerRadius: 20)
                .padding()
                .foregroundColor(.blue)
            
            RoundedRectangle(cornerRadius: 20)
                .padding()
                .foregroundColor(.red)
                
            ProfileView()
                .tabItem {
                    Image(systemName: "person.crop.circle.fill")
                    Text("Home")
                }
        }
        .frame(height: 400)
        .tabViewStyle(PageTabViewStyle())
    }
}

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter