निचला नेविगेशन
टैब वाला निचला नेविगेशन बनाएँ।
निचला नेविगेशन, 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 पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- NavHost सेट करना
- स्क्रीन के बीच नेविगेशन
- आर्ग्युमेंट भेजना
- निचला नेविगेशन