TabView Bottom Accessory en SwiftUI

Si alguna vez has utilizado la aplicación Música o Podcasts de Apple, seguramente habrás notado ese pequeño reproductor que flota justo por encima de la barra de pestañas inferior (el mini-player). Gracias a las evoluciones recientes de SwiftUI, los desarrolladores ahora podemos crear este mismo efecto de manera nativa y sin trucos usando el modificador .tabViewBottomAccessory.

A continuación, aprenderás cómo integrar, controlar y personalizar este accesorio en tus propias aplicaciones introducido en iOS 26.

¿Qué es y para qué sirve?

Históricamente, colocar una vista global que flotara sobre el TabView requería hacer malabares con ZStack, calcular la altura de las pestañas y pelear con los bordes seguros (safeAreaInsets). El modificador .tabViewBottomAccessory soluciona esto integrando tu vista directamente en el ecosistema del TabView.

Es el espacio ideal para:

• Minireproductores de audio o vídeo.
• Indicadores de estado globales (ej. “Sincronizando datos…”, “Sin conexión”).
• Controles de acceso rápido que deben estar presentes independientemente de la pestaña seleccionada.

Implementación Básica

Para agregar este accesorio, simplemente debes encadenar el modificador directamente a tu contenedor TabView y proporcionarle la vista que deseas renderizar.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Pantalla de Inicio")
                .tabItem {
                    Label("Inicio", systemImage: "house")
                }
            
            Text("Ajustes")
                .tabItem {
                    Label("Ajustes", systemImage: "gear")
                }
        }
        // 1. Añadimos el accesorio al TabView
        .tabViewBottomAccessory {
            HStack {
                Text("Sincronizando 3 archivos...")
                Spacer()
                ProgressView()
            }
            .padding()
            .background(.regularMaterial)
            .cornerRadius(10)
            .padding(.horizontal)
        }
    }
}

Mostrar y ocultar el accesorio dinámicamente

En la mayoría de los casos reales, no querrás que el accesorio esté visible todo el tiempo (por ejemplo, el minireproductor solo aparece cuando el usuario comienza a reproducir una canción).

Para gestionar su aparición, el modificador acepta un parámetro isEnabled.

@State private var isPlaying = false

// ... dentro del layout de tu vista:
TabView {
    // Tus vistas y pestañas aquí...
}
.tabViewBottomAccessory(isEnabled: isPlaying) {
    // Esta vista solo aparecerá, y ocupará espacio, si isPlaying es true
    MiniPlayerView()
}

💡 Buena práctica: Utiliza siempre el parámetro isEnabled en lugar de envolver tu vista en un condicional if/else dentro del closure. Usar isEnabled ayuda a SwiftUI a calcular correctamente los espacios del diseño y evita comportamientos visuales erráticos.

Adaptación inteligente al entorno (Inline vs. Expanded)

Una de las grandes ventajas de esta API nativa es su integración fluida con la ocultación de la barra de pestañas. Si tu pestaña contiene un ScrollView y habilitas la ocultación de pestañas al hacer scroll (usando .tabBarMinimizeBehavior), el accesorio se adaptará automáticamente.

Puedes detectar en qué estado se encuentra tu accesorio utilizando variables de entorno para modificar su interfaz en tiempo real:

@Environment(\.tabViewBottomAccessoryPlacement) var placement

• .expanded: El accesorio está flotando por encima de la barra de pestañas completa.
• .inline: La barra de pestañas se ha minimizado (o colapsado) y el accesorio ahora se integra en línea con los controles mínimos.