टैब

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

  • प्राइमरी टैब: इन्हें टॉप ऐप्लिकेशन बार के नीचे, कॉन्टेंट पैन के सबसे ऊपर रखा जाता है. इनसे मुख्य कॉन्टेंट डेस्टिनेशन दिखते हैं. इनका इस्तेमाल तब किया जाना चाहिए, जब सिर्फ़ एक सेट टैब की ज़रूरत हो.
  • सेकंडरी टैब: इनका इस्तेमाल कॉन्टेंट वाले सेक्शन में किया जाता है, ताकि मिलते-जुलते कॉन्टेंट को अलग-अलग किया जा सके और उन्हें क्रम से लगाया जा सके. इनकी ज़रूरत तब पड़ती है, जब किसी स्क्रीन पर एक से ज़्यादा लेवल के टैब की ज़रूरत होती है.
इसमें तीन मुख्य टैब दिखाए गए हैं. इनके साथ इनसे जुड़े आइकॉन भी दिखाए गए हैं (फ़्लाइट, यात्राएं, और एक्सप्लोर करें). इसमें दो सेकंडरी टैब (खास जानकारी, स्पेसिफ़िकेशन) दिखाए गए हैं. इनके साथ आइकॉन नहीं हैं.
पहली इमेज. प्राइमरी टैब (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 enum एंट्री का संख्यात्मक इंडेक्स (पोजीशन) दिखाता है.
  • किसी टैब पर क्लिक करने पर, onClick lambda calls navController.navigate(route = destination.route) का इस्तेमाल करके, उससे जुड़ी स्क्रीन पर जाया जाता है.
  • Tab का onClick, selectedDestination के स्टेटस को अपडेट करता है, ताकि क्लिक किए गए टैब को हाइलाइट किया जा सके.
  • यह AppNavHost कंपोज़ेबल को कॉल करता है. साथ ही, चुनी गई स्क्रीन का असली कॉन्टेंट दिखाने के लिए, navController और startDestination को पास करता है.

नतीजा

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

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

अन्य संसाधन