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 символів)
• Порядок — фіксований, від найбільш важливого до менш важливого
• Лічильники — тільки для користувацьких сповіщень, не для маркетингу