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 टैब — बिना अधिभार के त्वरित चयन के लिए इष्टतम संख्या
• निश्चित क्रम — टैब स्थिर होने चाहिए, गतिशील पुनर्क्रमण के बिना
• आइकन + लेबल — अनुभाग को समझने के लिए दोनों तत्व आवश्यक हैं
• सक्रिय टैब — रंग, आइकन या एनिमेशन द्वारा दृश्य रूप से भिन्न होना चाहिए
• बैज — सूचनाओं के लिए उपयोग करें, अनुभाग खोलने पर रीसेट करें