Tab Bar — qu'est-ce que c'est, panneau d'onglets dans les applications mobiles

Qu'est-ce qu'une Tab Bar ?

Une Tab Bar (barre d'onglets) est un élément d'interface graphique situé en bas de l'écran d'une application mobile. Elle offre un accès rapide à 3 à 5 sections principales de l'application. Chaque section est représentée par une icône et un libellé textuel. L'utilisateur appuie sur un onglet pour passer à la section correspondante. La Tab Bar reste visible sur tous les écrans de chaque section, fournissant un point d'entrée constant.

Apple recommande d'utiliser une Tab Bar pour les sections d'importance égale. Les Directives d'Interface Humaine (2026) indiquent : « La Tab Bar affiche 3 à 5 onglets. Si plus sont nécessaires, le dernier onglet devient un élément « Plus » contenant les autres. » Material Design de Google (2026) recommande Bottom Navigation dans le même but — 3 à 5 éléments, l'onglet actif étant mis en évidence par la couleur et l'animation.

Contrairement à la barre d'onglets supérieure, le panneau inférieur est plus pratique pour une utilisation à une main — le pouce atteint naturellement le bas de l'écran. Une étude du Nielsen Norman Group (2025) a montré que la navigation inférieure réduit le temps d'exécution des tâches de 22% par rapport à la navigation supérieure sur les smartphones avec un écran de 6 pouces ou plus.

UITabBarController dans iOS

UITabBarController est un contrôleur intégré iOS pour organiser la navigation via des onglets. Chaque onglet gère son propre ensemble d'écrans, généralement organisé dans un UINavigationController. UITabBarController crée automatiquement une Tab Bar en bas de l'écran avec un fond translucide système et une animation de transition.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Accueil",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Recherche",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profil",
            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]
    }
}

Chaque onglet dans l'exemple contient un UINavigationController, permettant une navigation par pile à l'intérieur de la section. Le tabBarItem configure l'icône, le titre et le badge. Le système applique automatiquement le style SF Symbols pour les icônes — des symboles Apple standard avec prise en charge du type dynamique et de la multicoloration.

BottomNavigationView dans Android

BottomNavigationView est un composant Android de Material Design Library qui implémente le panneau de navigation inférieur. Dans Android 13+, NavigationBarView est utilisé — son successeur avec une animation améliorée et un comportement adaptatif. BottomNavigationView suit la spécification Material Design 3 (Material You) et prend en charge le thème de l'application, les couleurs dynamiques et les animations de transition.

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)

        // Lier BottomNavigation à NavController
        navView.setupWithNavController(navController)

        // Configuration d'un badge sur l'onglet notifications
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Le composant BottomNavigationView prend en charge Material Design 3 avec trois styles : default (libellé + icône), labeled (libellé plus grand) et unlabeled (icône uniquement). La méthode setupWithNavController lie le panneau au Navigation Component, mettant automatiquement à jour l'onglet actif lors du changement d'écran. Les badges sont créés via getOrCreateBadge et prennent en charge les indicateurs numériques et ponctuels.

Badges et Indicateurs sur Tab Bar

Les Badges sont des indicateurs numériques ou ponctuels sur les icônes d'onglets, affichant le nombre de notifications, de nouveaux messages ou de tâches. Sur iOS, le badge est défini via la propriété badgeValue sur UITabBarItem. Sur Android, les badges sont gérés via BadgeDrawable (Material 3) ou getOrCreateBadge dans NavigationBarView.

Les badges sont un outil d'engagement puissant : les recherches de Localytics (2025) ont montré que les applications avec badges ont une rétention 18% plus élevée au 7e jour. Cependant, l'utilisation excessive de badges (plus de 3 à la fois) réduit le CTR de 12%. Apple et Google recommandent d'afficher les badges uniquement pour les notifications pertinentes et de les réinitialiser lors de l'ouverture de la section.

Personnalisation de la Tab Bar : Icônes, Couleurs, Animations

Les deux plateformes offrent de vastes options de personnalisation de la Tab Bar. Sur iOS, vous pouvez modifier la couleur de fond, la couleur tint de l'onglet actif, la police du libellé et ajouter des icônes personnalisées via SF Symbols ou des assets personnalisés. Sur Android, la personnalisation inclut les styles Material 3, l'animation de transition, l'effet ripple et les couleurs dynamiques basées sur le fond d'écran.

// Personnalisation de la Tab Bar dans 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.

Sur Android, la personnalisation de BottomNavigationView se fait via des attributs XML ou par programmation. Material 3 introduit le concept de couleurs dynamiques : la palette de couleurs est générée à partir du fond d'écran de l'utilisateur et appliquée automatiquement aux composants. Le développeur peut remplacer les couleurs via le thème, définir une animation d'indicateur personnalisée et configurer l'effet ripple.

// Personnalisation de BottomNavigationView dans 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")
    )
}

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

Meilleures Pratiques de Navigation Inférieure

Lors de la conception d'une Tab Bar, il est important de suivre les recommandations de la plateforme et les recherches en utilisabilité. Apple HIG : pas plus de 5 onglets, texte concis, icônes sémantiques. Material Design : 3 à 5 éléments, élément actif mis en évidence, compteur de badge ne dépassant pas 99. NN Group (2025) : la navigation inférieure doit rester visible sur tous les écrans d'une section, sinon l'utilisateur perd le contexte.

Erreurs courantes : 6 onglets ou plus (oblige à utiliser « Plus » — réduit la découvrabilité), changement de l'ordre des onglets pendant la navigation (désoriente l'utilisateur), masquage de la Tab Bar sur les écrans imbriqués (perte de l'ancrage de navigation). Les meilleures pratiques incluent un ordre fixe, des icônes et des libellés cohérents, des badges uniquement pour les actions de l'utilisateur (pas pour le marketing).

• 3 à 5 onglets — nombre optimal pour une sélection rapide sans surcharge
• Ordre fixe — les onglets doivent être stables, sans réorganisation dynamique
• Icône + libellé — les deux éléments sont nécessaires pour comprendre la section
• Onglet actif — doit se différencier visuellement par la couleur, l'icône ou l'animation
• Badges — utiliser pour les notifications, réinitialiser lors de l'ouverture de la section