Tab Bar — bu nədir, mobil tətbiqlərdə tab paneli

Tab Bar nədir?

Tab Bar (tab paneli) — mobil tətbiqin ekranının aşağı hissəsində yerləşən qrafik interfeys elementi. O, tətbiqin 3–5 əsas bölməsinə sürətli girişi təmin edir. Hər bölmə ikon və mətn etiketi ilə təmsil olunur. İstifadəçi müvafiq bölməyə keçmək üçün taba basır. Tab Bar hər bölmə daxilində bütün ekranlarda görünərək daimi giriş nöqtəsini təmin edir.

Apple Tab Bar-ın bərabər əhəmiyyətli tətbiq bölmələri üçün istifadəsini tövsiyə edir. Human Interface Guidelines (2026) qeyd edir: «Tab Bar 3–5 tab göstərir. Daha çox lazımdırsa — sonuncu tab qalanları ilə birlikdə «Daha çox» bəndinə çevrilir». Google-un Material Design (2026) eyni məqsədlər üçün Bottom Navigation-ı tövsiyə edir — 3–5 bənd, aktiv tab rəng və animasiya ilə vurğulanır.

Yuxarı tablardan (Top Tab Bar) fərqli olaraq, aşağı panel bir əllə idarə etmək üçün daha rahatdır — baş barmaq təbii olaraq ekranın aşağı hissəsinə çatır. Nielsen Norman Group (2025) tədqiqatı göstərdi ki, aşağı naviqasiya diaqonalı 6 düymdən olan smartfonlarda yuxarı ilə müqayisədə tapşırığın yerinə yetirilmə müddətini 22% azaldır.

iOS-da UITabBarController

UITabBarController — tablar vasitəsilə naviqasiyanı təşkil etmək üçün daxili iOS kontrolleri. Hər tab adətən UINavigationController-da təşkil olunmuş öz ekran dəstini idarə edir. UITabBarController avtomatik olaraq sistemin yarımşəffaf fonu və keçid zamanı animasiya ilə ekranın aşağı hissəsində Tab Bar yaradır.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Ana səhifə",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Axtarış",
            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]
    }
}

Nümunədəki hər tab UINavigationController ehtiva edir ki, bu da bölmə daxilində yığın naviqasiyasından istifadə etməyə imkan verir. tabBarItem ikonu, başlığı və badge-i konfiqurasiya edir. Sistem ikonlar üçün avtomatik olaraq SF Symbols stilini tətbiq edir — dinamik tip və çoxrəngliliyi dəstəkləyən standart Apple simvolları.

Android-də BottomNavigationView

BottomNavigationView — aşağı naviqasiya panelini reallaşdıran Material Design Library-dən Android komponenti. Android 13+-da təkmilləşdirilmiş animasiya və adaptiv davranışa malik NavigationBarView — onun varisi istifadə olunur. BottomNavigationView Material Design 3 (Material You) spesifikasiyasına uyğundur və tətbiq mövzusunu, dinamik rəngləri və keçid animasiyasını dəstəkləyir.

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-ın NavController-a qoşulması
        navView.setupWithNavController(navController)

        // Bildirişlər tabında badge-in konfiqurasiyası
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

BottomNavigationView komponenti üç stil ilə Material Design 3-ü dəstəkləyir: default (imza + ikon), labeled (böyüdülmüş imza) və unlabeled (yalnız ikon). setupWithNavController metodu paneli Navigation Component ilə əlaqələndirir, ekran dəyişdikdə aktiv tabı avtomatik yeniləyir. Badge-lər getOrCreateBadge vasitəsilə yaradılır və rəqəm və nöqtə göstəricilərini dəstəkləyir.

Tab Bar-da badge və göstəricilər

Badge-lər — tab ikonlarında bildirişlərin, yeni mesajların və ya tapşırıqların sayını göstərən rəqəm və ya nöqtə göstəriciləridir. iOS-da badge UITabBarItem-də badgeValue xassəsi vasitəsilə qurulur. Android-də badge-lər BadgeDrawable (Material 3) və ya NavigationBarView-də getOrCreateBadge vasitəsilə idarə olunur.

Badge-lər güclü cəlb etmə alətidir: Localytics (2025) tədqiqatları göstərdi ki, badge-ləri olan tətbiqlər 7-ci gündə 18% daha yüksək retention nümayiş etdirir. Lakin badge-lərdən sui-istifadə (eyni anda 3-dən çox) CTR-ni 12% azaldır. Apple və Google badge-i yalnız müvafiq bildirişlər üçün göstərməyi və bölmə açıldıqda onu sıfırlamağı tövsiyə edir.

Tab Bar-ın fərdiləşdirilməsi: ikonlar, rənglər, animasiyalar

Hər iki platforma Tab Bar-ın geniş fərdiləşdirmə imkanlarını təqdim edir. iOS-da fon rəngini, aktiv tabın tint rəngini, imza şriftini dəyişmək və SF Symbols və ya öz resurslar vasitəsilə fərdi ikonlar əlavə etmək olar. Android-də fərdiləşdirmə Material 3 stillərini, keçid animasiyasını, ripple effektini və divar kağızı əsasında dinamik rəngləri əhatə edir.

// iOS-da Tab Bar-ın fərdiləşdirilməsi
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-də BottomNavigationView-in fərdiləşdirilməsi XML atributları və ya proqram vasitəsilə həyata keçirilir. Material 3 dinamik rənglər konseptini təqdim edir: palitra istifadəçinin divar kağızından yaradılır və avtomatik olaraq komponentlərə tətbiq olunur. Tərtibatçı mövzu vasitəsilə rəngləri ləğv edə, fərdi altını xətt çəkmə animasiyası (indicator) təyin edə və ripple effektini konfiqurasiya edə bilər.

// Android-də BottomNavigationView-in fərdiləşdirilməsi
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-də: app:menu="@menu/bottom_nav_menu"
// XML-də: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Aşağı naviqasiyanın ən yaxşı təcrübələri

Tab Bar layihələndirərkən platforma tövsiyələrinə və istifadəyə yararlılıq tədqiqatlarına riayət etmək vacibdir. Apple HIG: 5-dən çox olmayan tab, qısa mətn, semantik ikonlar. Material Design: 3–5 bənd, aktiv bənd vurğulanmış, badge sayı 99-dan çox deyil. NN Group (2025): aşağı naviqasiya bölmənin bütün ekranlarında görünməlidir, əks halda istifadəçi konteksti itirir.

Əsas səhvlər: 6+ tab («Daha çox» istifadə etməyə məcbur edir — aşkarlığı azaldır), naviqasiya zamanı tabların sırasının dəyişməsi (istiqaməti itirir), iç-içə ekranlarda Tab Bar-ın gizlədilməsi (naviqasiya istinadının itirilməsi). Ən yaxşı təcrübə — sabit sıra, vahid ikonlar və mətn etiketləri, badge yalnız istifadəçi hərəkətləri üçün (marketinq üçün deyil).

• 3–5 tab — yükləmə olmadan sürətli seçim üçün optimal say
• Sabit sıra — tablar dinamik dəyişmədən sabit olmalıdır
• Ikon + imza — bölməni başa düşmək üçün hər iki element məcburidir
• Aktiv tab — rəng, ikon və ya animasiya ilə vizual olaraq fərqlənməlidir
• Badge-lər — bildirişlər üçün istifadə edin, bölmə açıldıqda sıfırlayın