Drawer — ce este, DrawerLayout și meniul lateral în aplicații

Ce este Drawer?

Drawer (Navigation Drawer) — un element de navigare sub formă de panou care se deplasează din marginea stângă a ecranului printr-un gest de glisare sau apăsare pe pictograma „hamburger” (trei linii orizontale). Drawer conține linkuri de navigare, un titlu și elemente opționale: avatarul utilizatorului, contoare de notificări, separatoare. Panoul poate acoperi conținutul (Modal) sau îl poate deplasa (Standard).

Material Design 3 (2026) definește Navigation Drawer ca componentă pentru aplicații cu 6+ puncte de navigare. Spre deosebire de Bottom Navigation, Drawer nu ocupă un loc fix pe ecran și se afișează doar la cererea utilizatorului. Acest lucru eliberează spațiu pentru conținut, dar necesită o acțiune suplimentară pentru deschidere. Google recomandă Drawer pentru aplicații cu ierarhie profundă de secțiuni.

Cercetarea UX Planet (2025) a arătat: Drawer este potrivit pentru aplicații cu 5–15 secțiuni, dar timpul de navigare este cu 40% mai mare decât la Bottom Navigation. Utilizatorii omit punctele de meniu situate sub pliul ecranului (scroll). De aceea, secțiunile importante trebuie să fie în partea superioară a Drawer, iar cele mai puțin importante (Despre aplicație, Setări) — în partea inferioară, separate de un separator.

Tipuri de Drawer: Modal și Standard

Modal Drawer — se deplasează peste conținut, întunecând fundalul. Folosit pe dispozitive mobile unde ecranul este limitat în lățime. După selectarea unui element, Drawer se închide automat. Standard Drawer (Permanent) — un panou fix, vizibil permanent, care deplasează conținutul. Folosit pe tablete și desktop cu lățimea ecranului de la 900 dp. Material 3 definește și Rail Drawer — o versiune compactă pentru tablete, care arată doar pictograme.

DrawerLayout în Android

DrawerLayout — ViewGroup standard în Android care implementează meniul lateral glisant. DrawerLayout conține două elemente copil: primul — conținutul principal (FrameLayout cu NavHostFragment), al doilea — NavigationView cu meniul. DrawerLayout gestionează gesturile de glisare și deschiderea/închiderea programatică prin ActionBarDrawerToggle.

// Activitate cu DrawerLayout și 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)

        // Legarea Drawer de 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"
//   ...>
//   <!-- Conținut 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 — componenta Material Design pentru conținutul Drawer. Suportă titlu (headerLayout), elemente de meniu (menu), subtitluri, checkboxuri și bifuri. Atributul app:menu indică un XML-meniu cu puncte de navigare. NavigationUI evidențiază automat elementul activ și sincronizează starea cu NavController.

Side Menu în iOS

În iOS nu există o componentă „Drawer” încorporată — Apple nu recomandă meniul lateral pentru iPhone (HIG, 2026). Cu toate acestea, pentru iPad se folosește UISplitViewController cu panourile primary și secondary. Pentru iPhone, meniul lateral se implementează prin biblioteci terțe (SideMenu, SwiftUI-side-menu) sau soluții personalizate cu offset al conținutului. În SwiftUI, meniul lateral se creează prin ZStack cu animația offset.

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 }
            }
        }
    }
}

// Utilizare
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()
        }
    }
}

Pentru proiecte de producție pe iOS se folosește adesea biblioteca SideMenu (GitHub, 8k+ stele). Oferă un UIViewController gata făcut cu suport pentru gesturi, blur de fundal, lățime personalizată și animații. SideMenu suportă meniul stânga și dreapta, niveluri multiple și integrare cu UIKit prin UINavigationController. Alternativă — UISplitViewController pe iPad (sistemic, fără animații personalizate).

Personalizarea Drawer: titlu, pictograme, secțiuni

Drawer permite o personalizare largă. În Android, NavigationView suportă headerLayout — un layout personalizat plasat deasupra elementelor de meniu. În el se plasează avatarul, numele utilizatorului, emailul și coperta. Elementele de meniu se grupează prin <menu> cu subtitluri, separatoare și bifuri. Pe iOS, personalizarea SideMenu include ajustarea culorii fundalului, blurului, lățimii și colțurilor rotunjite.

// Header personalizat pentru 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"

// Configurarea elementelor de meniu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Adăugarea insignei
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design recomandă următoarea structură Drawer: titlu (nume, avatar), puncte principale de navigare (5–8), separator, puncte secundare (Setări, Ajutor), subsol (Despre aplicație, versiune). În Material 3, NavigationView suportă și evidențierea personalizată a elementului activ prin itemShape și itemBackground.

Când să folosiți Drawer: recomandări UX

Drawer este eficient pentru aplicații cu 6+ secțiuni, setări și pagini de ajutor. Nu este potrivit pentru aplicații unde accesul rapid la secțiuni este critic — în astfel de cazuri, Bottom Navigation este mai bună. Material Design recomandă combinarea Drawer cu Bottom Navigation: navigarea principală — Bottom (3–5 file), suplimentară — Drawer (setări, ajutor, despre aplicație).

Principalele greșeli la implementarea Drawer: meniu supraîncărcat (15+ elemente fără grupare), ascunderea secțiunilor importante sub pliul ecranului, lipsa pictogramelor (textul fără pictograme este scanat cu 30% mai încet), animație cu întârzieri (trebuie să fie ≤ 200 ms). Cele mai bune practici: titlu cu numele utilizatorului, pictograme la fiecare element, separatoare între grupuri, evidențierea secțiunii active, suport pentru gestul de glisare la deschidere.

• 6+ secțiuni — Drawer este justificat, mai puține — folosiți Bottom Navigation
• Pictograme — obligatorii pentru fiecare element, accelerează căutarea vizuală
• Grupare — separatoare între elementele principale și secundare
• Titlu — avatar, nume și email pentru personalizare (aplicații sociale)
• Gest de glisare — obligatoriu pentru deschidere, dublat de butonul „hamburger”