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

Navigation bar містить заголовок екрана (title), кнопку назад та опціональні кнопки дій. Починаючи з iOS 11, Large Titles (prefersLargeTitles) дозволяють відображати заголовок збільшеним шрифтом, який анімовано стискається при скролі. Це покращує навігаційну ієрархію та інформує користувача про поточний розділ.

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

// Повернутися до попереднього екрана
navigationController?.popViewController(animated: true)

// Повернутися до кореня
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 автоматично обробляє system back, анімації та збереження стану.

Аргументи та 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 vs 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 використовує сторіборди та UINavigationController з ручною передачею даних. Android використовує NavHost з type-safe аргументами та автоматичним керуванням back stack. Обидва підходи підтримують глибокі посилання, кастомні анімації та збереження стану при повороті.