Drawer — mi az, DrawerLayout és oldalsó menü alkalmazásokban

Mi a Drawer?

Drawer (Navigation Drawer) — egy navigációs elem panel formájában, amely a képernyő bal széléről csúszik elő egy húzó mozdulattal vagy a "hamburger" ikonra (három vízszintes vonal) kattintva. A Drawer navigációs linkeket, címet és opcionális elemeket tartalmaz: felhasználói avatár, értesítésszámlálók, elválasztók. A panel eltakarhatja a tartalmat (Modal) vagy eltolhatja azt (Standard).

Material Design 3 (2026) a Navigation Drawer-t olyan komponensként határozza meg, amely 6+ navigációs ponttal rendelkező alkalmazásokhoz való. A Bottom Navigation-tól eltérően a Drawer nem foglal állandó helyet a képernyőn, és csak a felhasználó kérésére jelenik meg. Ez helyet szabadít fel a tartalom számára, de további műveletet igényel a megnyitáshoz. A Google a Drawer-t mély szakasz-hierarchiával rendelkező alkalmazásokhoz ajánlja.

Az UX Planet (2025) kutatása kimutatta: a Drawer 5–15 szakasszal rendelkező alkalmazásokhoz alkalmas, de a navigációs idő 40%-kal magasabb, mint a Bottom Navigation esetében. A felhasználók kihagyják a képernyő hajtása alatt lévő menüpontokat (scroll). Ezért a fontos szakaszoknak a Drawer felső részén, a kevésbé fontosaknak (Az alkalmazásról, Beállítások) pedig az alsó részén kell lenniük, elválasztóval elkülönítve.

Drawer típusok: Modal és Standard

Modal Drawer — a tartalom fölé csúszik, elsötétíti a hátteret. Olyan mobileszközökön használatos, ahol a képernyő szélessége korlátozott. Egy elem kiválasztása után a Drawer automatikusan bezáródik. Standard Drawer (Permanent) — egy rögzített panel, amely folyamatosan látható és eltolja a tartalmat. 900 dp-től kezdődő képernyőszélességű tableteken és asztali számítógépeken használatos. A Material 3 meghatározza a Rail Drawer-t is — egy kompakt változatot tabletekhez, amely csak ikonokat jelenít meg.

DrawerLayout Androidban

DrawerLayout — a szabványos ViewGroup Androidban, amely a csúsztatható oldalsó menüt valósítja meg. A DrawerLayout két gyermekelemet tartalmaz: az első — a fő tartalom (FrameLayout NavHostFragment-tel), a második — NavigationView a menüvel. A DrawerLayout kezeli a húzó mozdulatokat és a programozott nyitást/zárást az ActionBarDrawerToggle segítségével.

// Aktivitás DrawerLayout és NavigationView segítségével
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)

        // Drawer összekapcsolása Navigation Component-tel
        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"
//   ...>
//   <!-- Fő tartalom -->
//   <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 — a Material Design komponense a Drawer tartalmához. Támogatja a fejlécet (headerLayout), menüpontokat (menu), alcímeket, jelölőnégyzeteket és jelzőket. Az app:menu attribútum egy XML-menüre mutat navigációs pontokkal. A NavigationUI automatikusan kiemeli az aktív pontot és szinkronizálja az állapotot a NavController-rel.

Side Menu iOS-ben

Az iOS-ben nincs beépített "Drawer" komponens — az Apple nem ajánlja az oldalsó menüt iPhone-hoz (HIG, 2026). Az iPad esetében azonban UISplitViewController használatos primary és secondary panelekkel. iPhone esetén az oldalsó menü harmadik féltől származó könyvtárakkal (SideMenu, SwiftUI-side-menu) vagy egyedi megoldásokkal valósítható meg tartalom-offsettel. A SwiftUI-ben az oldalsó menü ZStack-en keresztül, offset animációval jön létre.

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

// Használat
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()
        }
    }
}

Az iOS fejlesztésben gyakran használják a SideMenu könyvtárat (GitHub, 8k+ csillag). Kész UIViewController-t biztosít gesztusok támogatásával, háttér elmosással, egyedi szélességgel és animációkkal. A SideMenu támogatja a bal és jobb menüt, több szintet és integrációt a UIKit-kel UINavigationController-en keresztül. Alternatíva — UISplitViewController iPad-en (rendszerszintű, egyedi animációk nélkül).

Drawer testreszabása: cím, ikonok, szakaszok

Drawer széles körű testreszabást tesz lehetővé. Androidban a NavigationView támogatja a headerLayout-ot — egy egyedi layout-ot, amely a menüpontok fölé helyezhető. Itt helyezhető el az avatár, a felhasználónév, az e-mail és a borítókép. A menüpontok <menu> segítségével csoportosíthatók alcímekkel, elválasztókkal és jelzőkkel. iOS-ben a SideMenu testreszabása magában foglalja a háttérszín, elmosás, szélesség és saroklekerekítés beállítását.

// Egyedi header a NavigationView számára
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"

// Menüpontok konfigurálása
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Jelvény hozzáadása
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

A Material Design a következő Drawer struktúrát ajánlja: cím (név, avatár), fő navigációs pontok (5–8), elválasztó, másodlagos pontok (Beállítások, Súgó), lábléc (Alkalmazásról, verzió). A Material 3-ban a NavigationView támogatja az aktív pont egyedi kiemelését az itemShape és itemBackground segítségével.

Mikor használjuk a Drawer-t: UX ajánlások

Drawer hatékony a 6+ szakasszal, beállításokkal és súgóoldalakkal rendelkező alkalmazásokhoz. Nem alkalmas olyan alkalmazásokhoz, ahol a gyors hozzáférés kritikus — ilyen esetekben a Bottom Navigation jobb. A Material Design a Drawer és a Bottom Navigation kombinálását ajánlja: fő navigáció — Bottom (3–5 lap), kiegészítő — Drawer (beállítások, súgó, alkalmazásról).

A Drawer megvalósításának fő hibái: túlterhelt menü (15+ pont csoportosítás nélkül), fontos szakaszok elrejtése a hajtás alatt, ikonok hiánya (a szöveg ikonok nélkül 30%-kal lassabban szkennelhető), késleltetett animáció (≤ 200 ms kell legyen). Legjobb gyakorlatok: cím a felhasználónévvel, ikonok minden pontnál, elválasztók a csoportok között, az aktív szakasz kiemelése, a húzó mozdulat támogatása a nyitáshoz.

• 6+ szakasz — a Drawer indokolt, kevesebb esetén használja a Bottom Navigation-t
• Ikonok — kötelezőek minden ponthoz, gyorsítják a vizuális keresést
• Csoportosítás — elválasztók a fő és másodlagos pontok között
• Cím — avatár, név és e-mail a személyre szabáshoz (közösségi alkalmazások)
• Húzó mozdulat — kötelező a nyitáshoz, duplikálva a "hamburger" gombbal