Push Presentation în dezvoltarea mobilă: ce este, stiva de ecrane

Ce este Push Presentation?

Push Presentation — este un mecanism de navigare în care fiecare ecran nou este plasat în vârful stivei, iar ecranul anterior rămâne în memorie sub el. Utilizatorul pătrunde în profunzimea conținutului, deschizând succesiv ecrane detaliate, iar butonul înapoi îl readuce la pasul anterior.

Arhitectura navigării Push se bazează pe structura de date LIFO (Last In, First Out). Ecranul nou este întotdeauna adăugat la sfârșitul stivei, iar eliminarea are loc doar din vârf. Aceasta garantează un comportament previzibil: utilizatorul știe întotdeauna că butonul înapoi îl va readuce exact cu un pas înapoi. Stiva de navigare poate conține între 2 și 10+ ecrane, în funcție de complexitatea aplicației.

Push Presentation este modelul principal în aplicațiile cu conținut ierarhic: fluxuri de știri, cataloage de produse, meniuri pe mai multe niveluri și documentație. Conform Material Design, navigarea în stivă este potrivită pentru scenarii în care utilizatorul explorează conținutul de la general la particular, iar fiecare ecran următor aprofundează înțelegerea subiectului.

Stiva de navigare: principiul de funcționare

Stiva de navigare — este un set ordonat de ecrane, în care fiecare element stochează starea ViewController-ului sau Fragment-ului său. În timpul operației Push, ecranul nou este adăugat în stivă, afișarea sa este animată (glisare din dreapta în iOS, glisare de jos sau Fade în Android) și devine activ.

În timpul operației Pop (apăsarea înapoi), ecranul de sus este eliminat din stivă, este distrus sau trece în memorie, iar ecranul anterior devine activ. iOS distruge implicit ViewController-ul eliminat, eliberând memoria. Android poate păstra Fragment-ul în back stack cu posibilitatea de restaurare fără recreere.

Adâncimea stivei afectează performanța: fiecare ecran din stivă consumă memorie. Se recomandă să nu stocați mai mult de 10 ecrane în stivă. Pentru navigare profundă, utilizați PopToRoot sau repornirea stivei cu un nou ecran rădăcină. Navigation Component în Android gestionează automat starea stivei prin SavedStateHandle.

Navigarea Push în iOS: UINavigationController

UINavigationController — un controler container iOS care gestionează stiva UIViewController. Acesta afișează automat bara de navigare (navigation bar) cu titlul ecranului curent și butonul de revenire. Animația implicită Push — glisare de la dreapta la stânga, creând utilizatorului senzația de imersiune în conținut.

Gestionarea stivei

Adăugarea ecranului se face prin pushViewController(_:animated:). Eliminarea — prin popViewController(animated:). Pentru revenirea la ecranul rădăcină se utilizează popToRootViewController(animated:). UINavigationController suportă, de asemenea, gestionarea programatică a stivei prin proprietatea viewControllers — un tablou al tuturor controlerelor din stivă.

Navigation Bar și Large Titles

Bara de navigare conține titlul ecranului (title), butonul înapoi și butoane opționale de acțiune. Începând cu iOS 11, Large Titles (prefersLargeTitles) permit afișarea titlului cu un font mărit, care se micșorează animat la derulare. Aceasta îmbunătățește ierarhia de navigare și informează utilizatorul despre secțiunea curentă.

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

// Revenire la ecranul anterior
navigationController?.popViewController(animated: true)

// Revenire la ecranul rădăcină
navigationController?.popToRootViewController(animated: true)

Navigarea Push în Android: Navigation Component

Navigation Component — biblioteca Android Jetpack pentru navigare declarativă. Oferă NavController, care gestionează fragmentele sau ecranele Compose printr-un graf de navigare (nav_graph). Push în Android este analog cu iOS: fiecare Fragment nou este adăugat în back stack, iar butonul înapoi îl readuce pe cel anterior.

NavHost și NavGraph

NavHost — un container care afișează destinația curentă din NavGraph. NavGraph — un fișier XML care descrie toate ecranele aplicației și conexiunile dintre ele. Tranzițiile sunt definite prin actions cu specificarea destination și a argumentelor opționale. Navigation Component gestionează automat butonul înapoi de sistem, animațiile și salvarea stării.

Argumente și Safe Args

Pentru transmiterea datelor între ecrane, Navigation Component suportă Safe Args — generarea de cod a claselor de argumente type-safe. În loc să plaseze manual datele în Bundle, dezvoltatorul declară argumentele în NavGraph și le primește prin clasele generate Directions și Args. Safe Args elimină erorile de nepotrivire a tipurilor și simplifică refactorizarea.

// Definiția NavGraph în 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) }
    }
}

// Navigare programatică
navController.navigate("detail/42")

BottomNavigation cu stivă Push

Combinarea Bottom Navigation cu navigarea Push — un model frecvent în aplicațiile mobile. Fiecare filă Bottom Navigation are propria stivă de ecrane. Navigation Component suportă aceasta prin NavHost per tab sau un singur NavHost cu grafuri separate pentru fiecare filă. Comutarea filelor nu resetează starea stivelor Push.

Push Presentation vs Modal Presentation

Push Presentation și Modal Presentation rezolvă sarcini diferite de navigare. Push este destinat vizualizării secvențiale a conținutului, unde fiecare ecran nou aprofundează contextul. Modal — pentru sarcini care necesită concentrare și finalizare. În practică, este important să alegeți modelul potrivit pentru scenariul specific.

Criteriile principale de selecție: dacă utilizatorul trebuie să revină liber fără a pierde contextul — alegeți Push. Dacă sarcina este temporară și blochează conținutul principal (formular, autentificare) — utilizați Modal. Amestecarea modelelor pe același ecran (Push în interiorul Modal) este permisă, dar necesită o ierarhie vizuală clară.

Este o greșeală să utilizați Modal pentru secvențe de ecrane care fac parte logic din fluxul principal. De exemplu, asistentul de creare a comenzii (Pasul 1 → Pasul 2 → Pasul 3) este mai bine realizat prin Push în interiorul unui container modal, decât printr-un lanț de ferestre modale. Aceasta păstrează ierarhia de navigare și predictibilitatea revenirii.

Exemple de implementare în Swift și Kotlin

Să analizăm implementarea completă a navigării Push pe ambele platforme. Exemplul în Swift demonstrează UINavigationController cu gestionare programatică a stivei și procesarea linkurilor profunde. Exemplul în Kotlin arată Navigation Component cu NavHost, argumente și animații.

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() })
        }
    }
}

Exemplele arată navigarea Push de bază: listă → detalii. iOS utilizează storyboard-uri și UINavigationController cu transmiterea manuală a datelor. Android utilizează NavHost cu argumente type-safe și gestionarea automată a back stack. Ambele abordări suportă linkuri profunde, animații personalizate și salvarea stării la rotire.