टैब

टैब की मदद से, मिलते-जुलते कॉन्टेंट के ग्रुप व्यवस्थित किए जा सकते हैं. टैब दो तरह के होते हैं:

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

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

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

टैब लागू करने के लिए, Tab, PrimaryTabRow, और SecondaryTabRow कॉम्पोज़ेबल का इस्तेमाल करें. Tab कॉम्पोज़ेबल, पंक्ति में मौजूद किसी एक टैब को दिखाता है. आम तौर पर, इसका इस्तेमाल PrimaryTabRow (प्राइमरी इंडिकेटर टैब के लिए) या SecondaryTabRow (सेकंडरी इंडिकेटर टैब के लिए) में किया जाता है.

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

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

उदाहरण: टैब पर आधारित नेविगेशन

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

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

प्रमुख बिंदु

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

नतीजा

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

ऐप्लिकेशन की स्क्रीन पर सबसे ऊपर, तीन टैब हॉरिज़ॉन्टल तौर पर व्यवस्थित किए गए हैं. गाने, एल्बम, और प्लेलिस्ट टैब दिख रहे हैं. गाने टैब को चुना गया है और उसके नीचे अंडरलाइन की गई है.
दूसरी इमेज. तीन टैब—गाने, एल्बम, और प्लेलिस्ट—हॉरिज़ॉन्टल तौर पर व्यवस्थित किए गए हैं.

अन्य संसाधन