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 حصوں والی ایپس کے لیے موزوں ہے، لیکن نیویگیشن کا وقت Bottom Navigation سے 40% زیادہ ہے۔ صارف اسکرین کے تہہ (اسکرول) کے نیچے موجود مینو آئٹمز سے محروم ہو جاتے ہیں۔ لہٰذا اہم حصے Drawer کے اوپری حصے میں ہونے چاہئیں، اور کم اہم (ایپ کے بارے میں، ترتیبات) — نیچے، ایک تقسیم کرنے والے سے الگ۔

Drawer کی اقسام: Modal اور Standard

Modal Drawer مواد کے اوپر سلائیڈ ہوتا ہے، پس منظر کو مدھم کرتا ہے۔ موبائل آلات پر استعمال ہوتا ہے جہاں اسکرین کی چوڑائی محدود ہوتی ہے۔ آئٹم منتخب کرنے کے بعد، Drawer خود بخود بند ہو جاتا ہے۔ Standard Drawer (Permanent) ایک مقررہ پینل ہے جو ہمیشہ نظر آتا ہے، مواد کو منتقل کرتا ہے۔ 900 dp سے اسکرین چوڑائی والے ٹیبلیٹ اور ڈیسک ٹاپ پر استعمال ہوتا ہے۔ Material 3 Rail Drawer بھی بیان کرتا ہے — ٹیبلیٹ کے لیے ایک کمپیکٹ ورژن جو صرف آئیکن دکھاتا ہے۔

Android میں DrawerLayout

DrawerLayout Android میں معیاری ViewGroup ہے جو سلائیڈنگ سائڈ مینو نافذ کرتا ہے۔ DrawerLayout میں دو ذیلی عناصر ہوتے ہیں: پہلا — مرکزی مواد (NavHostFragment کے ساتھ FrameLayout)، دوسرا — مینو کے ساتھ 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)

        // Navigation Component کے ساتھ Drawer کا رابطہ
        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 Drawer مواد کے لیے Material Design کا ایک جزو ہے۔ یہ ہیڈر (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 بائیں اور دائیں مینو، متعدد سطحوں اور UINavigationController کے ذریعے UIKit انضمام کو سپورٹ کرتا ہے۔ متبادل iPad پر UISplitViewController ہے (سسٹم، کسٹم اینیمیشن کے بغیر)۔

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 کب استعمال کریں: UX سفارشات

Drawer 6+ حصوں، ترتیبات اور مدد کے صفحات والی ایپس کے لیے مؤثر ہے۔ ان ایپس کے لیے موزوں نہیں جہاں حصوں تک فوری رسائی اہم ہے — ایسی صورتوں میں Bottom Navigation بہتر ہے۔ Material Design Drawer کو Bottom Navigation کے ساتھ جوڑنے کی تجویز کرتا ہے: مرکزی نیویگیشن — Bottom (3–5 ٹیبز)، اضافی — Drawer (ترتیبات، مدد، ایپ کے بارے میں)۔

Drawer کو نافذ کرتے وقت عام غلطیاں: اوورلوڈ مینو (گروپ بندی کے بغیر 15+ آئٹمز)، تہہ کے نیچے اہم حصوں کو چھپانا، آئیکن کی کمی (آئیکن کے بغیر متن 30% آہستہ اسکین ہوتا ہے)، تاخیر کے ساتھ اینیمیشن (≤ 200 ms ہونی چاہیے)۔ بہترین طریقوں: صارف نام کے ساتھ ہیڈر، ہر آئٹم کے لیے آئیکن، گروپوں کے درمیان تقسیم کرنے والے، فعال حصے کو نمایاں کرنا، کھولنے کے لیے سوائپ اشارے کی حمایت۔

• 6+ حصے — Drawer جائز ہے، کم — Bottom Navigation استعمال کریں
• آئیکن — ہر آئٹم کے لیے لازمی، بصری تلاش کو تیز کرتے ہیں
• گروپ بندی — مرکزی اور ثانوی آئٹمز کے درمیان تقسیم کرنے والے
• ہیڈر — ذاتی بنانے کے لیے اوتار، نام اور ای میل (سماجی ایپس)
• سوائپ اشارہ — کھولنے کے لیے لازمی، ہیمبرگر بٹن سے نقل کیا گیا