Push Presentation sa mobile development: ano ito, stack ng screen

Ano ang Push Presentation?

Push Presentation — ay isang mekanismo ng navigation kung saan ang bawat bagong screen ay inilalagay sa ibabaw ng stack, habang ang nakaraang screen ay nananatili sa memory sa ilalim nito. Ang user ay pumapasok nang mas malalim sa content sa pamamagitan ng sunod-sunod na pagbubukas ng mga detalyadong screen, at ang back button ay nagbabalik sa kanya sa nakaraang hakbang.

Ang arkitektura ng Push navigation ay nakabatay sa istraktura ng data na LIFO (Last In, First Out). Ang bagong screen ay palaging idinaragdag sa dulo ng stack, at ang pag-alis ay nagaganap lamang mula sa itaas. Ito ay ginagarantiyahan ang predictable na pag-uugali: alam ng user na ang back button ay magbabalik sa kanya nang eksaktong isang hakbang pabalik. Ang navigation stack ay maaaring maglaman ng 2 hanggang 10+ screen depende sa pagiging kumplikado ng app.

Ang Push Presentation ay ang pangunahing pattern sa mga app na may hierarchical na content: news feed, catalog ng produkto, multi-level na menu, at dokumentasyon. Ayon sa Material Design, ang stack navigation ay angkop para sa mga sitwasyon kung saan ginalugad ng user ang content mula pangkalahatan patungo sa partikular, at ang bawat susunod na screen ay nagpapalalim sa pag-unawa sa paksa.

Navigation stack: prinsipyo ng paggana

Ang navigation stack — ay isang nakaayos na koleksyon ng mga screen, kung saan ang bawat elemento ay nag-iimbak ng estado ng ViewController o Fragment nito. Sa panahon ng Push operation, ang bagong screen ay idinaragdag sa stack, ang pagpapakita nito ay ina-animate (slide mula kanan sa iOS, slide mula ibaba o Fade sa Android) at nagiging aktibo.

Sa panahon ng Pop operation (pagpindot ng back), ang tuktok na screen ay tinatanggal mula sa stack, sinisira o pumupunta sa memory, at ang nakaraang screen ay nagiging aktibo. iOS ay default na sumisira sa popped ViewController, nagpapalaya ng memory. Android ay maaaring mag-imbak ng Fragment sa back stack na may posibilidad ng pag-restore nang hindi na muling ginagawa.

Ang lalim ng stack ay nakakaapekto sa performance: bawat screen sa stack ay kumukonsumo ng memory. Inirerekomenda na huwag mag-imbak ng higit sa 10 screen sa stack. Para sa malalim na navigation, gamitin ang PopToRoot o i-restart ang stack na may bagong root screen. Navigation Component sa Android ay awtomatikong namamahala ng estado ng stack sa pamamagitan ng SavedStateHandle.

Push navigation sa iOS: UINavigationController

UINavigationController — isang container controller ng iOS na namamahala ng stack ng UIViewController. Ito ay awtomatikong nagpapakita ng navigation bar na may pamagat ng kasalukuyang screen at back button. Ang default na Push animation — slide mula kanan pakaliwa, na lumilikha ng pakiramdam ng paglubog sa content para sa user.

Pamamahala ng stack

Ang pagdaragdag ng screen ay ginagawa sa pamamagitan ng pushViewController(_:animated:). Ang pag-alis — sa pamamagitan ng popViewController(animated:). Para bumalik sa root screen, gamitin ang popToRootViewController(animated:). Sinusuportahan din ng UINavigationController ang programmatic na pamamahala ng stack sa pamamagitan ng property na viewControllers — array ng lahat ng controllers sa stack.

Navigation Bar at Large Titles

Ang navigation bar ay naglalaman ng pamagat ng screen (title), back button, at opsyonal na action button. Mula iOS 11, ang Large Titles (prefersLargeTitles) ay nagbibigay-daan sa pagpapakita ng pamagat na may pinalaking font, na pumapaliit nang may animation kapag nag-scroll. Pinapabuti nito ang hierarchy ng navigation at pinapaalam sa user ang tungkol sa kasalukuyang seksyon.

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

// Bumalik sa nakaraang screen
navigationController?.popViewController(animated: true)

