Tab Bar — cos'è, pannello delle schede nelle applicazioni mobili

Cos'è una Tab Bar?

Una Tab Bar (barra delle schede) è un elemento dell'interfaccia grafica situato nella parte inferiore dello schermo di un'applicazione mobile. Fornisce accesso rapido a 3–5 sezioni principali dell'app. Ogni sezione è rappresentata da un'icona e un'etichetta testuale. L'utente tocca una scheda per passare alla sezione corrispondente. La Tab Bar rimane visibile su tutti gli schermi all'interno di ogni sezione, fornendo un punto di ingresso costante.

Apple raccomanda di utilizzare una Tab Bar per sezioni di uguale importanza. Le Linee Guida per l'Interfaccia Umana (2026) affermano: «La Tab Bar mostra 3–5 schede. Se sono necessarie più schede, l'ultima diventa un elemento «Altro» contenente le restanti.» Material Design di Google (2026) raccomanda Bottom Navigation per lo stesso scopo — 3–5 elementi, con la scheda attiva evidenziata da colore e animazione.

A differenza della barra delle schede superiore, il pannello inferiore è più comodo per l'operazione con una mano — il pollice raggiunge naturalmente la parte inferiore dello schermo. Uno studio del Nielsen Norman Group (2025) ha mostrato che la navigazione inferiore riduce il tempo di completamento delle attività del 22% rispetto alla navigazione superiore su smartphone con schermo da 6 pollici o più.

UITabBarController in iOS

UITabBarController è un controller iOS integrato per organizzare la navigazione tramite schede. Ogni scheda gestisce il proprio set di schermate, solitamente organizzate in un UINavigationController. UITabBarController crea automaticamente una Tab Bar nella parte inferiore dello schermo con uno sfondo traslucido di sistema e animazione di commutazione.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "Home",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Cerca",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profilo",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

Ogni scheda nell'esempio contiene un UINavigationController, consentendo la navigazione a pila all'interno della sezione. Il tabBarItem configura l'icona, il titolo e il badge. Il sistema applica automaticamente lo stile SF Symbols per le icone — simboli Apple standard con supporto per tipo dinamico e multicolore.

BottomNavigationView in Android

BottomNavigationView è un componente Android da Material Design Library che implementa il pannello di navigazione inferiore. In Android 13+ viene utilizzato NavigationBarView — il suo successore con animazione migliorata e comportamento adattivo. BottomNavigationView segue la specifica Material Design 3 (Material You) e supporta temi dell'app, colori dinamici e animazioni di commutazione.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Collegamento di BottomNavigation a NavController
        navView.setupWithNavController(navController)

        // Impostazione di un badge sulla scheda notifiche
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Il componente BottomNavigationView supporta Material Design 3 con tre stili: default (etichetta + icona), labeled (etichetta più grande) e unlabeled (solo icona). Il metodo setupWithNavController lega il pannello al Navigation Component, aggiornando automaticamente la scheda attiva al cambio di schermata. I badge vengono creati tramite getOrCreateBadge e supportano indicatori numerici e puntiformi.

Badge e Indicatori sulla Tab Bar

I Badge sono indicatori numerici o puntiformi sulle icone delle schede, che mostrano il numero di notifiche, nuovi messaggi o attività. Su iOS, il badge viene impostato tramite la proprietà badgeValue su UITabBarItem. Su Android, i badge vengono gestiti tramite BadgeDrawable (Material 3) o getOrCreateBadge in NavigationBarView.

I badge sono un potente strumento di coinvolgimento: la ricerca di Localytics (2025) ha mostrato che le app con badge hanno una fidelizzazione del 18% più alta al 7° giorno. Tuttavia, l'uso eccessivo di badge (più di 3 contemporaneamente) riduce il CTR del 12%. Apple e Google raccomandano di mostrare i badge solo per notifiche pertinenti e di reimpostarli all'apertura della sezione.

Personalizzazione della Tab Bar: Icone, Colori, Animazioni

Entrambe le piattaforme offrono ampie opzioni di personalizzazione della Tab Bar. Su iOS, è possibile modificare il colore di sfondo, il colore tint della scheda attiva, il carattere dell'etichetta e aggiungere icone personalizzate tramite SF Symbols o asset personalizzati. Su Android, la personalizzazione include stili Material 3, animazione di commutazione, effetto ripple e colori dinamici basati sullo sfondo.

// Personalizzazione della Tab Bar in iOS
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

Su Android, la personalizzazione di BottomNavigationView viene eseguita tramite attributi XML o programmaticamente. Material 3 introduce il concetto di colori dinamici: la tavolozza dei colori viene generata dallo sfondo dell'utente e applicata automaticamente ai componenti. Lo sviluppatore può sovrascrivere i colori tramite il tema, impostare un'animazione dell'indicatore personalizzata e configurare l'effetto ripple.

// Personalizzazione di BottomNavigationView in Android
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// In XML: app:menu="@menu/bottom_nav_menu"
// In XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Migliori Pratiche per la Navigazione Inferiore

Quando si progetta una Tab Bar, è importante seguire le raccomandazioni della piattaforma e la ricerca sull'usabilità. Apple HIG: non più di 5 schede, testo conciso, icone semantiche. Material Design: 3–5 elementi, elemento attivo evidenziato, contatore badge non superiore a 99. NN Group (2025): la navigazione inferiore dovrebbe rimanere visibile su tutti gli schermi di una sezione, altrimenti l'utente perde il contesto.

Errori comuni: 6 o più schede (obbliga all'uso di «Altro» — riduce la scopribilità), modifica dell'ordine delle schede durante la navigazione (disorienta l'utente), nascondere la Tab Bar su schermi annidati (perdita dell'ancora di navigazione). Le migliori pratiche includono un ordine fisso, icone ed etichette di testo coerenti, badge solo per azioni dell'utente (non per marketing).

• 3–5 schede — numero ottimale per una selezione rapida senza sovraccarico
• Ordine fisso — le schede dovrebbero essere stabili, senza riordino dinamico
• Icona + etichetta — entrambi gli elementi sono necessari per comprendere la sezione
• Scheda attiva — dovrebbe differire visivamente per colore, icona o animazione
• Badge — utilizzare per le notifiche, reimpostare all'apertura della sezione