Tab Bar — یہ کیا ہے، موبائل ایپلیکیشنز میں ٹیب پینل

Tab Bar کیا ہے؟

Tab Bar (ٹیب بار) ایک گرافیکل انٹرفیس عنصر ہے جو موبائل ایپلیکیشن کی اسکرین کے نیچے واقع ہوتا ہے۔ یہ ایپ کے 3–5 اہم حصوں تک فوری رسائی فراہم کرتا ہے۔ ہر حصہ ایک آئیکن اور ٹیکسٹ لیبل سے ظاہر ہوتا ہے۔ صارف متعلقہ حصے پر جانے کے لیے ٹیب کو دباتا ہے۔ Tab Bar ہر حصے کے اندر تمام اسکرینز پر نظر آتا رہتا ہے، ایک مستقل داخلے کا مقام فراہم کرتا ہے۔

Apple مساوی اہمیت کے حصوں کے لیے Tab Bar استعمال کرنے کی سفارش کرتا ہے۔ Human Interface Guidelines (2026) بتاتی ہیں: "Tab Bar 3–5 ٹیبز دکھاتا ہے۔ اگر مزید کی ضرورت ہو تو، آخری ٹیب باقی پر مشتمل 'مزید' آئٹم بن جاتا ہے۔" Google کا Material Design (2026) اسی مقصد کے لیے Bottom Navigation کی سفارش کرتا ہے — 3–5 آئٹمز، فعال ٹیب رنگ اور اینیمیشن سے نمایاں ہوتا ہے۔

اوپر والے ٹیب بار کے برعکس، نیچے کا پینل ایک ہاتھ سے استعمال کرنے میں زیادہ آسان ہے — انگوٹھا قدرتی طور پر اسکرین کے نیچے تک پہنچتا ہے۔ Nielsen Norman Group (2025) کے ایک مطالعے سے پتہ چلا کہ نیچے کی نیویگیشن 6 انچ یا اس سے زیادہ اسکرین والے اسمارٹ فونز پر اوپر کی نیویگیشن کے مقابلے میں کام مکمل کرنے کا وقت 22% کم کرتی ہے۔

iOS میں UITabBarController

UITabBarController ٹیبز کے ذریعے نیویگیشن کو منظم کرنے کے لیے ایک بلٹ ان iOS کنٹرولر ہے۔ ہر ٹیب اسکرینز کے اپنے سیٹ کا انتظام کرتا ہے، جو عام طور پر UINavigationController میں منظم ہوتا ہے۔ UITabBarController خود بخود اسکرین کے نیچے سسٹم کی نیم شفاف پشت پناہی اور سوئچنگ اینیمیشن کے ساتھ Tab Bar بناتا ہے۔

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "ہوم",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "تلاش",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "پروفائل",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

مثال میں ہر ٹیب میں UINavigationController ہے، جو حصے کے اندر اسٹیک نیویگیشن کی اجازت دیتا ہے۔ tabBarItem آئیکن، عنوان اور بیج ترتیب دیتا ہے۔ سسٹم خود بخود آئیکنز کے لیے SF Symbols کا انداز لاگو کرتا ہے — ڈائنامک ٹائپ اور ملٹی کلر سپورٹ کے ساتھ معیاری Apple علامات۔

Android میں BottomNavigationView

BottomNavigationView Material Design Library کا ایک Android جزو ہے جو نیچے کے نیویگیشن پینل کو لاگو کرتا ہے۔ Android 13+ میں NavigationBarView استعمال ہوتا ہے — اس کا جانشین بہتر اینیمیشن اور انکولی رویے کے ساتھ۔ BottomNavigationView Material Design 3 (Material You) تصریح کی پیروی کرتا ہے اور ایپ تھیمنگ، ڈائنامک رنگ اور سوئچنگ اینیمیشنز کو سپورٹ کرتا ہے۔

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // BottomNavigation کو NavController سے منسلک کرنا
        navView.setupWithNavController(navController)

        // اطلاعات کے ٹیب پر بیج ترتیب دینا
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

BottomNavigationView جزو تین اندازوں کے ساتھ Material Design 3 کو سپورٹ کرتا ہے: default (لیبل + آئیکن)، labeled (بڑا لیبل) اور unlabeled (صرف آئیکن)۔ setupWithNavController طریقہ پینل کو Navigation Component سے جوڑتا ہے، اسکرین تبدیل ہونے پر خود بخود فعال ٹیب کو اپ ڈیٹ کرتا ہے۔ بیجز getOrCreateBadge کے ذریعے بنائے جاتے ہیں اور عددی اور نقطہ اشارے کو سپورٹ کرتے ہیں۔

Tab Bar پر بیجز اور اشارے

