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, който управлява фрагменти или 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 вътре в модален контейнер, отколкото чрез верига от модални прозорци. Това запазва навигационната йерархия и предвидимостта на връщането.

Примери за имплементация в 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 използва storyboard-ове и UINavigationController с ръчно предаване на данни. Android използва NavHost с type-safe аргументи и автоматично управление на back stack. И двата подхода поддържат дълбоки връзки, персонализирани анимации и запазване на състоянието при завъртане.