Tab Bar — bu nima, mobil ilovalarda tab paneli

Tab Bar nima?

Tab Bar (tab paneli) — mobil ilova ekranining pastki qismida joylashgan grafik interfeys elementi. Ilovaning 3–5 asosiy bo'limiga tezkor kirishni ta'minlaydi. Har bir bo'lim ikonka va matn yorlig'i bilan ifodalanadi. Foydalanuvchi tegishli bo'limga o'tish uchun tabni bosadi. Tab Bar har bir bo'lim ichidagi barcha ekranlarda ko'rinib turadi, doimiy kirish nuqtasini ta'minlaydi.

Apple Tab Bar ni teng ahamiyatga ega ilova bo'limlari uchun ishlatishni tavsiya qiladi. Human Interface Guidelines (2026) ko'rsatadi: «Tab Bar 3–5 tabni ko'rsatadi. Agar ko'proq kerak bo'lsa — oxirgi tab qolganlari bilan «Ko'proq» bandiga aylanadi». Google Material Design (2026) xuddi shu maqsadlar uchun Bottom Navigation ni tavsiya qiladi — 3–5 band, faol tab rang va animatsiya bilan ajralib turadi.

Yuqori tablardan (Top Tab Bar) farqli o'laroq, pastki panel bir qo'l bilan boshqarish uchun qulayroq — bosh barmoq tabiiy ravishda ekranning pastki qismiga yetadi. Nielsen Norman Group (2025) tadqiqoti shuni ko'rsatdiki, pastki navigatsiya diagonali 6 dyuymdan boshlangan smartfonlarda yuqoriga nisbatan vazifani bajarish vaqtini 22% ga qisqartiradi.

iOS da UITabBarController

UITabBarController — tablar orqali navigatsiyani tashkil qilish uchun o'rnatilgan iOS kontrolleri. Har bir tab odatda UINavigationController da tashkil qilingan o'z ekranlar to'plamini boshqaradi. UITabBarController avtomatik ravishda tizimning yarim shaffof foni va almashishda animatsiya bilan ekranning pastki qismida Tab Bar yaratadi.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Bosh sahifa",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Qidiruv",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profil",
            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]
    }
}

Misoldagi har bir tab UINavigationController ni o'z ichiga oladi, bu bo'lim ichida stek navigatsiyasidan foydalanish imkonini beradi. tabBarItem ikonka, sarlavha va badge ni sozlaydi. Tizim ikonkalar uchun avtomatik ravishda SF Symbols uslubini qo'llaydi — dinamik tur va ko'p ranglilikni qo'llab-quvvatlovchi standart Apple belgilari.

Android da BottomNavigationView

BottomNavigationView — pastki navigatsiya panelini amalga oshiruvchi Material Design Library dan Android komponenti. Android 13+ da yaxshilangan animatsiya va adaptiv xatti-harakatga ega NavigationBarView — uning vorisi ishlatiladi. BottomNavigationView Material Design 3 (Material You) spetsifikatsiyasiga amal qiladi va ilova mavzusini, dinamik ranglarni va almashish animatsiyasini qo'llab-quvvatlaydi.

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 ni NavController ga ulash
        navView.setupWithNavController(navController)

        // Bildirishnomalar tabida badge ni sozlash
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

BottomNavigationView komponenti uch uslub bilan Material Design 3 ni qo'llab-quvvatlaydi: default (imzo + ikonka), labeled (kattalashtirilgan imzo) va unlabeled (faqat ikonka). setupWithNavController metodi panelni Navigation Component bilan bog'laydi, ekran o'zgarganda faol tabni avtomatik yangilaydi. Badge-lar getOrCreateBadge orqali yaratiladi va raqamli hamda nuqtali ko'rsatkichlarni qo'llab-quvvatlaydi.

Tab Bar da badge va ko'rsatkichlar

Badge-lar — tab ikonkalaridagi bildirishnomalar, yangi xabarlar yoki vazifalar sonini ko'rsatuvchi raqamli yoki nuqtali ko'rsatkichlar. iOS da badge UITabBarItem dagi badgeValue xususiyati orqali o'rnatiladi. Android da badge-lar BadgeDrawable (Material 3) yoki NavigationBarView dagi getOrCreateBadge orqali boshqariladi.

Badge-lar kuchli jalb qilish vositasidir: Localytics (2025) tadqiqotlari shuni ko'rsatdiki, badge-larga ega ilovalar 7-kunda 18% yuqori retention ga ega. Biroq badge-lardan suiiste'mol qilish (bir vaqtning o'zida 3 dan ortiq) CTR ni 12% ga kamaytiradi. Apple va Google badge ni faqat tegishli bildirishnomalar uchun ko'rsatish va bo'lim ochilganda uni nolga qaytarishni tavsiya qiladi.

Tab Bar ni sozlash: ikonkalar, ranglar, animatsiyalar

Ikkala platforma ham Tab Bar ni keng sozlash imkoniyatlarini taqdim etadi. iOS da fon rangi, faol tabning tint rangi, imzo shriftini o'zgartirish va SF Symbols yoki o'z resurslari orqali maxsus ikonkalar qo'shish mumkin. Android da sozlash Material 3 uslublari, almashish animatsiyasi, ripple effekti va fon rasmi asosidagi dinamik ranglarni o'z ichiga oladi.

// iOS da Tab Bar ni sozlash
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 da BottomNavigationView ni sozlash XML atributlari yoki dasturiy ravishda amalga oshiriladi. Material 3 dinamik ranglar konsepsiyasini kiritadi: palitra foydalanuvchining fon rasmidan yaratiladi va avtomatik ravishda komponentlarga qo'llaniladi. Dasturchi mavzu orqali ranglarni bekor qilishi, maxsus tagiga chizish animatsiyasini (indicator) o'rnatishi va ripple effektini sozlashi mumkin.

// Android da BottomNavigationView ni sozlash
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 da: app:menu="@menu/bottom_nav_menu"
// XML da: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Pastki navigatsiyaning eng yaxshi amaliyotlari

Tab Bar ni loyihalashda platforma tavsiyalari va foydalanish qulayligi tadqiqotlariga rioya qilish muhim. Apple HIG: 5 tadan ko'p bo'lmagan tab, qisqa matn, semantik ikonkalar. Material Design: 3–5 band, faol band ajratilgan, badge hisoblagichi 99 dan oshmasligi kerak. NN Group (2025): pastki navigatsiya bo'limning barcha ekranlarida ko'rinib turishi kerak, aks holda foydalanuvchi kontekstni yo'qotadi.

Asosiy xatolar: 6+ tab («Ko'proq» ni ishlatishga majbur qiladi — topiluvchanlikni pasaytiradi), navigatsiya paytida tablar tartibining o'zgarishi (yo'nalishni yo'qotadi), ichki ekranlarda Tab Bar ni yashirish (navigatsiya langarini yo'qotish). Eng yaxshi amaliyot — barqaror tartib, bir xil ikonkalar va matn yorliqlari, badge faqat foydalanuvchi harakatlari uchun (marketing uchun emas).

• 3–5 tab — ortiqcha yuklamasdan tezkor tanlash uchun optimal son
• Barqaror tartib — tablar dinamik o'zgartirishsiz barqaror bo'lishi kerak
• Ikonka + imzo — bo'limni tushunish uchun ikkala element majburiy
• Faol tab — rang, ikonka yoki animatsiya bilan vizual farqlanishi kerak
• Badge-lar — bildirishnomalar uchun foydalaning, bo'lim ochilganda nolga qaytaring