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. يفتقد المستخدمون عناصر القائمة الموجودة أسفل طي الشاشة (التمرير). لذلك يجب أن تكون الأقسام المهمة في الجزء العلوي من 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 مع لوحات رئيسية وثانوية. بالنسبة لـ 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 — تخطيط مخصص يوضع فوق عناصر القائمة. يمكن أن يحتوي على صورة رمزية، اسم المستخدم، البريد الإلكتروني وصورة الغلاف. يتم تجميع عناصر القائمة عبر <menu> بعناوين فرعية، فواصل ومفاتيح. في iOS، يشمل تخصيص SideMenu إعداد لون الخلفية، الطمس، العرض ونصف قطر الزوايا.

// رأس مخصص لـ 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: توصيات تجربة المستخدم

Drawer فعال للتطبيقات التي تحتوي على 6+ أقسام، إعدادات وصفحات مساعدة. غير مناسب للتطبيقات حيث الوصول السريع إلى الأقسام أمر بالغ الأهمية — في هذه الحالات يكون Bottom Navigation أفضل. يوصي Material Design بدمج Drawer مع Bottom Navigation: التنقل الرئيسي — Bottom (3–5 علامات تبويب)، الإضافي — Drawer (الإعدادات، المساعدة، حول).

الأخطاء الشائعة عند تنفيذ Drawer: قائمة مثقلة (15+ عنصراً بدون تجميع)، إخفاء أقسام مهمة أسفل الطي، عدم وجود أيقونات (النص بدون أيقونات يُمسح أبطأ بنسبة 30%)، رسوم متحركة متأخرة (يجب أن تكون ≤ 200 مللي ثانية). أفضل الممارسات: رأس باسم المستخدم، أيقونات لكل عنصر، فواصل بين المجموعات، تسليط الضوء على القسم النشط، دعم إيماءة السحب للفتح.

• 6+ أقسام — Drawer مبرر، أقل — استخدم Bottom Navigation
• أيقونات — إلزامية لكل عنصر، تسرع البحث البصري
• تجميع — فواصل بين العناصر الرئيسية والثانوية
• رأس — صورة رمزية، اسم وبريد إلكتروني للتخصيص (التطبيقات الاجتماعية)
• إيماءة السحب — إلزامية للفتح، مكررة بزر الهامبرغر