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 χαρακτήρες)
• Σειρά — σταθερή, από το πιο σημαντικό στο λιγότερο σημαντικό
• Μετρητές — μόνο για ειδοποιήσεις χρήστη, όχι για μάρκετινγκ