Drawer — шта је то, DrawerLayout и бочни мени у апликацијама

Шта је Drawer?

Drawer (Navigation Drawer) — елемент навигације у облику панела који се извлачи са леве ивице екрана покретом превлачења или кликом на иконицу „хамбургер” (три хоризонталне линије). Drawer садржи навигационе линкове, наслов и опционе елементе: аватар корисника, бројаче обавештења, разделнике. Панел може прекривати садржај (Modal) или га померати (Standard).

Material Design 3 (2026) дефинише Navigation Drawer као компоненту за апликације са 6+ навигационих тачака. За разлику од Bottom Navigation, Drawer не заузима стално место на екрану и приказује се само на захтев корисника. Ово ослобађа простор за садржај, али захтева додатну радњу за отварање. Google препоручује Drawer за апликације са дубоком хијерархијом секција.

Истраживање UX Planet (2025) показало је: Drawer је погодан за апликације са 5–15 секција, али време навигације је 40% веће него код Bottom Navigation. Корисници пропуштају ставке менија које се налазе испод прегиба екрана (scroll). Зато важне секције треба да буду у горњем делу Drawer, а мање важне (О апликацији, Подешавања) — у доњем, одвојене разделником.

Типови Drawer: Modal и Standard

Modal Drawer — извлачи се преко садржаја, замрачујући позадину. Користи се на мобилним уређајима где је екран ограничен ширином. Након избора ставке, Drawer се аутоматски затвара. Standard Drawer (Permanent) — фиксни панел, стално видљив, који помера садржај. Користи се на таблетима и десктопу са ширином екрана од 900 dp. Material 3 такође дефинише Rail Drawer — компактну верзију за таблете која приказује само иконице.

DrawerLayout у Android

DrawerLayout — стандардна ViewGroup у Android-у која имплементира извлачећи бочни мени. DrawerLayout садржи два потомка: први — главни садржај (FrameLayout са NavHostFragment), други — NavigationView са менијем. DrawerLayout обрађује покрете превлачења и програмско отварање/затварање преко ActionBarDrawerToggle.

// Активити са DrawerLayout и 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)

        // Повезивање Drawer-а са 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"
//   ...>
//   <!-- Главни садржај -->
//   <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 — компонента Material Design за садржај Drawer-а. Подржава наслов (headerLayout), ставке менија (menu), поднаслове, checkboxes и ознаке. Атрибут app:menu указује на XML-мени са навигационим тачкама. NavigationUI аутоматски истиче активну ставку и синхронизује стање са NavController-ом.

Side Menu у iOS

У iOS-у не постоји уграђена компонента „Drawer” — Apple не препоручује бочни мени за iPhone (HIG, 2026). Међутим, за iPad се користи UISplitViewController са primary и secondary панелима. За iPhone, бочни мени се имплементира преко библиотека трећих страна (SideMenu, SwiftUI-side-menu) или прилагођених решења са offset садржаја. У SwiftUI, бочни мени се креира преко ZStack са анимацијом 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 }
            }
        }
    }
}

// Употреба
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()
        }
    }
}

За продукцијске пројекте на iOS-у често се користи библиотека SideMenu (GitHub, 8k+ звездица). Она пружа готов UIViewController са подршком за покрете, замућење позадине, прилагодљиву ширину и анимације. SideMenu подржава леви и десни мени, више нивоа и интеграцију са UIKit-ом преко UINavigationController-а. Алтернатива — UISplitViewController на iPad-у (системски, без прилагођених анимација).

Прилагођавање Drawer: наслов, иконице, секције

Drawer омогућава широко прилагођавање. У Android-у, NavigationView подржава headerLayout — прилагођени layout постављен изнад ставки менија. У њему се поставља аватар, име корисника, email и омот. Ставке менија се групишу преко <menu> са поднасловима, разделницима и ознакама. На iOS-у, прилагођавање SideMenu укључује подешавање боје позадине, замућења, ширине и заобљења углова.

// Прилагођени header за 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"

// Подешавање ставки менија
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Додавање беџа
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design препоручује следећу структуру Drawer: наслов (име, аватар), главне навигационе ставке (5–8), разделник, секундарне ставке (Подешавања, Помоћ), подножје (О апликацији, верзија). У Material 3, NavigationView такође подржава прилагођено истицање активне ставке кроз itemShape и itemBackground.

Када користити Drawer: UX препоруке

Drawer је ефикасан за апликације са 6+ секција, подешавањима и страницама помоћи. Није погодан за апликације где је брз приступ секцијама критичан — у таквим случајевима боља је Bottom Navigation. Material Design препоручује комбиновање Drawer са Bottom Navigation: главна навигација — Bottom (3–5 картица), додатна — Drawer (подешавања, помоћ, о апликацији).

Главне грешке при имплементацији Drawer: преоптерећени мени (15+ ставки без груписања), скривање важних секција испод прегиба, недостатак иконица (текст без иконица се 30% спорије скенира), анимација са кашњењима (треба да буде ≤ 200 ms). Најбоље праксе: наслов са именом корисника, иконице уз сваку ставку, разделници између група, истицање активне секције, подршка за покрет превлачења при отварању.

• 6+ секција — Drawer је оправдан, мање — користите Bottom Navigation
• Иконице — обавезне за сваку ставку, убрзавају визуелну претрагу
• Груписање — разделници између главних и секундарних ставки
• Наслов — аватар, име и email за персонализацију (друштвене апликације)
• Покрет превлачења — обавезан за отварање, дуплиран дугметом „хамбургер”