नेविगेशन बार

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

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

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

एपीआई का प्लैटफ़ॉर्म

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

नतीजा

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

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

अन्य संसाधन