Drawer — co to je, DrawerLayout a postranní menu v aplikacích

Co je to Drawer?

Drawer (Navigation Drawer) — navigační prvek ve formě panelu, který se vysouvá z levého okraje obrazovky tažením prstem nebo kliknutím na ikonu „hamburger” (tři vodorovné čáry). Drawer obsahuje navigační odkazy, nadpis a volitelné prvky: avatar uživatele, počitadla oznámení, oddělovače. Panel může překrývat obsah (Modal) nebo jej posouvat (Standard).

Material Design 3 (2026) definuje Navigation Drawer jako komponentu pro aplikace s 6+ navigačními body. Na rozdíl od Bottom Navigation, Drawer nezabírá stálé místo na obrazovce a zobrazuje se pouze na vyžádání uživatele. Tím uvolňuje místo pro obsah, ale vyžaduje dodatečnou akci k otevření. Google doporučuje Drawer pro aplikace s hlubokou hierarchií sekcí.

Výzkum UX Planet (2025) ukázal: Drawer je vhodný pro aplikace s 5–15 sekcemi, ale doba navigace je o 40% vyšší než u Bottom Navigation. Uživatelé přehlížejí položky menu pod přehybem obrazovky (scroll). Proto důležité sekce by měly být v horní části Drawer a méně důležité (O aplikaci, Nastavení) — v dolní části, oddělené oddělovačem.

Typy Drawer: Modal a Standard

Modal Drawer — vysouvá se přes obsah, ztmavuje pozadí. Používá se na mobilních zařízeních, kde je obrazovka omezená šířkou. Po výběru položky se Drawer automaticky zavře. Standard Drawer (Permanent) — pevný panel, trvale viditelný, posouvající obsah. Používá se na tabletech a desktopu s šířkou obrazovky od 900 dp. Material 3 také definuje Rail Drawer — kompaktní verzi pro tablety zobrazující pouze ikony.

DrawerLayout v Android

DrawerLayout — standardní ViewGroup v Android implementující vysouvací postranní menu. DrawerLayout obsahuje dva podřízené prvky: první — hlavní obsah (FrameLayout s NavHostFragment), druhý — NavigationView s menu. DrawerLayout zpracovává gesta tažení a programové otevírání/zavírání pomocí ActionBarDrawerToggle.

// Aktivita s DrawerLayout a 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)

        // Propojení Drawer s 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"
//   ...>
//   <!-- Hlavní obsah -->
//   <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 — komponenta Material Design pro obsah Drawer. Podporuje nadpis (headerLayout), položky menu (menu), podnadpisy, zaškrtávací políčka a příznaky. Atribut app:menu odkazuje na XML-menu s navigačními body. NavigationUI automaticky zvýrazňuje aktivní položku a synchronizuje stav s NavController.

Side Menu v iOS

V iOS neexistuje vestavěná komponenta „Drawer” — Apple nedoporučuje postranní menu pro iPhone (HIG, 2026). Pro iPad se však používá UISplitViewController s primary a secondary panely. Pro iPhone se postranní menu implementuje pomocí knihoven třetích stran (SideMenu, SwiftUI-side-menu) nebo vlastních řešení s posunem obsahu. V SwiftUI se postranní menu vytváří přes ZStack s animací posunu.

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

// Použití
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()
        }
    }
}

Pro produkční projekty na iOS se často používá knihovna SideMenu (GitHub, 8k+ hvězd). Poskytuje hotový UIViewController s podporou gest, rozmazáním pozadí, vlastní šířkou a animacemi. SideMenu podporuje levé a pravé menu, více úrovní a integraci s UIKit přes UINavigationController. Alternativa — UISplitViewController na iPadu (systémový, bez vlastních animací).

Přizpůsobení Drawer: nadpis, ikony, sekce

Drawer umožňuje široké přizpůsobení. V Android NavigationView podporuje headerLayout — vlastní layout umístěný nad položkami menu. Umísťuje se do něj avatar, uživatelské jméno, email a obálka. Položky menu se seskupují přes <menu> s podnadpisy, oddělovači a příznaky. Na iOS přizpůsobení SideMenu zahrnuje nastavení barvy pozadí, rozmazání, šířky a zaoblení rohů.

// Vlastní header pro 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"

// Konfigurace položek menu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Přidání odznaku
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design doporučuje následující strukturu Drawer: nadpis (jméno, avatar), hlavní navigační položky (5–8), oddělovač, vedlejší položky (Nastavení, Nápověda), zápatí (O aplikaci, verze). V Material 3 NavigationView také podporuje vlastní zvýraznění aktivní položky pomocí itemShape a itemBackground.

Kdy použít Drawer: UX doporučení

Drawer je účinný pro aplikace s 6+ sekcemi, nastaveními a stránkami nápovědy. Není vhodný pro aplikace, kde je rychlý přístup k sekcím kritický — v takových případech je lepší Bottom Navigation. Material Design doporučuje kombinovat Drawer s Bottom Navigation: hlavní navigace — Bottom (3–5 záložek), doplňková — Drawer (nastavení, nápověda, o aplikaci).

Hlavní chyby při implementaci Drawer: přetížené menu (15+ položek bez seskupení), skrytí důležitých sekcí pod přehybem, chybějící ikony (text bez ikon je o 30% pomaleji skenován), animace se zpožděním (měla by být ≤ 200 ms). Nejlepší postupy: nadpis s uživatelským jménem, ikony u každé položky, oddělovače mezi skupinami, zvýraznění aktivní sekce, podpora gesta tažení pro otevření.

• 6+ sekcí — Drawer je ospravedlněn, méně — použijte Bottom Navigation
• Ikony — povinné pro každou položku, urychlují vizuální vyhledávání
• Seskupení — oddělovače mezi hlavními a vedlejšími položkami
• Nadpis — avatar, jméno a email pro personalizaci (sociální aplikace)
• Gesto tažení — povinné pro otevření, duplikováno tlačítkem „hamburger”