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) یا راه‌حل‌های سفارشی با 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 سفارشی که بالای آیتم‌های منو قرار می‌گیرد. در آن آواتار، نام کاربری، ایمیل و کاور قرار می‌گیرد. آیتم‌های منو از طریق <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

// افزودن نشان (Badge)
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 استفاده کنید
• آیکون‌ها — برای هر آیتم الزامی است، جستجوی بصری را تسریع می‌کند
• گروه‌بندی — جداکننده بین آیتم‌های اصلی و فرعی
• عنوان — آواتار، نام و ایمیل برای شخصی‌سازی (برنامه‌های اجتماعی)
• حرکت سوایپ — برای باز کردن الزامی است، با دکمه «همبرگری» تکرار می‌شود