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 боја активне картице, фонт потписа и додати прилагођене иконице кроз SF Symbols или сопствене ресурсе. На 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+ картица (приморава на коришћење „Више” — смањује откривљивост), промена редоследа картица при навигацији (дезоријентише), скривање Tab Bar на угњежденим екранима (губитак навигационог сидра). Најбоља пракса — фиксни редослед, једнообразне иконице и текстуалне ознаке, беџеви само за радње корисника (не за маркетинг).

• 3–5 картица — оптималан број за брз избор без преоптерећења
• Фиксни редослед — картице треба да буду стабилне, без динамичког премештања
• Иконица + потпис — оба елемента су обавезна за разумевање секције
• Активна картица — треба визуелно да се разликује бојом, иконицом или анимацијом
• Беџеви — користите за обавештења, ресетујте при отварању секције