नेविगेशन रेल

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

• टॉप-लेवल डेस्टिनेशन, जिन्हें ऐप्लिकेशन में कहीं से भी ऐक्सेस किया जा सकता है
• तीन से सात मुख्य डेस्टिनेशन
• टैबलेट या डेस्कटॉप लेआउट

पहली इमेज. चार डेस्टिनेशन और फ़्लोट करने वाले कार्रवाई बटन वाली नेविगेशन रेल.

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

एपीआई सरफ़ेस

अपने ऐप्लिकेशन में रेल लागू करने के लिए, NavigationRailItem के साथ NavigationRail कंपोज़ेबल का इस्तेमाल करें. NavigationRailItem, रेल कॉलम में मौजूद एक रेल आइटम को दिखाता है.

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

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

उदाहरण: रेल-आधारित नेविगेशन

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

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

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

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

खास बातें

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

नतीजा

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

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

अन्य संसाधन

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