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), подзаглавия, квадратчета за отметка и флагове. Атрибутът app:menu сочи към XML-меню с навигационни точки. NavigationUI автоматично подчертава активния елемент и синхронизира състоянието с NavController.

Side Menu в iOS

В iOS няма вграден компонент „Drawer” — Apple не препоръчва странично меню за iPhone (HIG, 2026). Въпреки това за iPad се използва UISplitViewController с primary и secondary панели. За iPhone страничното меню се имплементира чрез библиотеки на трети страни (SideMenu, SwiftUI-side-menu) или персонализирани решения с отместване на съдържанието. В SwiftUI страничното меню се създава чрез ZStack с анимация на отместване.

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, поставен над елементите на менюто. В него се поставят аватар, потребителско име, имейл и корица. Елементите на менюто се групират чрез <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
• Икони — задължителни за всеки елемент, ускоряват визуалното търсене
• Групиране — разделители между основни и второстепенни елементи
• Заглавие — аватар, име и имейл за персонализация (социални приложения)
• Жест на плъзгане — задължителен за отваряне, дублиран от бутона „хамбургер”