Tab Bar — vad är det, panel med flikar i mobilappar

Vad är Tab Bar?

Tab Bar (flikpanel) — grafiskt gränssnittselement längst ner på skärmen i en mobilapp. Det ger snabb åtkomst till 3–5 huvudsektioner i appen. Varje sektion representeras av en ikon och en textetikett. Användaren trycker på en flik för att växla till motsvarande sektion. Tab Bar förblir synlig på alla skärmar inom varje sektion och ger en konstant ingångspunkt.

Apple rekommenderar att använda Tab Bar för appsektioner med samma viktighetsnivå. Human Interface Guidelines (2026) anger: «Tab Bar visar 3–5 flikar. Om fler behövs — blir den sista fliken punkten «Mer» med resten inuti». Googles Material Design (2026) rekommenderar Bottom Navigation för samma ändamål — 3–5 punkter, aktiv flik markerad med färg och animation.

Till skillnad från övre flikar (Top Tab Bar) är bottenpanelen bekvämare för enhandsanvändning — tummen når naturligt den nedre delen av skärmen. Forskning från Nielsen Norman Group (2025) visade att bottennavigering minskar tiden för slutförande av uppgifter med 22% jämfört med toppnavigering på smartphones med diagonal från 6 tum.

UITabBarController i iOS

UITabBarController — inbyggd iOS-kontroller för att organisera navigering via flikar. Varje flik hanterar sin egen uppsättning skärmar, vanligtvis organiserad i en UINavigationController. UITabBarController skapar automatiskt en Tab Bar längst ner på skärmen med systemets halvgenomskinliga bakgrund och animation vid växling.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "Hem",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Sök",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profil",
            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]
    }
}

Varje flik i exemplet innehåller en UINavigationController, vilket möjliggör stacknavigering inom sektionen. tabBarItem konfigurerar ikon, titel och märke. Systemet tillämpar automatiskt SF Symbols-stil för ikoner — standardsymboler från Apple med stöd för dynamisk typ och flerfärg.

BottomNavigationView i Android

BottomNavigationView — Android-komponent från Material Design Library som implementerar bottennavigeringspanelen. I Android 13+ används NavigationBarView — dess efterföljare med förbättrad animation och adaptivt beteende. BottomNavigationView följer specifikationen Material Design 3 (Material You) och stöder apptema, dynamiska färger och animation vid växling.

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)

        // Ansluta BottomNavigation till NavController
        navView.setupWithNavController(navController)

        // Konfigurera märke på aviseringsfliken
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Komponenten BottomNavigationView stöder Material Design 3 med tre stilar: default (etikett + ikon), labeled (förstorad etikett) och unlabeled (endast ikon). Metoden setupWithNavController kopplar panelen till Navigation Component och uppdaterar automatiskt aktiv flik vid skärmändring. Märken skapas via getOrCreateBadge och stöder numeriska och punktindikatorer.

Märken och indikatorer på Tab Bar

Märken — numeriska eller punktindikatorer på flikikoner som visar antalet aviseringar, nya meddelanden eller uppgifter. På iOS ställs märket in via egenskapen badgeValue på UITabBarItem. På Android hanteras märken via BadgeDrawable (Material 3) eller getOrCreateBadge i NavigationBarView.

Märken är ett kraftfullt engagemangsverktyg: forskning från Localytics (2025) visade att appar med märken har 18% högre retention dag 7. Överdriven användning av märken (mer än 3 samtidigt) minskar dock CTR med 12%. Apple och Google rekommenderar att visa märke endast för relevanta aviseringar och återställa det när sektionen öppnas.

Anpassa Tab Bar: ikoner, färger, animationer

Båda plattformarna erbjuder omfattande anpassningsmöjligheter för Tab Bar. På iOS kan bakgrundsfärg, tint-färg för aktiv flik, etikettens teckensnitt ändras och anpassade ikoner läggas till via SF Symbols eller egna tillgångar. På Android inkluderar anpassning Material 3-stilar, växlingsanimation, ripple-effekt och dynamiska färger baserade på bakgrundsbild.

// Anpassa Tab Bar i 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.

På Android utförs anpassning av BottomNavigationView via XML-attribut eller programmatiskt. Material 3 introducerar konceptet dynamiska färger: paletten genereras från användarens bakgrundsbild och tillämpas automatiskt på komponenter. Utvecklaren kan åsidosätta färger via tema, ställa in anpassad understrykningsanimation (indicator) och konfigurera ripple-effekten.

// Anpassa BottomNavigationView i 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")
    )
}

// I XML: app:menu="@menu/bottom_nav_menu"
// I XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Bästa praxis för bottennavigering

Vid utformning av Tab Bar är det viktigt att följa plattformsrekommendationer och användbarhetsforskning. Apple HIG: högst 5 flikar, koncis text, semantiska ikoner. Material Design: 3–5 punkter, aktiv punkt markerad, märkesräknare högst 99. NN Group (2025): bottennavigering bör förbli synlig på alla skärmar i sektionen, annars förlorar användaren sammanhanget.

Huvudsakliga misstag: 6+ flikar (tvingar användning av «Mer» — minskar upptäckbarhet), ändring av flikordning vid navigering (desorienterar), döljande av Tab Bar på kapslade skärmar (förlust av navigeringsankare). Bästa praxis — fast ordning, enhetliga ikoner och texteiketter, märken endast för användaråtgärder (inte för marknadsföring).

• 3–5 flikar — optimalt antal för snabbt val utan överbelastning
• Fast ordning — flikarna bör vara stabila, utan dynamisk omordning
• Ikon + etikett — båda elementen är obligatoriska för att förstå sektionen
• Aktiv flik — bör visuellt skilja sig i färg, ikon eller animation
• Märken — använd för aviseringar, återställ när sektionen öppnas