بیجز ٹیب آئیکنز پر عددی یا نقطہ اشارے ہیں، جو اطلاعات، نئے پیغامات یا کاموں کی تعداد ظاہر کرتے ہیں۔ iOS پر، بیج UITabBarItem پر badgeValue پراپرٹی کے ذریعے ترتیب دیا جاتا ہے۔ Android پر، بیجز BadgeDrawable (Material 3) یا NavigationBarView میں getOrCreateBadge کے ذریعے منظم کیے جاتے ہیں۔

بیجز ایک طاقتور مشغولیت کا آلہ ہیں: Localytics (2025) کی تحقیق سے پتہ چلا کہ بیجز والی ایپس میں 7ویں دن 18% زیادہ برقراری ہوتی ہے۔ تاہم، بیجز کا ضرورت سے زیادہ استعمال (ایک ساتھ 3 سے زیادہ) CTR کو 12% کم کرتا ہے۔ Apple اور Google صرف متعلقہ اطلاعات کے لیے بیجز دکھانے اور حصہ کھولنے پر انہیں دوبارہ ترتیب دینے کی سفارش کرتے ہیں۔

Tab Bar تخصیص: آئیکنز، رنگ، اینیمیشنز

دونوں پلیٹ فارمز Tab Bar کے لیے وسیع تخصیص کے اختیارات فراہم کرتے ہیں۔ iOS پر، آپ پس منظر کا رنگ، فعال ٹیب کا ٹنٹ رنگ، لیبل فونٹ تبدیل کر سکتے ہیں اور SF Symbols یا حسب ضرورت اثاثوں کے ذریعے حسب ضرورت آئیکنز شامل کر سکتے ہیں۔ Android پر، تخصیص میں Material 3 اسٹائلز، سوئچنگ اینیمیشن، ریپل اثر اور وال پیپر پر مبنی ڈائنامک رنگ شامل ہیں۔

// iOS میں Tab Bar تخصیص
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

Android پر، BottomNavigationView کی تخصیص XML خصوصیات یا پروگرام کے ذریعے کی جاتی ہے۔ Material 3 ڈائنامک رنگوں کا تصور متعارف کراتا ہے: رنگ پیلیٹ صارف کے وال پیپر سے تیار ہوتا ہے اور خود بخود اجزاء پر لاگو ہوتا ہے۔ ڈویلپر تھیم کے ذریعے رنگوں کو اوور رائڈ کر سکتا ہے، حسب ضرورت اشارہ اینیمیشن ترتیب دے سکتا ہے اور ریپل اثر تشکیل دے سکتا ہے۔

// Android میں BottomNavigationView تخصیص
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// XML میں: app:menu="@menu/bottom_nav_menu"
// XML میں: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

نیچے کی نیویگیشن کے بہترین طریقے

Tab Bar ڈیزائن کرتے وقت، پلیٹ فارم کی سفارشات اور استعمال کی تحقیق پر عمل کرنا ضروری ہے۔ Apple HIG: 5 سے زیادہ ٹیبز نہیں، مختصر متن، معنی خیز آئیکنز۔ Material Design: 3–5 آئٹمز، فعال آئٹم نمایاں، بیج کاؤنٹر 99 سے زیادہ نہیں۔ NN Group (2025): نیچے کی نیویگیشن حصے کی تمام اسکرینز پر نظر آتی رہنی چاہیے، ورنہ صارف سیاق و سباق کھو دیتا ہے۔

عام غلطیاں: 6+ ٹیبز ('مزید' استعمال کرنے پر مجبور کرتا ہے — دریافت پذیری کم کرتا ہے)، نیویگیشن کے دوران ٹیبز کی ترتیب تبدیل کرنا (صارف کو الجھاتا ہے)، اندرونی اسکرینوں پر Tab Bar چھپانا (نیویگیشن اینکر کا نقصان)۔ بہترین طریقوں میں ایک مقررہ ترتیب، مستقل آئیکنز اور ٹیکسٹ لیبلز، صرف صارف کے اعمال کے لیے بیجز (مارکیٹنگ کے لیے نہیں) شامل ہیں۔

• 3–5 ٹیبز — بغیر بوجھ کے فوری انتخاب کے لیے بہترین تعداد
• مقررہ ترتیب — ٹیبز متحرک تبدیلی کے بغیر مستحکم ہونے چاہئیں
• آئیکن + لیبل — حصہ سمجھنے کے لیے دونوں عناصر ضروری ہیں
• فعال ٹیب — رنگ، آئیکن یا اینیمیشن سے بصری طور پر مختلف ہونا چاہیے
• بیجز — اطلاعات کے لیے استعمال کریں، حصہ کھولنے پر دوبارہ ترتیب دیں