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.

Бічне меню в 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()
        }
    }
}

Для production-проектів на 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 для персоналізації (соціальні додатки)
• Жест свайпу — обов'язковий для відкриття, дублюється кнопкою «гамбургер»