नेविगेशन बार

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

• एक जैसी अहमियत वाले तीन से पांच डेस्टिनेशन
• कॉम्पैक्ट विंडो साइज़
• ऐप्लिकेशन की सभी स्क्रीन पर एक जैसे डेस्टिनेशन

पहली इमेज. चार डेस्टिनेशन वाला नेविगेशन बार.

इस पेज पर, अपने ऐप्लिकेशन में नेविगेशन बार दिखाने का तरीका बताया गया है. इसमें, मिलती-जुलती स्क्रीन और बुनियादी नेविगेशन की जानकारी भी शामिल है.

एपीआई सरफ़ेस

डेस्टिनेशन स्विच करने का लॉजिक लागू करने के लिए, NavigationBar और NavigationBarItem कंपोज़ेबल का इस्तेमाल करें. हर NavigationBarItem एक डेस्टिनेशन को दिखाता है.

NavigationBarItem में ये मुख्य पैरामीटर शामिल हैं:

• selected: इससे यह तय होता है कि मौजूदा आइटम को विज़ुअल तौर पर हाइलाइट किया गया है या नहीं.
• onClick(): इससे यह तय होता है कि जब उपयोगकर्ता आइटम पर क्लिक करे, तो क्या कार्रवाई की जाए. नेविगेशन इवेंट को मैनेज करने, चुने गए आइटम की स्थिति को अपडेट करने या उससे जुड़े कॉन्टेंट को लोड करने का लॉजिक यहां मौजूद होता है.
• label: आइटम में टेक्स्ट दिखाता है. ज़रूरी नहीं.
• icon: आइटम में एक आइकॉन दिखाता है. ज़रूरी नहीं.

उदाहरण: पेज या स्क्रीन के नीचे मौजूद नेविगेशन बार

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

ध्यान दें: पूरे सोर्स कोड में वह कोड शामिल होता है जो नीचे दिए गए उदाहरण के लिए, नेविगेशन का बुनियादी स्ट्रक्चर बनाता है.

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

खास बातें

• NavigationBar, आइटम का कलेक्शन दिखाता है. इसमें हर आइटम, Destination से जुड़ा होता है.
• val navController = rememberNavController(), NavHostController का एक इंस्टेंस बनाता है और उसे याद रखता है. यह इंस्टेंस, NavHost में नेविगेशन को मैनेज करता है.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, चुने गए आइटम की स्थिति को मैनेज करता है.
  • startDestination.ordinal, Destination.SONGS enum एंट्री का न्यूमेरिक इंडेक्स (पोज़िशन) दिखाता है.
• जब किसी आइटम पर क्लिक किया जाता है, तो उससे जुड़ी स्क्रीन पर जाने के लिए navController.navigate(route = destination.route) को कॉल किया जाता है.
• NavigationBarItem का onClick लैम्ब्डा, selectedDestination स्टेट को अपडेट करता है, ताकि क्लिक किए गए आइटम को विज़ुअल तौर पर हाइलाइट किया जा सके.
• नेविगेशन लॉजिक, AppNavHost कंपोज़ेबल को कॉल करता है. साथ ही, चुनी गई स्क्रीन का असल कॉन्टेंट दिखाने के लिए, navController और startDestination को पास करता है.

नतीजा

यहां दी गई इमेज में, पिछले स्निपेट से मिलने वाला नेविगेशन बार दिखाया गया है:

दूसरी इमेज. एक नेविगेशन बार, जिसमें तीन डेस्टिनेशन और उनसे जुड़े आइकॉन मौजूद हैं: गाने, एल्बम, और प्लेलिस्ट.

अन्य संसाधन

• Material 3 - नेविगेशन बार
• Compose के साथ नेविगेशन