Drawer — bu nima, DrawerLayout va ilovalarda yon menyu

Drawer nima?

Drawer (Navigation Drawer) — surish harakati yoki "gamburger" belgisini (uch gorizontal chiziq) bosish orqali ekranning chap chetidan chiqadigan panel ko'rinishidagi navigatsiya elementi. Drawer navigatsiya havolalari, sarlavha va ixtiyoriy elementlarni o'z ichiga oladi: foydalanuvchi avatari, bildirishnomalar hisoblagichlari, ajratgichlar. Panel tarkibni yopishi (Modal) yoki uni siljitishi (Standard) mumkin.

Material Design 3 (2026) Navigation Drawer ni 6+ navigatsiya punkti bo'lgan ilovalar uchun komponent sifatida belgilaydi. Bottom Navigation dan farqli o'laroq, Drawer ekranda doimiy joy egallamaydi va faqat foydalanuvchi so'roviga binoan ko'rsatiladi. Bu tarkib uchun joyni bo'shatadi, lekin ochish uchun qo'shimcha harakat talab qiladi. Google chuqur bo'lim ierarxiyasiga ega ilovalar uchun Drawer ni tavsiya qiladi.

UX Planet (2025) tadqiqoti shuni ko'rsatdi: Drawer 5–15 bo'limli ilovalar uchun mos keladi, ammo navigatsiya vaqti Bottom Navigation ga nisbatan 40% yuqori. Foydalanuvchilar ekranning bukilish chizig'idan pastda joylashgan menyu punktlarini o'tkazib yuborishadi (scroll). Shuning uchun muhim bo'limlar Drawer ning yuqori qismida, kamroq muhimlari (Ilova haqida, Sozlamalar) esa pastki qismida, ajratgich bilan ajratilgan holda bo'lishi kerak.

Drawer turlari: Modal va Standard

Modal Drawer — tarkib ustiga chiqadi, fonni qoraytiradi. Ekran kengligi cheklangan mobil qurilmalarda ishlatiladi. Punkt tanlangandan so'ng Drawer avtomatik yopiladi. Standard Drawer (Permanent) — doimiy ko'rinadigan, tarkibni siljitadigan sobit panel. 900 dp dan boshlangan ekran kengligi bo'lgan planshet va ish stollarida ishlatiladi. Material 3 shuningdek Rail Drawer — faqat belgilarni ko'rsatadigan planshetlar uchun ixcham versiyani belgilaydi.

Android da DrawerLayout

DrawerLayout — Android da chiqadigan yon menyuni amalga oshiradigan standart ViewGroup. DrawerLayout ikkita bola elementni o'z ichiga oladi: birinchisi — asosiy tarkib (NavHostFragment bilan FrameLayout), ikkinchisi — menyu bilan NavigationView. DrawerLayout surish harakatlarini va ActionBarDrawerToggle orqali dasturiy ochish/yopishni boshqaradi.

// DrawerLayout va NavigationView bilan Aktiviti
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 ni Navigation Component bilan bog'lash
        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"
//   ...>
//   <!-- Asosiy tarkib -->
//   <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 tarkibi uchun Material Design komponenti. Sarlavha (headerLayout), menyu punktlari (menu), ost sarlavhalar, checkboslar va bayroqlarni qo'llab-quvvatlaydi. app:menu atributi navigatsiya punktlari bilan XML-menyuga ishora qiladi. NavigationUI avtomatik ravishda faol punktni ajratib ko'rsatadi va holatni NavController bilan sinxronlashtiradi.

iOS da Side Menu

iOS da o'rnatilgan "Drawer" komponenti yo'q — Apple iPhone uchun yon menyuni tavsiya etmaydi (HIG, 2026). Biroq iPad uchun primary va secondary panellari bilan UISplitViewController ishlatiladi. iPhone uchun yon menyu uchinchi tomon kutubxonalari (SideMenu, SwiftUI-side-menu) yoki tarkib offseti bilan maxsus yechimlar orqali amalga oshiriladi. SwiftUI da yon menyu offset animatsiyasi bilan ZStack orqali yaratiladi.

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 }
            }
        }
    }
}

// Foydalanish
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 da ishlab chiqarish loyihalarida tez-tez SideMenu kutubxonasi ishlatiladi (GitHub, 8k+ yulduz). U harakatlarni qo'llab-quvvatlash, fonni xiralashtirish, maxsus kenglik va animatsiyalar bilan tayyor UIViewController ni taqdim etadi. SideMenu chap va o'ng menyuni, ko'p darajali tuzilmalarni va UIKit bilan UINavigationController orqali integratsiyani qo'llab-quvvatlaydi. Muqobil — iPad da UISplitViewController (tizimli, maxsus animatsiyalarsiz).

Drawer ni sozlash: sarlavha, belgilar, bo'limlar

Drawer keng sozlash imkonini beradi. Android da NavigationView headerLayout ni qo'llab-quvvatlaydi — menyu punktlari ustiga joylashtiriladigan maxsus layout. Unda avatar, foydalanuvchi nomi, email va muqova joylashtiriladi. Menyu punktlari <menu> orqali ost sarlavhalar, ajratgichlar va bayroqlar bilan guruhlanadi. iOS da SideMenu sozlashi fon rangi, xiralashtirish, kenglik va burchaklarning yumaloqligini sozlashni o'z ichiga oladi.

// NavigationView uchun maxsus header
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"

// Menyu punktlarini sozlash
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Badge qo'shish
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design quyidagi Drawer strukturasini tavsiya qiladi: sarlavha (ism, avatar), asosiy navigatsiya punktlari (5–8), ajratgich, ikkinchi darajali punktlar (Sozlamalar, Yordam), pastki qism (Ilova haqida, versiya). Material 3 da NavigationView shuningdek itemShape va itemBackground orqali faol punktni maxsus ajratib ko'rsatishni qo'llab-quvvatlaydi.

Drawer dan qachon foydalanish: UX tavsiyalari

Drawer 6+ bo'lim, sozlamalar va yordam sahifalari bo'lgan ilovalar uchun samarali. Bo'limlarga tezkor kirish muhim bo'lgan ilovalar uchun mos emas — bunday hollarda Bottom Navigation yaxshiroq. Material Design Drawer ni Bottom Navigation bilan birlashtirishni tavsiya qiladi: asosiy navigatsiya — Bottom (3–5 tab), qo'shimcha — Drawer (sozlamalar, yordam, ilova haqida).

Drawer ni amalga oshirishdagi asosiy xatolar: haddan tashqari yuklangan menyu (guruhlashsiz 15+ punkt), muhim bo'limlarni bukilish chizig'i ostida yashirish, belgilarning yo'qligi (belgisiz matn 30% sekinroq skanerlanadi), kechikishli animatsiya (≤ 200 ms bo'lishi kerak). Eng yaxshi amaliyotlar: foydalanuvchi nomi bilan sarlavha, har bir punktda belgilar, guruhlar orasida ajratgichlar, faol bo'limni ajratib ko'rsatish, ochish uchun surish harakatini qo'llab-quvvatlash.

• 6+ bo'lim — Drawer asosli, kamroq bo'lsa — Bottom Navigation dan foydalaning
• Belgilar — har bir punkt uchun majburiy, vizual qidiruvni tezlashtiradi
• Guruhlash — asosiy va ikkinchi darajali punktlar orasida ajratgichlar
• Sarlavha — shaxsiylashtirish uchun avatar, nom va email (ijtimoiy ilovalar)
• Surish harakati — ochish uchun majburiy, "gamburger" tugmasi bilan takrorlanadi