BottomNavigation: ساخت اور Jetpack Compose میں ترتیب

Jetpack Compose میں BottomNavigation کیا ہے؟

BottomNavigation ایک Material Design جزو ہے جو تین سے پانچ مینو آئٹمز دکھانے والے نیچے والے نیویگیشن بار کے لیے ہے۔ Jetpack Compose میں، اسے BottomNavigation (Material2) اور NavigationBar (Material3) کمپوزیبل فنکشنز کے ذریعے لاگو کیا جاتا ہے۔ بار اسکرین کے نیچے رکھا جاتا ہے اور ایپلیکیشن کے اہم حصوں تک فوری رسائی فراہم کرتا ہے۔

BottomNavigation کا بنیادی مقصد اسکرین لیول کی منزلوں کے درمیان بنیادی نیویگیشن کو منظم کرنا ہے۔ ہر پینل آئٹم ایک علیحدہ اسکرین (ہوم، سرچ، پروفائل) کی نمائندگی کرتا ہے۔ ٹیپ کرنے سے اسکرین کے مرکزی حصے میں مواد تبدیل ہو جاتا ہے۔ BottomNavigation نیسٹڈ نیویگیشن کے لیے نہیں ہے — اس کے لیے اوپر والے ٹیبز استعمال کیے جاتے ہیں۔

Material Design گائیڈلائنز (2025) کے مطابق، نیچے والے بار میں صرف وہی حصے شامل ہونے چاہئیں جو ایپلیکیشن کے کسی بھی مقام سے قابل رسائی ہوں۔ چائلڈ اسکرینوں پر بار چھپانا (مثلاً، تفصیل والا صفحہ کھولتے وقت) ایک معیاری عمل ہے۔ Compose میں، BottomNavigation کی مرئیت Scaffold حالت یا موجودہ NavController روٹ پر مبنی مشروط رینڈرنگ کے ذریعے کنٹرول کی جاتی ہے۔

Material3 میں، پرانی BottomNavigation کے بجائے NavigationBar استعمال کرنے کی سفارش کی جاتی ہے۔ NavigationBar میں ڈائنامک کلر، WindowInsets سپورٹ اور بہتر پریس اینیمیشن شامل ہے۔ Google کے مطابق، NavigationBar آگے دیکھنے والا جزو ہے، جبکہ M2 کا BottomNavigation صرف پسماندہ مطابقت کے لیے باقی ہے۔

NavigationBar عناصر: آئیکن، لیبل اور بیج

ہر NavigationBar آئٹم NavigationBarItem کمپوزیبل کے ذریعے لاگو کیا جاتا ہے۔ پیرامیٹرز: icon (آئیکن)، label (ٹیکسٹ لیبل)، selected (انتخاب کی حالت) اور onClick (کال بیک)۔ NavigationBarItem خود بخود منتخب رنگ (primary) لاگو کرتا ہے اور ایکٹیویشن پر آئیکن سائز تبدیل کرنے کو اینیمیٹ کرتا ہے۔

