नेविगेशन पैनल

नेविगेशन पैनल कॉम्पोनेंट, स्लाइड-इन मेन्यू होता है. इसकी मदद से, उपयोगकर्ता आपके ऐप्लिकेशन के अलग-अलग सेक्शन पर नेविगेट कर सकते हैं. उपयोगकर्ता, साइड से स्वाइप करके या मेन्यू आइकॉन पर टैप करके इसे चालू कर सकते हैं.

नेविगेशन ड्रॉअर को लागू करने के लिए, इस्तेमाल के इन तीन उदाहरणों पर विचार करें:

• कॉन्टेंट को व्यवस्थित करना: उपयोगकर्ताओं को अलग-अलग कैटगरी के बीच स्विच करने की सुविधा दें. जैसे, समाचार या ब्लॉगिंग ऐप्लिकेशन में.
• खाता मैनेजमेंट: उपयोगकर्ता खातों वाले ऐप्लिकेशन में, खाता सेटिंग और प्रोफ़ाइल सेक्शन के लिए तुरंत लिंक उपलब्ध कराएं.
• सुविधा ढूंढना: एक ही मेन्यू में कई सुविधाओं और सेटिंग को व्यवस्थित करें, ताकि उपयोगकर्ता आसानी से उन्हें ढूंढ सकें और जटिल ऐप्लिकेशन में उन्हें ऐक्सेस कर सकें.

Material Design में, दो तरह के नेविगेशन ड्रॉअर होते हैं:

• स्टैंडर्ड: स्क्रीन पर दूसरे कॉन्टेंट के साथ जगह शेयर करें.
• मोडल: यह स्क्रीन पर मौजूद अन्य कॉन्टेंट के ऊपर दिखता है.

पहली इमेज. नेविगेशन ड्रॉअर का उदाहरण.

उदाहरण

नेविगेशन ड्रॉअर लागू करने के लिए, ModalNavigationDrawer कॉम्पोनेंट का इस्तेमाल किया जा सकता है.

ModalDrawerSheet देने के लिए drawerContent स्लॉट का इस्तेमाल करें और ड्रॉर का कॉन्टेंट दें, जैसा कि इस उदाहरण में दिखाया गया है:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer, कई अन्य ड्रॉअर पैरामीटर स्वीकार करता है. उदाहरण के लिए, gesturesEnabled पैरामीटर की मदद से, यह टॉगल किया जा सकता है कि ड्रॉअर को खींचकर छोड़ने पर क्या वह खुलेगा या नहीं. इसके लिए, नीचे दिए गए उदाहरण का पालन करें:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

व्यवहार कंट्रोल करना

ड्रॉवर के खुलने और बंद होने का तरीका कंट्रोल करने के लिए, DrawerState का इस्तेमाल करें. आपको drawerState पैरामीटर का इस्तेमाल करके, DrawerState को ModalNavigationDrawer पर पास करना चाहिए.

DrawerState, open और close फ़ंक्शन के साथ-साथ, मौजूदा ड्रॉअर की स्थिति से जुड़ी प्रॉपर्टी का ऐक्सेस भी देता है. निलंबित करने वाले इन फ़ंक्शन के लिए, CoroutineScope की ज़रूरत होती है. इसे rememberCoroutineScope का इस्तेमाल करके इंस्टैंशिएट किया जा सकता है. यूज़र इंटरफ़ेस (यूआई) इवेंट के जवाब में, निलंबित करने वाले फ़ंक्शन भी कॉल किए जा सकते हैं.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt

नेविगेशन ड्रॉअर में ग्रुप बनाना

नीचे दिए गए स्निपेट में, सेक्शन और डिवाइडर के साथ ज़्यादा जानकारी वाला नेविगेशन ड्रॉअर बनाने का तरीका बताया गया है:

@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()

                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )

                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))

                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

कोड के बारे में अहम जानकारी

• drawerContent में Column को पॉप्युलेट करता है. इसमें सेक्शन, डिवाइडर, और नेविगेशन आइटम शामिल होते हैं.
• ModalDrawerSheet, ड्रॉअर के लिए मटीरियल डिज़ाइन स्टाइल उपलब्ध कराता है.
• HorizontalDivider, ड्रॉअर में सेक्शन को अलग करता है.
• ModalNavigationDrawer ड्रॉअर बनाता है.
• drawerContent, ड्रॉअर के कॉन्टेंट के बारे में बताता है.
• ModalDrawerSheet में, Column ड्रॉअर एलिमेंट को वर्टिकल तौर पर व्यवस्थित करता है.
• NavigationDrawerItem कंपोजेबल, ड्रॉअर में अलग-अलग आइटम दिखाते हैं.
• Scaffold, स्क्रीन का बुनियादी स्ट्रक्चर उपलब्ध कराता है. इसमें TopAppBar भी शामिल है.
• TopAppBar में मौजूद navigationIcon, ड्रॉर के खुले और बंद होने की स्थिति को कंट्रोल करता है.

नतीजा

इस इमेज में दिखाया गया है कि ड्रॉअर खोलने पर, सेक्शन और आइटम कैसे दिखते हैं:

दूसरी इमेज. नेविगेशन पैनल, जिसमें दो नेस्ट किए गए ग्रुप हैं.

अन्य संसाधन

• Material Design: नेविगेशन पैनल