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 টি ট্যাব — ওভারলোড ছাড়া দ্রুত নির্বাচনের জন্য সর্বোত্তম সংখ্যা
• স্থির ক্রম — ট্যাবগুলি স্থিতিশীল হওয়া উচিত, গতিশীল পুনর্বিন্যাস ছাড়া
• আইকন + লেবেল — বিভাগ বোঝার জন্য উভয় উপাদান আবশ্যক
• সক্রিয় ট্যাব — রঙ, আইকন বা অ্যানিমেশন দ্বারা দৃশ্যত ভিন্ন হওয়া উচিত
• ব্যাজ — বিজ্ঞপ্তির জন্য ব্যবহার করুন, বিভাগ খোলার সময় রিসেট করুন