Drawer — bu nədir, DrawerLayout və tətbiqlərdə yan menyu

Drawer nədir?

Drawer (Navigation Drawer) — sürüşdürmə jesti və ya "hamburger" işarəsinə (üç üfüqi xətt) kliklə ekranın sol kənarından çıxan panel şəklində naviqasiya elementi. Drawer naviqasiya keçidləri, başlıq və isteğe bağlı elementləri ehtiva edir: istifadəçi avatarı, bildiriş sayğacları, ayırıcılar. Panel məzmunu örtə (Modal) və ya onu sürüşdirə (Standard) bilər.

Material Design 3 (2026) Navigation Drawer-i 6+ naviqasiya nöqtəsi olan tətbiqlər üçün komponent kimi təyin edir. Bottom Navigation-dən fərqli olaraq, Drawer ekranda daimi yer tutmur və yalnız istifadəçinin istəyi ilə göstərilir. Bu, məzmun üçün yer boşaldır, lakin açmaq üçün əlavə hərəkət tələb edir. Google dərin bölmə iyerarxiyası olan tətbiqlər üçün Drawer-i tövsiyə edir.

UX Planet (2025) araşdırması göstərdi: Drawer 5–15 bölməsi olan tətbiqlər üçün uyğundur, lakin naviqasiya müddəti Bottom Navigation-dən 40% daha yüksəkdir. İstifadəçilər ekranın qatlanma xəttindən aşağıda yerləşən menyu nöqtələrini qaçırırlar (scroll). Buna görə vacib bölmələr Drawer-in yuxarı hissəsində, daha az vacib olanlar (Tətbiq haqqında, Parametrlər) isə aşağı hissədə, ayırıcı ilə ayrılmalıdır.

Drawer növləri: Modal və Standard

Modal Drawer — məzmunun üstünə çıxır, fonu qaraldır. Ekranı məhdud genişlikdə olan mobil cihazlarda istifadə olunur. Nöqtə seçildikdən sonra Drawer avtomatik bağlanır. Standard Drawer (Permanent) — daimi görünən, məzmunu sürüşdirən sabit panel. 900 dp-dən başlayan ekran genişliyi olan planşet və iş stollarında istifadə olunur. Material 3 həmçinin Rail Drawer — yalnız ikonları göstərən planşetlər üçün yığcam versiyanı təyin edir.

Android-də DrawerLayout

DrawerLayout — Android-də çıxan yan menyunu reallaşdıran standart ViewGroup. DrawerLayout iki uşaq elementi ehtiva edir: birincisi — əsas məzmun (NavHostFragment ilə FrameLayout), ikincisi — menyu ilə NavigationView. DrawerLayout sürüşdürmə jestlərini və ActionBarDrawerToggle vasitəsilə proqramlı açma/bağlamanı idarə edir.

// DrawerLayout və NavigationView ilə 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-in Navigation Component ilə əlaqələndirilməsi
        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"
//   ...>
//   <!-- Əsas məzmun -->
//   <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 məzmunu üçün Material Design komponenti. Başlıq (headerLayout), menyu nöqtələri (menu), alt başlıqlar, checkboxlar və işarələri dəstəkləyir. app:menu atributu naviqasiya nöqtələri olan XML-menyunu göstərir. NavigationUI avtomatik olaraq aktiv nöqtəni vurğulayır və vəziyyəti NavController ilə sinxronlaşdırır.

iOS-da Side Menu

iOS-da daxili "Drawer" komponenti yoxdur — Apple iPhone üçün yan menyunu tövsiyə etmir (HIG, 2026). Lakin iPad üçün primary və secondary panelləri ilə UISplitViewController istifadə olunur. iPhone üçün yan menyu üçüncü tərəf kitabxanaları (SideMenu, SwiftUI-side-menu) və ya məzmun offseti ilə fərdi həllər vasitəsilə reallaşdırılır. SwiftUI-də yan menyu offset animasiyası ilə ZStack vasitəsilə yaradılır.

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

// İstifadə
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 istehsal layihələrində tez-tez SideMenu kitabxanası istifadə olunur (GitHub, 8k+ ulduz). O, jest dəstəyi, fon bulanıqlığı, fərdi genişlik və animasiyalarla hazır UIViewController təqdim edir. SideMenu sol və sağ menyunu, çoxsəviyyəli strukturları və UIKit ilə UINavigationController vasitəsilə inteqrasiyanı dəstəkləyir. Alternativ — iPad-də UISplitViewController (sistem, fərdi animasiyalar olmadan).

Drawer-in fərdiləşdirilməsi: başlıq, ikonlar, bölmələr

Drawer geniş fərdiləşdirməyə imkan verir. Android-də NavigationView headerLayout-u dəstəkləyir — menyu nöqtələrinin üstündə yerləşdirilən fərdi layout. Orada avatar, istifadəçi adı, email və örtük yerləşdirilir. Menyu nöqtələri <menu> vasitəsilə alt başlıqlar, ayırıcılar və işarələrlə qruplaşdırılır. iOS-da SideMenu fərdiləşdirilməsi fon rəngi, bulanıqlıq, genişlik və künc yuvarlaqlığının tənzimlənməsini əhatə edir.

// NavigationView üçün fərdi 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 nöqtələrinin konfiqurasiyası
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Badge əlavə edilməsi
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design aşağıdakı Drawer strukturunu tövsiyə edir: başlıq (ad, avatar), əsas naviqasiya nöqtələri (5–8), ayırıcı, ikinci dərəcəli nöqtələr (Parametrlər, Kömək), alt bilgi (Tətbiq haqqında, versiya). Material 3-də NavigationView həmçinin itemShape və itemBackground vasitəsilə aktiv nöqtənin fərdi vurğulanmasını dəstəkləyir.

Drawer nə vaxt istifadə edilməlidir: UX tövsiyələri

Drawer 6+ bölməsi, parametrləri və yardım səhifələri olan tətbiqlər üçün effektivdir. Bölmələrə sürətli girişin kritik olduğu tətbiqlər üçün uyğun deyil — belə hallarda Bottom Navigation daha yaxşıdır. Material Design Drawer-i Bottom Navigation ilə birləşdirməyi tövsiyə edir: əsas naviqasiya — Bottom (3–5 tab), əlavə — Drawer (parametrlər, yardım, tətbiq haqqında).

Drawer reallaşdırmasında əsas səhvlər: həddindən artıq yüklənmiş menyu (qruplaşdırmadan 15+ nöqtə), vacib bölmələrin qatlanma xəttinin altında gizlədilməsi, ikonların olmaması (ikonsuz mətn 30% daha yavaş skan edilir), gecikməli animasiya (≤ 200 ms olmalıdır). Ən yaxşı təcrübələr: istifadəçi adı ilə başlıq, hər nöqtədə ikonlar, qruplar arasında ayırıcılar, aktiv bölmənin vurğulanması, açmaq üçün sürüşdürmə jestinin dəstəklənməsi.

• 6+ bölmə — Drawer əsaslandırılmışdır, azdırsa — Bottom Navigation istifadə edin
• İkonlar — hər nöqtə üçün məcburidir, vizual axtarışı sürətləndirir
• Qruplaşdırma — əsas və ikinci dərəcəli nöqtələr arasında ayırıcılar
• Başlıq — fərdiləşdirmə üçün avatar, ad və email (sosial tətbiqlər)
• Sürüşdürmə jesti — açmaq üçün məcburidir, "hamburger" düyməsi ilə təkrarlanır