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% σε σύγκριση με την πάνω πλοήγηση σε smartphone με διαγώνιο από 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 καρτέλες — βέλτιστος αριθμός για γρήγορη επιλογή χωρίς υπερφόρτωση
• Σταθερή σειρά — οι καρτέλες πρέπει να είναι σταθερές, χωρίς δυναμική αναδιάταξη
• Εικονίδιο + ετικέτα — και τα δύο στοιχεία είναι υποχρεωτικά για την κατανόηση της ενότητας
• Ενεργή καρτέλα — πρέπει να διαφέρει οπτικά σε χρώμα, εικονίδιο ή κινούμενο σχέδιο
• Σήματα — χρησιμοποιήστε για ειδοποιήσεις, επαναφέρετε κατά το άνοιγμα της ενότητας