Tab Bar — какво е това, панел с раздели в мобилни приложения

Какво е Tab Bar?

Tab Bar (панел с раздели) — елемент от графичния интерфейс, разположен в долната част на екрана на мобилно приложение. Той осигурява бърз достъп до 3–5 основни секции на приложението. Всяка секция е представена от икона и текстов етикет. Потребителят натиска раздел, за да превключи към съответната секция. Tab Bar остава видим на всички екрани във всяка секция, осигурявайки постоянна точка на вход.

Apple препоръчва използването на Tab Bar за секции на приложението с еднакво ниво на важност. Human Interface Guidelines (2026) посочват: «Tab Bar показва 3–5 раздела. Ако са необходими повече — последният раздел става точка «Още» с останалите вътре». Material Design на Google (2026) препоръчва Bottom Navigation за същите цели — 3–5 точки, активният раздел се откроява с цвят и анимация.

За разлика от горните раздели (Top Tab Bar), долният панел е по-удобен за работа с една ръка — палецът естествено достига до долната част на екрана. Изследване на Nielsen Norman Group (2025) показа, че долната навигация намалява времето за изпълнение на задачата с 22% в сравнение с горната на смартфони с диагонал от 6 инча.

UITabBarController в iOS

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 с поддръжка на динамичен тип и многоцветност.

BottomNavigationView в Android

BottomNavigationView — Android компонент от Material Design Library, реализиращ долния навигационен панел. В 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 значката се задава чрез свойството badgeValue на UITabBarItem. В Android значките се управляват чрез BadgeDrawable (Material 3) или getOrCreateBadge в NavigationBarView.

Значките са мощен инструмент за ангажиране: изследвания на Localytics (2025) показаха, че приложенията със значки имат 18% по-висок retention на 7-ия ден. Прекаленото използване на значки (повече от 3 едновременно) обаче намалява CTR с 12%. Apple и Google препоръчват показване на значка само за подходящи известия и нулиране при отваряне на секцията.

Персонализиране на Tab Bar: икони, цветове, анимации

И двете платформи предлагат широки възможности за персонализиране на Tab Bar. В iOS можете да промените цвета на фона, tint цвета на активния раздел, шрифта на надписа и да добавите персонализирани икони чрез SF Symbols или собствени ресурси. В Android персонализирането включва стилове Material 3, анимация на превключване, ripple ефект и динамични цветове на базата на тапет.

// Персонализиране на Tab Bar в iOS
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 въвежда концепцията за динамични цветове: палитрата се генерира от тапета на потребителя и се прилага автоматично към компонентите. Разработчикът може да презапише цветовете чрез тема, да зададе персонализирана анимация на подчертаване (indicator) и да конфигурира ripple ефекта.

// Персонализиране на BottomNavigationView в Android
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 раздела — оптимален брой за бърз избор без претоварване
• Фиксиран ред — разделите трябва да са стабилни, без динамично пренареждане
• Икона + надпис — и двата елемента са задължителни за разбиране на секцията
• Активен раздел — трябва визуално да се различава по цвят, икона или анимация
• Значки — използвайте за известия, нулирайте при отваряне на секцията