Android Academy · पाठ

निचला नेविगेशन

टैब वाला निचला नेविगेशन बनाएँ।

पाठ 4, कुल 4 में से13 चरण

निचला नेविगेशन, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

निचले नेविगेशन बार

कई ऐप अपने मुख्य अनुभागों को निचले नेविगेशन बार में रखते हैं। Compose इसके लिए NavigationBar और NavigationBarItem उपलब्ध कराता है।

NavigationBar

NavigationBar एक कंटेनर है, जिसे आमतौर पर Scaffold के bottomBar स्लॉट में रखा जाता है। इसमें कई NavigationBarItem होते हैं।

NavigationBar {
    // items go here
}

NavigationBarItem

हर टैब एक NavigationBarItem होता है, जिसमें icon, वैकल्पिक label, selected फ़्लैग और onClick होता है।

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

टैब का मॉडल बनाना

अपने टैब को डेटा के रूप में परिभाषित करें, ताकि आप उन पर लूप चला सकें। मार्ग, लेबल और आइकन वाली एक सरल डेटा क्लास अच्छी तरह काम करती है।

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

वर्तमान मार्ग को ट्रैक करना

सक्रिय टैब को उभारने के लिए आपको वर्तमान मार्ग चाहिए। इसे controller की वर्तमान बैक स्टैक एंट्री से पढ़ें।

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

चयनित को चिह्नित करना

हर टैब के मार्ग की तुलना currentRoute से करके selected फ़्लैग सेट करें, ताकि बार सही आइटम को उभारे।

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

बैक स्टैक के बढ़ते जाने से बचना

टैब को बार-बार टैप करने पर गंतव्य लगातार स्टैक पर नहीं जुड़ने चाहिए। टैब के बीच नेविगेट करते समय शुरुआती गंतव्य पर popUpTo के साथ launchSingleTop का उपयोग करें।

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState और restoreState हर टैब की स्क्रॉल स्थिति और अवस्था को तब बनाए रखते हैं, जब आप उससे दूर जाकर वापस आते हैं — निचले टैब के लिए यही अपेक्षित व्यवहार है।

Scaffold के साथ एकीकरण

सब कुछ एक Scaffold में रखें। बार को bottomBar में और NavHost को सामग्री में रखें। दी गई padding का उपयोग करें, ताकि सामग्री बार के पीछे छिपे नहीं।

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

आइटम पर लूप चलाना

अपने टैब की सूची पर लूप चलाकर बार बनाएँ। इससे कोड छोटा और एकसमान रहता है।

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

सब कुछ एक साथ

controller से जुड़ा हुआ पूरा निचला बार, जो सक्रिय टैब को उभारता है।

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

त्वरित जाँच

आप कैसे जानेंगे कि किस NavigationBarItem को selected के रूप में चिह्नित करना है?

पुनरावलोकन

निचला नेविगेशन:

  • NavigationBar में NavigationBarItem होते हैं।
  • currentBackStackEntryAsState() के माध्यम से सक्रिय टैब को ट्रैक करें और selected सेट करें।
  • टैब बदलने की प्रक्रिया को व्यवस्थित रखने के लिए popUpTo + launchSingleTop + saveState/restoreState का उपयोग करें।
  • इसे Scaffold के bottomBar में रखें।
शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
36
पाठ
152

अक्सर पूछे जाने वाले प्रश्न

क्या “निचला नेविगेशन” पाठ निःशुल्क है?

हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “निचला नेविगेशन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“निचला नेविगेशन” में मैं क्या सीखूँगा?

टैब वाला निचला नेविगेशन बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Android Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Android Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Android Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“निचला नेविगेशन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Android Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Android Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. NavHost सेट करना
  2. स्क्रीन के बीच नेविगेशन
  3. आर्ग्युमेंट भेजना
  4. निचला नेविगेशन
← Android Academy पर वापस जाएँ