Drawer — ano ito, DrawerLayout at side menu sa mga aplikasyon

Ano ang Drawer?

Drawer (Navigation Drawer) — isang elemento ng nabigasyon sa anyo ng panel na lumalabas mula sa kaliwang gilid ng screen sa pamamagitan ng swipe gesture o pag-click sa 'hamburger' na icon (tatlong pahalang na linya). Ang Drawer ay naglalaman ng mga link sa nabigasyon, pamagat, at opsyonal na elemento: avatar ng gumagamit, mga counter ng notifikasyon, mga separator. Maaaring takpan ng panel ang nilalaman (Modal) o ilipat ito (Standard).

Ang Material Design 3 (2026) ay tumutukoy sa Navigation Drawer bilang isang component para sa mga app na may 6+ na punto ng nabigasyon. Hindi tulad ng Bottom Navigation, ang Drawer ay hindi sumasakop ng permanenteng lugar sa screen at ipinapakita lamang kapag hiniling ng gumagamit. Nagpapalaya ito ng espasyo para sa nilalaman, ngunit nangangailangan ng karagdagang aksyon upang buksan. Inirerekomenda ng Google ang Drawer para sa mga app na may malalim na hirarkiya ng mga seksyon.

Ang pananaliksik ng UX Planet (2025) ay nagpakita: Ang Drawer ay angkop para sa mga app na may 5–15 seksyon, ngunit ang oras ng nabigasyon ay 40% mas mataas kaysa sa Bottom Navigation. Ang mga gumagamit ay lumalaktaw sa mga item ng menu na nasa ibaba ng fold ng screen (scroll). Kaya't ang mahahalagang seksyon ay dapat nasa itaas na bahagi ng Drawer, at ang hindi gaanong mahalaga (Tungkol sa app, Mga Setting) — sa ibabang bahagi, na pinaghihiwalay ng isang separator.

Mga Uri ng Drawer: Modal at Standard

Modal Drawer — lumalabas sa ibabaw ng nilalaman, pinadidilim ang background. Ginagamit sa mga mobile device kung saan limitado ang lapad ng screen. Pagkatapos pumili ng item, awtomatikong nagsasara ang Drawer. Standard Drawer (Permanent) — isang nakapirming panel, palaging nakikita, na naglilipat ng nilalaman. Ginagamit sa mga tablet at desktop na may lapad ng screen mula 900 dp. Tinutukoy din ng Material 3 ang Rail Drawer — isang compact na bersyon para sa mga tablet na nagpapakita lamang ng mga icon.

DrawerLayout sa Android

DrawerLayout — ang karaniwang ViewGroup sa Android na nagpapatupad ng sliding side menu. Ang DrawerLayout ay naglalaman ng dalawang anak na elemento: una — pangunahing nilalaman (FrameLayout na may NavHostFragment), pangalawa — NavigationView na may menu. Pinangangasiwaan ng DrawerLayout ang mga swipe gesture at programmatic na pagbukas/pagsara sa pamamagitan ng ActionBarDrawerToggle.

// Aktibidad na may DrawerLayout at 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)

        // Pag-uugnay ng Drawer sa 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"
//   ...>
//   <!-- Pangunahing nilalaman -->
//   <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 — ang component ng Material Design para sa nilalaman ng Drawer. Sinusuportahan nito ang header (headerLayout), mga item ng menu (menu), mga subtitle, checkbox, at flag. Ang katangiang app:menu ay tumuturo sa isang XML-menu na may mga punto ng nabigasyon. Awtomatikong itinatampok ng NavigationUI ang aktibong item at nisi-sync ang estado sa NavController.

Side Menu sa iOS

Walang built-in na 'Drawer' component ang iOS — hindi inirerekomenda ng Apple ang side menu para sa iPhone (HIG, 2026). Gayunpaman, para sa iPad ginagamit ang UISplitViewController na may primary at secondary na panel. Para sa iPhone, ang side menu ay ipinapatupad sa pamamagitan ng third-party na library (SideMenu, SwiftUI-side-menu) o custom na solusyon na may offset ng nilalaman. Sa SwiftUI, ang side menu ay ginagawa sa pamamagitan ng ZStack na may offset animation.

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

// Paggamit
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()
        }
    }
}

Para sa production projects sa iOS, madalas ginagamit ang library na SideMenu (GitHub, 8k+ bituin). Nagbibigay ito ng handa nang UIViewController na may suporta para sa gestures, background blur, custom na lapad, at animation. Sinusuportahan ng SideMenu ang kaliwa at kanang menu, maraming antas, at integrasyon sa UIKit sa pamamagitan ng UINavigationController. Alternatibo — UISplitViewController sa iPad (sistemiko, walang custom na animation).

Pag-customize ng Drawer: pamagat, icon, seksyon

Drawer ay nagpapahintulot ng malawak na pag-customize. Sa Android, sinusuportahan ng NavigationView ang headerLayout — isang custom na layout na inilalagay sa itaas ng mga item ng menu. Dito inilalagay ang avatar, pangalan ng gumagamit, email, at cover. Ang mga item ng menu ay pinag-grupo sa pamamagitan ng <menu> na may mga subtitle, separator, at flag. Sa iOS, ang pag-customize ng SideMenu ay kinabibilangan ng pagtatakda ng kulay ng background, blur, lapad, at pagbilog ng mga sulok.

// Custom na header para sa 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"

// Pag-configure ng mga item ng menu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Pagdagdag ng badge
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Inirerekomenda ng Material Design ang sumusunod na istruktura ng Drawer: pamagat (pangalan, avatar), pangunahing item ng nabigasyon (5–8), separator, sekundaryong item (Mga Setting, Tulong), footer (Tungkol sa app, bersyon). Sa Material 3, sinusuportahan din ng NavigationView ang custom na pagtatampok ng aktibong item sa pamamagitan ng itemShape at itemBackground.

Kailan gagamitin ang Drawer: rekomendasyon sa UX

Drawer ay epektibo para sa mga app na may 6+ seksyon, setting, at pahina ng tulong. Hindi ito angkop para sa mga app kung saan kritikal ang mabilis na pag-access sa mga seksyon — sa ganitong mga kaso, mas mahusay ang Bottom Navigation. Inirerekomenda ng Material Design na pagsamahin ang Drawer sa Bottom Navigation: pangunahing nabigasyon — Bottom (3–5 tab), karagdagang — Drawer (mga setting, tulong, tungkol sa app).

Mga pangunahing pagkakamali sa pagpapatupad ng Drawer: sobrang dami ng menu (15+ item na walang pagpapangkat), pagtatago ng mahahalagang seksyon sa ibaba ng fold, kawalan ng mga icon (teksto na walang icon ay 30% mas mabagal i-scan), animation na may pagkaantala (dapat ≤ 200 ms). Pinakamahusay na kasanayan: pamagat na may pangalan ng gumagamit, icon sa bawat item, separator sa pagitan ng mga grupo, pagtatampok ng aktibong seksyon, suporta para sa swipe gesture sa pagbukas.

• 6+ seksyon — Ang Drawer ay makatwiran, mas kaunti — gamitin ang Bottom Navigation
• Mga icon — sapilitan para sa bawat item, pinapabilis ang biswal na paghahanap
• Pagpapangkat — mga separator sa pagitan ng pangunahin at sekundaryong item
• Pamagat — avatar, pangalan at email para sa personalisasyon (mga social app)
• Swipe gesture — sapilitan para sa pagbukas, dinoble ng 'hamburger' na buton