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-эффект и динамические цвета на основе wallpaper.

// Кастомизация 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 вводит concept динамических цветов: палитра генерируется из обоев пользователя и применяется к компонентам автоматически. Разработчик может переопределить цвета через тему, установить кастомную анимацию подчёркивания (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 вкладок — оптимальное количество для быстрого выбора без перегрузки
• Фиксированный порядок — вкладки должны быть стабильными, без динамической перестановки
• Иконка + подпись — оба элемента обязательны для понимания раздела
• Активная вкладка — должна визуально отличаться цветом, иконкой или анимацией
• Бейджи — используйте для уведомлений, сбрасывайте при открытии раздела