Bottom Navigation: основы, BottomNavigationView и TabView

Что такое Bottom Navigation?

Bottom Navigation — навигационный паттерн, при котором основные разделы приложения доступны через панель в нижней части экрана. Этот паттерн стал стандартом мобильного дизайна благодаря удобству управления одной рукой. В отличие от бокового меню (Drawer), Bottom Navigation всегда видна и не требует дополнительных жестов для открытия.

Material Design 3 (2026) определяет Navigation Bar как компонент с тремя состояниями: default (иконка + подпись), labeled (увеличенная подпись, активна одна вкладка) и unlabeled (только иконки). Google рекомендует Navigation Bar для приложений с 3–5 равнозначными разделами. Для 6+ разделов — Navigation Drawer. В iOS SwiftUI TabView автоматически использует нижнюю панель с системным стилем.

Исследование UX Movement (2025) показало: Bottom Navigation улучшает время выполнения задач на 27% по сравнению с выдвижным меню, поскольку пользователь видит все доступные разделы без дополнительных действий. Количество неверных нажатий снижается на 34% благодаря крупным целям касания (минимум 48x48 dp на Android, 44x44 pt на iOS).

BottomNavigationView в Android (Material 3)

BottomNavigationView в Android — компонент из Material 3 Library (com.google.android.material.navigation.NavigationBarView). Он заменил устаревший BottomNavigationView из Material 2 и добавил поддержку динамических цветов Material You, анимированного индикатора активной вкладки и встроенных бейджей. Компонент настраивается через XML-меню и полностью совместим с Navigation Component.

// Активити с BottomNavigationView и NavHostFragment
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // Автоматическая синхронизация навигации
        navView.setupWithNavController(navController)

        // Настройка бейджа
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// XML меню для Bottom Navigation (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="Главная" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Чаты" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Профиль" />
// </menu>

Material 3 NavigationBarView поддерживает три режима labelVisibilityMode: LABEL_VISIBILITY_AUTO (по умолчанию — подпись показывается для активной вкладки), LABEL_VISIBILITY_LABELED (подписи у всех), LABEL_VISIBILITY_UNLABELED (только иконки). Анимированный индикатор активной вкладки настраивается через itemActiveIndicatorStyle с кастомным ripple-эффектом.

TabView в SwiftUI для iOS

TabView — встроенный контейнер SwiftUI для создания нижней навигации. Каждая вкладка определяется модификатором .tabItem с иконкой и текстом. TabView автоматически создаёт UITabBarController под капотом и поддерживает все функции нативной панели: бейджи, бейдж-цвет, анимацию переключения и адаптацию под Dynamic Type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Главная", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Поиск", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Уведомления", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Профиль", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView поддерживает модификатор .badge (iOS 15+), который принимает Int (числовой бейдж) или String (текстовый). Цвет бейджа можно изменить через .badgeProminence(.increased) — делает бейдж ярче. Анимация переключения вкладок настраивается через .tabViewStyle(.automatic) или кастомные стили. Для контроля над программным переключением используется @State с selection.

Комбинация нижней и стековой навигации

Bottom Navigation редко используется отдельно — каждая вкладка обычно содержит стековый навигатор (NavigationView/NavigationStack в SwiftUI, NavHostFragment в Android). Такая комбинация даёт пользователю как быстрый доступ к разделам (Tab), так и углублённую навигацию внутри каждого раздела (Stack). Это стандартная архитектура для production-приложений.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Главная", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Поиск", systemImage: "magnifyingglass")
            }
        }
    }
}

// Внутри HomeView — стековая навигация
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

В Android та же комбинация реализуется через NavHostFragment для каждой вкладки. Navigation Component автоматизирует создание back stack для каждого tab: при переключении вкладок состояние стека сохраняется, при возврате — восстанавливается. Это даёт бесшовный UX, как в системных приложениях Google (Play Market, YouTube).

Material 3: динамические цвета и анимации

Material 3 (Material You) вносит ключевое изменение в Bottom Navigation — динамические цвета, генерируемые из обоев пользователя. Система извлекает доминирующие цвета из wallpaper и создаёт палитру из 5 ключевых тонов. NavigationBarView автоматически применяет эти цвета: активная вкладка получает primary цвет, неактивные — onSurface variant.

Анимация индикатора активной вкладки стала плавной: при переключении индикатор анимированно перемещается к новой вкладке с интерполяцией. Ripple-эффект на касание использует secondary цвет. Bottom Navigation в Material 3 также поддерживает кастомные анимации через itemActiveIndicatorStyle — разработчик может задать форму (овал, прямоугольник), отступы и цвет индикатора.

<!-- Стиль активного индикатора NavigationBarView -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

UX-рекомендации для нижней навигации

При проектировании Bottom Navigation следует учитывать исследования юзабилити. NN Group (2026): нижняя панель должна быть высотой минимум 56 dp, цели касания — не менее 48 dp. Текст меток — максимум 12 символов (латиница) или 8 символов (кириллица). Активная вкладка должна отличаться не только цветом, но и состоянием иконки (filled vs outlined).

Material Design 3 рекомендует следующие паттерны: 4 вкладки — оптимально для спокойного сканирования; значок «+» в центре (FloatingActionButton) — для основного действия; бейджи — только для счётчиков действий пользователя. Не следует: использовать Bottom Navigation с 2 вкладками (лучше Tab Layout), менять порядок вкладок динамически, скрывать панель на вложенных экранах.

• Высота — минимум 56 dp для комфортного касания большим пальцем
• Контраст — активная вкладка должна быть отличима (цвет + заливка иконки)
• Надписи — короткие, 1-2 слова, без обрезания (не более 12 символов)
• Порядок — фиксированный, от наиболее важного к менее важному
• Счётчики — только для пользовательских уведомлений, не для маркетинга