Cómo cambiar el color de fondo de un TabView en SwiftUI

El TabView es uno de los componentes más importantes de SwiftUI. Permite crear interfaces con pestañas al estilo de aplicaciones como Instagram, WhatsApp o la App Store. Sin embargo, uno de los problemas más comunes cuando los desarrolladores comienzan a usarlo es personalizar su apariencia, especialmente el color de fondo.

Por defecto, el TabView utiliza los estilos del sistema (UIKit por debajo), lo que hace que su fondo sea blanco o transparente dependiendo del contexto. Cambiarlo no es tan simple como aplicar un .background()… y aquí es donde la mayoría de los desarrolladores se atascan.

En este tutorial aprenderás todas las formas correctas y modernas de cambiar el color del fondo del TabView, tanto para:

• El contenido de cada pestaña
• La barra inferior (Tab Bar)
• El fondo detrás del TabView
• Compatibilidad con iOS 16, 17, 18 y 26

Todo usando SwiftUI + Xcode, con ejemplos prácticos y buenas prácticas profesionales.

1. Qué es realmente un TabView en SwiftUI

Aunque en SwiftUI usamos TabView, internamente Apple sigue usando UITabBarController. Esto es importante porque:

• El fondo de la barra inferior no pertenece al TabView
• Los estilos se controlan con UITabBarAppearance
• El .background() no afecta a la barra de pestañas

Por eso, para cambiar correctamente el fondo, debemos usar dos enfoques:

2. Crear un TabView básico

Comencemos con una estructura simple:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Home")
                .tabItem {
                    Label("Home", systemImage: "house")
                }

            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
    }
}

Si ejecutas esto en Xcode verás:

• Fondo blanco
• Barra inferior blanca
• Sin ningún tipo de personalización

Ahora vamos a cambiarlo.

3. Cambiar el fondo del contenido de cada pestaña

La forma más sencilla es usar un ZStack dentro de cada vista:

TabView {
    ZStack {
        Color.blue.ignoresSafeArea()
        Text("Home")
            .foregroundColor(.white)
    }
    .tabItem {
        Label("Home", systemImage: "house")
    }

    ZStack {
        Color.green.ignoresSafeArea()
        Text("Profile")
            .foregroundColor(.white)
    }
    .tabItem {
        Label("Profile", systemImage: "person")
    }
}

Esto cambia el fondo del contenido, pero no el fondo de la barra inferior.

4. Cambiar el fondo de la barra del TabView

Aquí es donde entra UIKit.

SwiftUI no tiene (todavía) una API directa para modificar el fondo de la barra del TabView, pero podemos hacerlo usando:

UITabBarAppearance

En el App principal o en el init() de la vista:

init() {
    let appearance = UITabBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = UIColor.black

    UITabBar.appearance().standardAppearance = appearance
    UITabBar.appearance().scrollEdgeAppearance = appearance
}

Ahora tu barra de pestañas será negra.

5. Usar colores de SwiftUI

Puedes convertir un Color de SwiftUI en UIColor así:

UIColor(Color.red)

Ejemplo completo:

init() {
    let appearance = UITabBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = UIColor(Color.blue)

    UITabBar.appearance().standardAppearance = appearance
    UITabBar.appearance().scrollEdgeAppearance = appearance
}

6. Cambiar el color de los iconos y texto

Si solo cambias el fondo, los iconos siguen siendo azules. Para personalizarlos:

UITabBar.appearance().unselectedItemTintColor = .lightGray
UITabBar.appearance().tintColor = .white

Ahora tienes:

• Fondo azul
• Iconos activos blancos
• Iconos inactivos grises

7. Usar .toolbarBackground (iOS 16+)

Desde iOS 16, SwiftUI ofrece una alternativa moderna:

TabView {
    Text("Home")
        .tabItem { Label("Home", systemImage: "house") }

    Text("Profile")
        .tabItem { Label("Profile", systemImage: "person") }
}
.toolbarBackground(Color.black, for: .tabBar)
.toolbarBackground(.visible, for: .tabBar)

Esto es mucho más limpio que UIKit.

8. Fondo completo detrás del TabView

Si quieres que toda la app tenga un fondo:

ZStack {
    Color.purple.ignoresSafeArea()

    TabView {
        Text("Home")
            .tabItem { Label("Home", systemImage: "house") }

        Text("Profile")
            .tabItem { Label("Profile", systemImage: "person") }
    }
}

Esto crea una app con fondo morado completo.

9. Usar gradientes

.toolbarBackground(
    LinearGradient(
        colors: [.blue, .purple],
        startPoint: .leading,
        endPoint: .trailing
    ),
    for: .tabBar
)

También funciona con UITabBarAppearance.

10. Compatibilidad total (iOS 16+)

La mejor práctica:

struct ContentView: View {

    init() {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor(Color.black)

        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
    }

    var body: some View {
        TabView {
            ZStack {
                Color.black.ignoresSafeArea()
                Text("Home").foregroundColor(.white)
            }
            .tabItem { Label("Home", systemImage: "house") }

            ZStack {
                Color.black.ignoresSafeArea()
                Text("Profile").foregroundColor(.white)
            }
            .tabItem { Label("Profile", systemImage: "person") }
        }
    }
}

Funciona en iOS 15, 16, 17, 18 y 26.

11. Errores comunes

12. Conclusión

Cambiar el color de fondo de un TabView en SwiftUI no es trivial, pero ahora ya sabes:

• Cómo cambiar el fondo del contenido
• Cómo cambiar la barra inferior
• Cómo usar UIKit y SwiftUI modernos
• Cómo aplicar colores, gradientes y estilos profesionales

Con estas técnicas puedes crear apps con una apariencia completamente personalizada, moderna y profesional.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram