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

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

नेविगेशन पैनल को लागू करने के लिए, इन तीन स्थितियों पर ध्यान दें:

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

मटीरियल डिज़ाइन में, दो तरह के नेविगेशन पैनल होते हैं:

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

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

उदाहरण

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

drawerContent स्लॉट का इस्तेमाल करके, ModalDrawerSheet उपलब्ध कराएं. साथ ही, ड्रॉअर का कॉन्टेंट उपलब्ध कराएं, जैसा कि इस उदाहरण में दिखाया गया है:

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 पैरामीटर का इस्तेमाल करके, ModalNavigationDrawer को DrawerState पास करना चाहिए.

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(painter = rememberVectorPainter(AppIcons.Settings), contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(painter = rememberVectorPainter(AppIcons.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(painter = rememberVectorPainter(AppIcons.Menu), contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

कोड के बारे में अहम बातें

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

नतीजा

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

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

अन्य संसाधन

• मटीरियल डिज़ाइन: नेविगेशन पैनल