Drawer — qu'est-ce que c'est, DrawerLayout et menu latéral dans les applications

Qu'est-ce qu'un Drawer ?

Drawer (Navigation Drawer) est un élément de navigation en forme de panneau qui glisse depuis le bord gauche de l'écran par un geste de balayage ou un appui sur l'icône hamburger (trois lignes horizontales). Le Drawer contient des liens de navigation, un en-tête et des éléments optionnels : avatar utilisateur, badges de notification, séparateurs. Le panneau peut superposer le contenu (Modal) ou le décaler (Standard).

Material Design 3 (2026) définit le Navigation Drawer comme un composant pour les applications avec 6+ éléments de navigation. Contrairement à la Bottom Navigation, le Drawer n'occupe pas d'espace permanent à l'écran et ne s'affiche que sur demande de l'utilisateur. Cela libère de l'espace pour le contenu mais nécessite une action supplémentaire pour l'ouvrir. Google recommande le Drawer pour les applications avec une hiérarchie de sections profonde.

Une étude d'UX Planet (2025) a montré : le Drawer convient aux applications avec 5 à 15 sections, mais le temps de navigation est 40 % plus élevé qu'avec Bottom Navigation. Les utilisateurs manquent les éléments de menu situés sous le pli de l'écran (défilement). Par conséquent, les sections importantes doivent être en haut du Drawer, et les moins importantes (À propos, Paramètres) en bas, séparées par un séparateur.

Types de Drawer : Modal et Standard

Modal Drawer glisse par-dessus le contenu, assombrissant le fond. Utilisé sur les appareils mobiles où la largeur d'écran est limitée. Après la sélection d'un élément, le Drawer se ferme automatiquement. Standard Drawer (Permanent) est un panneau fixe toujours visible, décalant le contenu. Utilisé sur les tablettes et le bureau avec une largeur d'écran à partir de 900 dp. Material 3 définit également Rail Drawer — une version compacte pour tablettes n'affichant que des icônes.

DrawerLayout dans Android

DrawerLayout est le ViewGroup standard dans Android qui implémente un menu latéral coulissant. DrawerLayout contient deux éléments enfants : le premier — contenu principal (FrameLayout avec NavHostFragment), le second — NavigationView avec le menu. DrawerLayout gère les gestes de balayage et l'ouverture/fermeture programmatique via ActionBarDrawerToggle.

// Activité avec DrawerLayout et NavigationView
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var drawerLayout: DrawerLayout

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

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

        // Liaison du Drawer avec Navigation Component
        NavigationUI.setupActionBarWithNavController(
            this, navController, drawerLayout
        )
        NavigationUI.setupWithNavController(navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            findNavController(R.id.nav_host_fragment),
            drawerLayout
        )
    }
}

// XML : activity_main.xml
// <androidx.drawerlayout.widget.DrawerLayout
//   android:id="@+id/drawerLayout"
//   ...>
//   <!-- Contenu principal -->
//   <FrameLayout android:id="@+id/nav_host_fragment"
//     android:layout_width="match_parent"
//     android:layout_height="match_parent" />
//   <!-- Navigation Drawer -->
//   <com.google.android.material.navigation.NavigationView
//     android:id="@+id/navView"
//     android:layout_width="wrap_content"
//     android:layout_height="match_parent"
//     android:layout_gravity="start"
//     app:menu="@menu/nav_menu" />
// </androidx.drawerlayout.widget.DrawerLayout>

NavigationView est un composant Material Design pour le contenu du Drawer. Il prend en charge l'en-tête (headerLayout), les éléments de menu (menu), les sous-titres, les cases à cocher et les interrupteurs. L'attribut app:menu pointe vers un menu XML avec des éléments de navigation. NavigationUI met automatiquement en surbrillance l'élément actif et synchronise l'état avec NavController.

Menu latéral dans iOS

iOS n'a pas de composant "Drawer" intégré — Apple ne recommande pas de menu latéral pour l'iPhone (HIG, 2026). Cependant, pour l'iPad, UISplitViewController avec panneaux primaire et secondaire est utilisé. Pour l'iPhone, le menu latéral est implémenté via des bibliothèques tierces (SideMenu, SwiftUI-side-menu) ou des solutions personnalisées avec décalage de contenu. Dans SwiftUI, un menu latéral est créé via ZStack avec animation de décalage.

