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). Това е стандартната архитектура за производствени приложения.

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 за всеки раздел: при превключване на раздели състоянието на стека се запазва, при връщане — възстановява. Това осигурява безпроблемно 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 знака)
• Ред — фиксиран, от най-важния към по-малко важния
• Броячи — само за потребителски известия, не за маркетинг