टैब

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

  • प्राइमरी टैब: इन्हें कॉन्टेंट पैनल में सबसे ऊपर, ऐप्लिकेशन बार के नीचे रखा जाता है. इनमें कॉन्टेंट के मुख्य डेस्टिनेशन दिखते हैं. इनका इस्तेमाल तब किया जाना चाहिए, जब टैब के सिर्फ़ एक सेट की ज़रूरत हो.
  • सेकंडरी टैब: इनका इस्तेमाल कॉन्टेंट एरिया में किया जाता है, ताकि मिलते-जुलते कॉन्टेंट को अलग किया जा सके और हैरारकी बनाई जा सके. इनकी ज़रूरत तब होती है, जब किसी स्क्रीन पर एक से ज़्यादा लेवल के टैब की ज़रूरत होती है.
तीन मुख्य टैब, उनसे जुड़े आइकॉन के साथ दिखाए गए हैं (फ़्लाइट, यात्राएं, और एक्सप्लोर करें). दो सेकंडरी टैब (खास जानकारी, खास बातें) दिखाए गए हैं. इनमें कोई आइकॉन नहीं है.
पहली इमेज. प्राइमरी टैब (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)
    }
}

खास बातें

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

नतीजा

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

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

अन्य संसाधन