import SwiftUI

struct DrawerView<Content: View, Menu: View>: View {
    let menuWidth: CGFloat = 280

    @Binding var isOpen: Bool
    @ViewBuilder let content: Content
    @ViewBuilder let menu: Menu

    var body: some View {
        ZStack(alignment: .leading) {
            content
                .offset(x: isOpen ? menuWidth : 0)
                .animation(.easeInOut, value: isOpen)

            if isOpen {
                menu
                    .frame(width: menuWidth)
                    .transition(.move(edge: .leading))

                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture { isOpen = false }
            }
        }
    }
}

// Utilisation
struct ContentView: View {
    @State private var showDrawer = false

    var body: some View {
        DrawerView(isOpen: $showDrawer) {
            NavigationStack {
                HomeView()
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: { showDrawer.toggle() }) {
                                Image(systemName: "line.horizontal.3")
                            }
                        }
                    }
            }
        } menu: {
            DrawerMenuView()
        }
    }
}

Pour les projets iOS de production, la bibliothèque SideMenu est souvent utilisée (GitHub, 8k+ étoiles). Elle fournit un UIViewController prêt à l'emploi avec prise en charge des gestes, flou d'arrière-plan, largeur personnalisée et animations. SideMenu prend en charge les menus gauche et droit, plusieurs niveaux et l'intégration UIKit via UINavigationController. Une alternative est UISplitViewController sur iPad (système, sans animations personnalisées).

Personnalisation du Drawer : en-tête, icônes, sections

Drawer permet une large personnalisation. Dans Android, NavigationView prend en charge headerLayout — une mise en page personnalisée placée au-dessus des éléments de menu. Il peut contenir un avatar, un nom d'utilisateur, un e-mail et une image de couverture. Les éléments de menu sont regroupés via <menu> avec des sous-titres, des séparateurs et des interrupteurs. Sous iOS, la personnalisation de SideMenu inclut la configuration de la couleur d'arrière-plan, du flou, de la largeur et du rayon des coins.

// En-tête personnalisé pour NavigationView
val headerView = binding.navView.inflateHeaderView(R.layout.nav_header)
headerView.findViewById<ImageView>(R.id.iv_avatar)
    .setImageResource(R.drawable.avatar)
headerView.findViewById<TextView>(R.id.tv_name)
    .text = "John Doe"

// Configuration des éléments de menu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Ajouter un badge
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design recommande la structure Drawer suivante : en-tête (nom, avatar), éléments de navigation principaux (5–8), séparateur, éléments secondaires (Paramètres, Aide), pied de page (À propos, version). Dans Material 3, NavigationView prend également en charge la surbrillance personnalisée de l'élément actif via itemShape et itemBackground.

Quand utiliser le Drawer : recommandations UX

Drawer est efficace pour les applications avec 6+ sections, paramètres et pages d'aide. Il ne convient pas aux applications où l'accès rapide aux sections est critique — dans ces cas, Bottom Navigation est meilleur. Material Design recommande de combiner Drawer avec Bottom Navigation : navigation principale — Bottom (3–5 onglets), supplémentaire — Drawer (paramètres, aide, à propos).

Erreurs courantes lors de l'implémentation de Drawer : menu surchargé (15+ éléments sans regroupement), masquage des sections importantes sous le pli, absence d'icônes (le texte sans icônes est scanné 30 % plus lentement), animation avec des retards (doit être ≤ 200 ms). Meilleures pratiques : en-tête avec nom d'utilisateur, icônes pour chaque élément, séparateurs entre les groupes, surbrillance de la section active, prise en charge du geste de balayage pour l'ouverture.

• 6+ sections — Drawer est justifié, moins — utilisez Bottom Navigation
• Icônes — obligatoires pour chaque élément, accélèrent la recherche visuelle
• Regroupement — séparateurs entre les éléments principaux et secondaires
• En-tête — avfatar, nom et e-mail pour la personnalisation (apps sociales)
• Geste de balayage — obligatoire pour l'ouverture, dupliqué par le bouton hamburger