Push Presentation στην κινητή ανάπτυξη: τι είναι, στοίβα οθονών

Τι είναι το Push Presentation;

Push Presentation — είναι ένας μηχανισμός πλοήγησης όπου κάθε νέα οθόνη τοποθετείται στην κορυφή της στοίβας, ενώ η προηγούμενη οθόνη παραμένει στη μνήμη από κάτω της. Ο χρήστης προχωρά βαθύτερα στο περιεχόμενο ανοίγοντας διαδοχικά λεπτομερείς οθόνες, και το κουμπί επιστροφής τον γυρίζει πίσω στο προηγούμενο βήμα.

Η αρχιτεκτονική της πλοήγησης Push βασίζεται στη δομή δεδομένων LIFO (Last In, First Out). Η νέα οθόνη προστίθεται πάντα στο τέλος της στοίβας και η αφαίρεση γίνεται μόνο από την κορυφή. Αυτό εγγυάται προβλέψιμη συμπεριφορά: ο χρήστης γνωρίζει πάντα ότι το κουμπί επιστροφής θα τον γυρίσει ακριβώς ένα βήμα πίσω. Η στοίβα πλοήγησης μπορεί να περιέχει από 2 έως 10+ οθόνες ανάλογα με την πολυπλοκότητα της εφαρμογής.

Το Push Presentation είναι το κύριο μοτίβο σε εφαρμογές με ιεραρχικό περιεχόμενο: ροές ειδήσεων, κατάλογοι προϊόντων, μενού πολλαπλών επιπέδων και τεκμηρίωση. Σύμφωνα με το Material Design, η στοιβαδική πλοήγηση είναι κατάλληλη για σενάρια όπου ο χρήστης εξερευνά περιεχόμενο από το γενικό στο ειδικό και κάθε επόμενη οθόνη εμβαθύνει την κατανόηση του θέματος.

Στοίβα πλοήγησης: αρχή λειτουργίας

Η στοίβα πλοήγησης — είναι ένα διατεταγμένο σύνολο οθονών, όπου κάθε στοιχείο αποθηκεύει την κατάσταση του ViewController ή του Fragment του. Κατά τη λειτουργία Push, η νέα οθόνη προστίθεται στη στοίβα, η εμφάνισή της γίνεται με κίνηση (σύρσιμο από δεξιά στο iOS, σύρσιμο από κάτω ή Fade στο Android) και γίνεται ενεργή.

Κατά τη λειτουργία Pop (πάτημα πίσω), η πάνω οθόνη αφαιρείται από τη στοίβα, καταστρέφεται ή πηγαίνει στη μνήμη και η προηγούμενη οθόνη γίνεται ενεργή. iOS προεπιλεγμένα καταστρέφει το popped ViewController, ελευθερώνοντας μνήμη. Android μπορεί να διατηρήσει το Fragment στο back stack με δυνατότητα επαναφοράς χωρίς εκ νέου δημιουργία.

Το βάθος της στοίβας επηρεάζει την απόδοση: κάθε οθόνη στη στοίβα καταναλώνει μνήμη. Συνιστάται να μην αποθηκεύετε περισσότερες από 10 οθόνες στη στοίβα. Για βαθιά πλοήγηση, χρησιμοποιήστε PopToRoot ή επανεκκίνηση της στοίβας με νέα root οθόνη. Το Navigation Component στο Android διαχειρίζεται αυτόματα την κατάσταση της στοίβας μέσω του SavedStateHandle.

Πλοήγηση Push στο iOS: UINavigationController

UINavigationController — ένας ελεγκτής κοντέινερ του iOS που διαχειρίζεται τη στοίβα UIViewController. Εμφανίζει αυτόματα τη γραμμή πλοήγησης (navigation bar) με τον τίτλο της τρέχουσας οθόνης και το κουμπί επιστροφής. Η προεπιλεγμένη κίνηση Push — σύρσιμο από δεξιά προς τα αριστερά, δημιουργώντας στον χρήστη την αίσθηση εμβύθισης στο περιεχόμενο.

Διαχείριση στοίβας

Η προσθήκη οθόνης γίνεται μέσω του pushViewController(_:animated:). Η αφαίρεση — μέσω του popViewController(animated:). Για επιστροφή στην root οθόνη χρησιμοποιείται το popToRootViewController(animated:). Το UINavigationController υποστηρίζει επίσης προγραμματική διαχείριση της στοίβας μέσω της ιδιότητας viewControllers — ενός πίνακα όλων των ελεγκτών στη στοίβα.

Navigation Bar και Large Titles

Η γραμμή πλοήγησης περιέχει τον τίτλο της οθόνης (title), το κουμπί επιστροφής και προαιρετικά κουμπιά ενεργειών. Από το iOS 11, τα Large Titles (prefersLargeTitles) επιτρέπουν την εμφάνιση του τίτλου με μεγεθυμένη γραμματοσειρά, η οποία συρρικνώνεται με κίνηση κατά την κύλιση. Αυτό βελτιώνει την ιεραρχία πλοήγησης και ενημερώνει τον χρήστη για την τρέχουσα ενότητα.

let detailVC = DetailViewController()
detailVC.title = "Item Details"
navigationController?.pushViewController(detailVC, animated: true)

// Επιστροφή στην προηγούμενη οθόνη
navigationController?.popViewController(animated: true)

// Επιστροφή στην root οθόνη
navigationController?.popToRootViewController(animated: true)

Πλοήγηση Push στο Android: Navigation Component

