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) — ένα σταθερό πλαίσιο, συνεχώς ορατό, που μετατοπίζει το περιεχόμενο. Χρησιμοποιείται σε tablet και επιτραπέζιους υπολογιστές με πλάτος οθόνης από 900 dp. Το Material 3 ορίζει επίσης το Rail Drawer — μια συμπαγή έκδοση για tablet που εμφανίζει μόνο εικονίδια.

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) ή προσαρμοσμένων λύσεων με μετατόπιση περιεχομένου. Στο 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 — μια προσαρμοσμένη διάταξη που τοποθετείται πάνω από τα σημεία μενού. Σε αυτήν τοποθετούνται άβαταρ, όνομα χρήστη, email και εξώφυλλο. Τα σημεία μενού ομαδοποιούνται μέσω <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
• Εικονίδια — υποχρεωτικά για κάθε σημείο, επιταχύνουν την οπτική αναζήτηση
• Ομαδοποίηση — διαχωριστικά μεταξύ κύριων και δευτερευόντων σημείων
• Τίτλος — άβαταρ, όνομα και email για εξατομίκευση (κοινωνικές εφαρμογές)
• Χειρονομία σάρωσης — υποχρεωτική για άνοιγμα, αντιγράφεται από το κουμπί «χάμπουργκερ»