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 color активної вкладки, шрифт підпису та додати кастомні іконки через SF Symbols або власні assets. На 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+ вкладок (змушує використовувати «Ще» — знижує discoverability), зміна порядку вкладок при навігації (дезорієнтує), приховування Tab Bar на вкладених екранах (втрата навігаційної прив'язки). Краща практика — фіксований порядок, одноманітні іконки та текстові мітки, бейджі тільки для дій користувача (не для маркетингу).

• 3–5 вкладок — оптимальна кількість для швидкого вибору без перевантаження
• Фіксований порядок — вкладки повинні бути стабільними, без динамічного переставляння
• Іконка + підпис — обидва елементи обов'язкові для розуміння розділу
• Активна вкладка — повинна візуально відрізнятися кольором, іконкою або анімацією
• Бейджі — використовуйте для сповіщень, скидайте при відкритті розділу