Navigation Component — βιβλιοθήκη Android Jetpack για δηλωτική πλοήγηση. Παρέχει το NavController, το οποίο διαχειρίζεται fragments ή compose οθόνες μέσω ενός γράφου πλοήγησης (nav_graph). Το Push στο Android είναι ανάλογο με το iOS: κάθε νέο Fragment προστίθεται στο back stack και το κουμπί επιστροφής επαναφέρει το προηγούμενο.

NavHost και NavGraph

NavHost — ένα κοντέινερ που εμφανίζει τον τρέχοντα προορισμό από το NavGraph. NavGraph — ένα αρχείο XML που περιγράφει όλες τις οθόνες της εφαρμογής και τις συνδέσεις μεταξύ τους. Οι μεταβάσεις ορίζονται μέσω actions με καθορισμό του destination και προαιρετικών ορισμάτων. Το Navigation Component χειρίζεται αυτόματα το συστημικό κουμπί πίσω, τις κινήσεις και την αποθήκευση κατάστασης.

Ορίσματα και Safe Args

Για μεταφορά δεδομένων μεταξύ οθονών, το Navigation Component υποστηρίζει Safe Args — παραγωγή κώδικα type-safe κλάσεων ορισμάτων. Αντί να τοποθετεί χειροκίνητα δεδομένα στο Bundle, ο προγραμματιστής δηλώνει ορίσματα στο NavGraph και τα λαμβάνει μέσω των παραγόμενων κλάσεων Directions και Args. Το Safe Args εξαλείφει σφάλματα ασυμφωνίας τύπων και απλοποιεί την αναδιάρθρωση κώδικα.

// Ορισμός NavGraph σε XML
<!-- res/navigation/nav_graph.xml -->
@navigation {
    NavHost(startDestination = "list") {
        composable("list") { ListScreen() }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { DetailScreen(it.arguments()?.getInt("itemId") ?: 0) }
    }
}

// Προγραμματική πλοήγηση
navController.navigate("detail/42")

BottomNavigation με στοίβα Push

Ο συνδυασμός Bottom Navigation και πλοήγησης Push — συνηθισμένο μοτίβο σε κινητές εφαρμογές. Κάθε καρτέλα Bottom Navigation έχει τη δική της στοίβα οθονών. Navigation Component το υποστηρίζει μέσω NavHost per tab ή ενός ενιαίου NavHost με ξεχωριστούς γράφους για κάθε καρτέλα. Η εναλλαγή καρτελών δεν επαναφέρει την κατάσταση των στοιβών Push.

Push Presentation εναντίον Modal Presentation

Push Presentation και Modal Presentation λύνουν διαφορετικές εργασίες πλοήγησης. Το Push προορίζεται για διαδοχική προβολή περιεχομένου, όπου κάθε νέα οθόνη εμβαθύνει το πλαίσιο. Το Modal — για εργασίες που απαιτούν συγκέντρωση και ολοκλήρωση. Στην πράξη, είναι σημαντικό να επιλέγετε το σωστό μοτίβο για το συγκεκριμένο σενάριο.

Βασικά κριτήρια επιλογής: εάν ο χρήστης πρέπει να επιστρέφει ελεύθερα χωρίς απώλεια πλαισίου — επιλέξτε Push. Εάν η εργασία είναι προσωρινή και μπλοκάρει το κύριο περιεχόμενο (φόρμα, ταυτοποίηση) — χρησιμοποιήστε Modal. Η ανάμειξη μοτίβων στην ίδια οθόνη (Push μέσα σε Modal) επιτρέπεται, αλλά απαιτεί σαφή οπτική ιεραρχία.

Λάθος είναι η χρήση Modal για ακολουθίες οθονών που αποτελούν λογικά μέρος της κύριας ροής. Για παράδειγμα, ο οδηγός δημιουργίας παραγγελίας (Βήμα 1 → Βήμα 2 → Βήμα 3) είναι καλύτερο να υλοποιηθεί μέσω Push μέσα σε modal κοντέινερ, παρά μέσω αλυσίδας modal παραθύρων. Αυτό διατηρεί την ιεραρχία πλοήγησης και την προβλεψιμότητα επιστροφής.

Παραδείγματα υλοποίησης σε Swift και Kotlin

Ας εξετάσουμε την πλήρη υλοποίηση της πλοήγησης Push και στις δύο πλατφόρμες. Το παράδειγμα Swift παρουσιάζει το UINavigationController με προγραμματική διαχείριση στοίβας και επεξεργασία βαθιών συνδέσμων. Το παράδειγμα Kotlin δείχνει το Navigation Component με NavHost, ορίσματα και κινήσεις.

class ListViewController: UIViewController {
    func showDetail(_ itemId: Int) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let detailVC = storyboard.instantiateViewController(
            withIdentifier: "DetailViewController"
        ) as! DetailViewController
        detailVC.itemId = itemId
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    var itemId: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Item #\(itemId)"
    }
}

@Composable
fun PushNavigationApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ListScreen(
                onItemClick = { id -> navController.navigate("detail/$id") }
            )
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments()?.getInt("itemId") ?: 0
            DetailScreen(itemId = itemId, onBack = { navController.popBackStack() })
        }
    }
}

Τα παραδείγματα δείχνουν βασική πλοήγηση Push: λίστα → λεπτομέρειες. iOS χρησιμοποιεί storyboards και UINavigationController με χειροκίνητη μεταφορά δεδομένων. Android χρησιμοποιεί NavHost με type-safe ορίσματα και αυτόματη διαχείριση back stack. Και οι δύο προσεγγίσεις υποστηρίζουν βαθείς συνδέσμους, προσαρμοσμένες κινήσεις και αποθήκευση κατάστασης κατά την περιστροφή.