@Composable
fun BottomNavBar() {
    val items = listOf(
        Screen.Home,
        Screen.Search,
        Screen.Profile
    )
    var selectedItem by remember { mutableIntStateOf(0) }
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(item.icon, contentDescription = item.label) },
                label = { Text(item.label) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

NavigationBarItem کے لیے آئیکنز منتخب حالت کے لیے بھرے ہوئے (Filled) اور غیر منتخب حالت کے لیے خاکہ (Outlined) ہونے چاہئیں۔ Material Icons دونوں سیٹ فراہم کرتا ہے: Icons.Filled.Home اور Icons.Outlined.Home۔ ڈیفالٹ کے طور پر، NavigationBarItem منتخب کے لیے بھرا ہوا ویرینٹ دکھاتا ہے۔ اگر مختلف ڈسپلے کی ضرورت ہو تو، آئیکن کو مشروط طور پر پاس کریں: if (selected) Filled.X else Outlined.X۔

ٹیکسٹ لیبل کی لمبائی 12 حروف (لاطینی) یا 8 حروف (سیریلک) سے زیادہ نہیں ہونی چاہیے۔ لمبے لیبل بیضوی نشان سے کاٹ دیے جاتے ہیں۔ لیبل کے لیے، maxLines = 1 اور ellipsis = TextTruncation.Ellipsis استعمال کریں۔ اگر لیبل ہمیشہ دکھانا ہو تو alwaysShowLabel = true پیرامیٹر ہٹا دیں (ڈیفالٹ true ہے)۔

BottomNavigation کو NavHost سے جوڑنا

براہ راست selectedItem کو اپ ڈیٹ کرنے سے نیویگیشن متحرک نہیں ہوتی — اسکرین تبدیل کرنے کے لیے NavController کے ساتھ انضمام درکار ہے۔ عام پیٹرن: NavigationBarItem میں onClick navController.navigate(route) کو کال کرتا ہے، اور selectedItem موجودہ NavController روٹ سے متعین ہوتا ہے۔

NavController موجودہ بیک اسٹیک کو محفوظ کرتا ہے۔ یہ تعین کرنے کے لیے کہ کون سا پینل آئٹم منتخب ہے، موجودہ روٹ (navController.currentBackStackEntryAsState().value?.destination?.route) کو آئٹم روٹس سے موازنہ کریں۔ اگر روٹ مماثل ہو تو آئٹم منتخب سمجھا جاتا ہے۔ یہ حالت کی نقل کو ختم کرتا ہے۔

@Composable
fun MainScreen(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route
    Scaffold(
        bottomBar = {
            NavigationBar {
                items.forEach { item ->
                    NavigationBarItem(
                        icon = { Icon(item.icon, contentDescription = item.label) },
                        label = { Text(item.label) },
                        selected = currentRoute == item.route,
                        onClick = {
                            navController.navigate(item.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { /* content */ }
}

navigate() میں کلیدی سیٹنگز: popUpTo(startDestination) ٹیبز تبدیل کرتے وقت بیک اسٹیک جمع ہونے سے روکتا ہے، launchSingleTop اسٹیک میں روٹ کی نقل کو روکتا ہے، اور restoreState پہلے وزٹ کیے گئے ٹیب کی حالت بحال کرتا ہے۔ ان پیرامیٹرز کے بغیر، ہر کلک اسٹیک میں ایک نیا اندراج بناتا ہے، جس سے بیک بٹن کا غلط رویہ پیدا ہوتا ہے۔

Material3 میں NavigationBar: ڈائنامک کلر اور موافقت

Material3 (M3) Material2 کے BottomNavigation کے متبادل کے طور پر NavigationBar اور NavigationBarItem فراہم کرتا ہے۔ M3 کے اہم فوائد: ڈائنامک کلر، انکولی اونچائی، پوری چوڑائی کی ripple اینیمیشن اور سسٹم نیویگیشن کے لیے WindowInsets سپورٹ۔

ڈائنامک کلر ڈیوائس وال پیپر (Android 12+) کی بنیاد پر خود بخود NavigationBar رنگ منتخب کرتا ہے۔ فعال آئٹم primary رنگ میں رنگا جاتا ہے، غیر فعال والے onSurfaceVariant میں۔ ڈیفالٹ کے طور پر، NavigationBar Modifier.navigationBarsPadding() کے ذریعے سسٹم نیویگیشن سے اوپر اٹھتا ہے۔ دستی کنٹرول کے لیے، windowInsets پیرامیٹر استعمال کریں۔

M3 میں NavigationBar خود بخود فعال آئٹم کی چوڑائی کو اینیمیٹ کرتا ہے — آئیکن بائیں طرف منتقل ہوتا ہے اور لیبل پھیلتا ہے۔ اینیمیشن 300 ms تک جاری رہتی ہے اور معیاری Compose easing استعمال کرتی ہے۔ اگر یہ رویہ مطلوب نہیں ہے تو، NavigationBarItem میں alwaysShowLabel = true کے ذریعے ہمیشہ لیبل دکھائیں۔

NavigationBar رنگوں کی تخصیص

رنگوں کو اوور رائڈ کرنے کے لیے، colors پیرامیٹر میں NavigationBarColors پاس کریں۔ ڈیفالٹ کے طور پر، NavigationBarDefaults.colors() استعمال ہوتا ہے، لیکن حسب ضرورت اقدار سیٹ کی جا سکتی ہیں: containerColor (بار کا پس منظر)، contentColor (آئیکن کے رنگ)، indicatorColor (فعال آئٹم کا پس منظر)۔ M2 کے برعکس جہاں رنگ BottomNavigationDefaults کے ذریعے سیٹ کیے گئے تھے، M3 ایک متحد NavColors انٹرفیس استعمال کرتا ہے۔

اگر پروجیکٹ M2 (androidx.compose.material) سے BottomNavigation استعمال کرتا ہے، تو Google M3 NavigationBar میں منتقلی کی سفارش کرتا ہے۔ منتقلی میں امپورٹس کو تبدیل کرنا، پیرامیٹرز کو اپ ڈیٹ کرنا اور @OptIn(ExperimentalMaterial3Api::class) شامل کرنا شامل ہے۔ M2 کا BottomNavigation متروک سمجھا جاتا ہے اور نئی خصوصیات حاصل نہیں کرتا۔

منتخب ٹیب کی حالت کا انتظام

NavigationBar کی حالت موجودہ منتخب آئٹم کا انڈیکس محفوظ کرتی ہے۔ سادہ صورتوں میں، remember { mutableIntStateOf(0) } استعمال ہوتا ہے۔ تاہم، پروڈکشن ایپلیکیشنز کے لیے، انڈیکس کو نیویگیشن گراف کے ساتھ ہم آہنگ ہونا چاہیے، مقامی UI حالت نہیں ہونا چاہیے۔

حالت کے انتظام کے اہم طریقے: NavController پر مبنی (تجویز کردہ) اور ViewModel پر مبنی۔ پہلی صورت میں، selectedItem موجودہ NavController روٹ سے شمار کیا جاتا ہے۔ دوسری میں، ViewModel موجودہ اسکرین کو محفوظ کرتا ہے اور NavigationBarItem ViewModel سے StateFlow پڑھتا ہے۔ NavController پر مبنی آسان ہے؛ ViewModel پر مبنی پیچیدہ منطق (تصدیق، A/B ٹیسٹ) کے لیے زیادہ کنٹرول فراہم کرتا ہے۔

saveState اور restoreState استعمال کرتے وقت، NavController ہر ٹیب کے اندر LazyColumn اور دیگر اجزاء کی حالت خود بخود محفوظ اور بحال کرتا ہے۔ یہ اسکرول پوزیشن کو محفوظ کرنے کے لیے ViewModel کی ضرورت کو ختم کرتا ہے۔ تاہم، محفوظ کرنا ان پٹ فیلڈز پر لاگو نہیں ہوتا — انہیں SavedStateHandle یا ViewModel کی ضرورت ہوتی ہے۔

آئٹمز پر نوٹیفکیشن بیجز اور کاؤنٹر

Badge ایک کمپیکٹ نوٹیفکیشن اشارہ ہے جو NavigationBarItem آئیکن پر دکھایا جاتا ہے۔ Material3 میں، بیج BadgedBox کے ذریعے لاگو کیا جاتا ہے، جو آئیکن کو لپیٹتا ہے اور بیج کو اوپری دائیں کونے میں رکھتا ہے۔ بیج میں ایک نمبر (نوٹیفکیشن کی تعداد) یا ایک نقطہ (سادہ موجودگی کا اشارہ) ہو سکتا ہے۔

@Composable
fun HomeItem(unreadCount: Int) {
    NavigationBarItem(
        icon = {
            BadgedBox(badge = {
                if (unreadCount > 0) {
                    Badge { Text(unreadCount.toString()) }
                }
            }) {
                Icon(Icons.Filled.Home, contentDescription = "ہوم")
            }
        },
        label = { Text("Home") },
        selected = false,
        onClick = { }
    )
}

BadgedBox خود بخود Badge کو چائلڈ عنصر کے اوپری دائیں کونے میں رکھتا ہے۔ اگر تعداد 99 سے تجاوز کر جائے تو Badge "99+" دکھاتا ہے۔ صفر پر بیج چھپانے کے لیے، if (count > 0) استعمال کریں۔ Material3 کا Badge ڈیفالٹ طور پر سفید متن کے ساتھ error رنگ (سرخ) رکھتا ہے۔ BadgeDefaults.colors(containerColor, contentColor) کے ذریعے تخصیص کریں۔

Material2 میں، بیج موجود نہیں تھا — اسے Canvas کے ذریعے دستی طور پر کھینچنا یا تیسری پارٹی کی لائبریریاں استعمال کرنی پڑتی تھیں۔ Material3 نے اسے ایک مقامی جزو سے حل کیا۔ Android Developers (2025) کے مطابق، BadgedBox NavigationBar والی 40% ایپس میں استعمال ہوتا ہے، جن میں سے 60% غیر پڑھے گئے پیغامات دکھاتی ہیں۔