// Bumalik sa root screen
navigationController?.popToRootViewController(animated: true)

Push navigation sa Android: Navigation Component

Navigation Component — library ng Android Jetpack para sa declarative navigation. Ito ay nagbibigay ng NavController na namamahala ng mga fragment o compose screen sa pamamagitan ng navigation graph (nav_graph). Push sa Android ay analogous sa iOS: bawat bagong Fragment ay idinaragdag sa back stack, at ang back button ay nagre-restore ng nauna.

NavHost at NavGraph

NavHost — container na nagpapakita ng kasalukuyang destinasyon mula sa NavGraph. NavGraph — XML file na naglalarawan ng lahat ng screen ng app at ang mga koneksyon sa pagitan ng mga ito. Ang mga transition ay tinutukoy sa pamamagitan ng actions na may pagtukoy ng destination at opsyonal na argumento. Navigation Component ay awtomatikong humahawak ng system back button, animation, at pag-save ng estado.

Mga argumento at Safe Args

Para sa paglilipat ng data sa pagitan ng mga screen, sinusuportahan ng Navigation Component ang Safe Args — code generation ng type-safe argument classes. Sa halip na manu-manong maglagay ng data sa Bundle, ang developer ay nagdedeklara ng mga argumento sa NavGraph at natatanggap ang mga ito sa pamamagitan ng generated na Directions at Args classes. Inaalis ng Safe Args ang mga error sa hindi pagkakatugma ng uri at pinapasimple ang refactoring.

// Kahulugan ng NavGraph sa 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) }
    }
}

// Programmatic na navigation
navController.navigate("detail/42")

BottomNavigation na may Push stack

Ang kumbinasyon ng Bottom Navigation at Push navigation — karaniwang pattern sa mga mobile app. Ang bawat tab ng Bottom Navigation ay may sariling stack ng screen. Navigation Component ay sumusuporta dito sa pamamagitan ng NavHost per tab o isang solong NavHost na may hiwalay na mga graph para sa bawat tab. Ang paglipat ng tab ay hindi nagre-reset ng estado ng Push stacks.

Push Presentation vs Modal Presentation

Push Presentation at Modal Presentation ay lumulutas ng iba't ibang gawain ng navigation. Push ay para sa sunod-sunod na pagtingin ng content, kung saan ang bawat bagong screen ay nagpapalalim ng konteksto. Modal — para sa focus na gawain na nangangailangan ng pagkumpleto. Sa praktika, mahalagang pumili ng tamang pattern para sa partikular na sitwasyon.

Pangunahing pamantayan sa pagpili: kung ang user ay dapat malayang makabalik nang walang pagkawala ng konteksto — piliin ang Push. Kung ang gawain ay pansamantala at humaharang sa pangunahing content (form, authentication) — gamitin ang Modal. Ang paghahalo ng mga pattern sa isang screen (Push sa loob ng Modal) ay pinapayagan, ngunit nangangailangan ng malinaw na visual hierarchy.

Ang pagkakamali ay ang paggamit ng Modal para sa mga sequence ng screen na lohikal na bahagi ng pangunahing daloy. Halimbawa, ang order creation wizard (Hakbang 1 → Hakbang 2 → Hakbang 3) ay mas mahusay na ipatupad sa pamamagitan ng Push sa loob ng modal container kaysa sa pamamagitan ng chain ng modal windows. Ito ay nagpapanatili ng navigation hierarchy at predictability ng pagbabalik.

Mga halimbawa ng implementasyon sa Swift at Kotlin

Tingnan natin ang kumpletong implementasyon ng Push navigation sa parehong platform. Ang Swift na halimbawa ay nagpapakita ng UINavigationController na may programmatic stack management at pagproseso ng malalalim na link. Ang Kotlin na halimbawa ay nagpapakita ng Navigation Component na may NavHost, argumento, at animation.

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

Ang mga halimbawa ay nagpapakita ng basic Push navigation: listahan → detalye. iOS ay gumagamit ng storyboard at UINavigationController na may manual na paglipat ng data. Android ay gumagamit ng NavHost na may type-safe argumento at awtomatikong back stack management. Parehong approach ay sumusuporta sa malalalim na link, custom animation, at pag-save ng estado sa pag-ikot.