Push Presentation dalam pengembangan mobile: apa itu, tumpukan layar

Apa itu Push Presentation?

Push Presentation — adalah mekanisme navigasi di mana setiap layar baru ditempatkan di atas tumpukan, sementara layar sebelumnya tetap di memori di bawahnya. Pengguna masuk lebih dalam ke konten dengan membuka layar detail secara berurutan, dan tombol kembali mengembalikannya ke langkah sebelumnya.

Arsitektur navigasi Push didasarkan pada struktur data LIFO (Last In, First Out). Layar baru selalu ditambahkan ke akhir tumpukan, dan penghapusan hanya terjadi dari atas. Ini menjamin perilaku yang dapat diprediksi: pengguna selalu tahu bahwa tombol kembali akan mengembalikannya tepat satu langkah ke belakang. Tumpukan navigasi dapat berisi 2 hingga 10+ layar tergantung pada kompleksitas aplikasi.

Push Presentation adalah pola utama dalam aplikasi dengan konten hierarkis: umpan berita, katalog produk, menu bertingkat, dan dokumentasi. Menurut Material Design, navigasi tumpukan cocok untuk skenario di mana pengguna menjelajahi konten dari umum ke khusus, dan setiap layar berikutnya memperdalam pemahaman topik.

Tumpukan navigasi: prinsip kerja

Tumpukan navigasi — adalah kumpulan layar yang terurut, di mana setiap elemen menyimpan status ViewController atau Fragment-nya. Selama operasi Push, layar baru ditambahkan ke tumpukan, tampilannya dianimasikan (geser dari kanan di iOS, geser dari bawah atau Fade di Android) dan menjadi aktif.

Selama operasi Pop (tekan kembali), layar atas dihapus dari tumpukan, dimusnahkan atau masuk ke memori, dan layar sebelumnya menjadi aktif. iOS secara default memusnahkan ViewController yang di-pop, membebaskan memori. Android dapat menyimpan Fragment di back stack dengan kemungkinan pemulihan tanpa pembuatan ulang.

Kedalaman tumpukan memengaruhi kinerja: setiap layar di tumpukan mengonsumsi memori. Disarankan untuk tidak menyimpan lebih dari 10 layar di tumpukan. Untuk navigasi mendalam, gunakan PopToRoot atau mulai ulang tumpukan dengan layar root baru. Navigation Component di Android secara otomatis mengelola status tumpukan melalui SavedStateHandle.

Navigasi Push di iOS: UINavigationController

UINavigationController — kontroler kontainer iOS yang mengelola tumpukan UIViewController. Ini secara otomatis menampilkan bilah navigasi (navigation bar) dengan judul layar saat ini dan tombol kembali. Animasi Push default — geser dari kanan ke kiri, menciptakan perasaan tenggelam dalam konten bagi pengguna.

Mengelola tumpukan

Penambahan layar dilakukan melalui pushViewController(_:animated:). Penghapusan — melalui popViewController(animated:). Untuk kembali ke layar root, gunakan popToRootViewController(animated:). UINavigationController juga mendukung manajemen tumpukan secara programatis melalui properti viewControllers — larik semua kontroler dalam tumpukan.

Navigation Bar dan Large Titles

Bilah navigasi berisi judul layar (title), tombol kembali, dan tombol aksi opsional. Mulai iOS 11, Large Titles (prefersLargeTitles) memungkinkan menampilkan judul dengan font yang diperbesar, yang mengecil secara animasi saat digulir. Ini meningkatkan hierarki navigasi dan memberi tahu pengguna tentang bagian saat ini.

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

// Kembali ke layar sebelumnya
navigationController?.popViewController(animated: true)

// Kembali ke layar root
navigationController?.popToRootViewController(animated: true)

Navigasi Push di Android: Navigation Component

Navigation Component — pustaka Android Jetpack untuk navigasi deklaratif. Ini menyediakan NavController yang mengelola fragmen atau layar Compose melalui grafik navigasi (nav_graph). Push di Android analog dengan iOS: setiap Fragment baru ditambahkan ke back stack, dan tombol kembali mengembalikannya.

NavHost dan NavGraph

NavHost — kontainer yang menampilkan tujuan saat ini dari NavGraph. NavGraph — file XML yang mendeskripsikan semua layar aplikasi dan koneksi di antaranya. Transisi didefinisikan melalui actions dengan menentukan destination dan argumen opsional. Navigation Component secara otomatis menangani tombol kembali sistem, animasi, dan penyimpanan status.

Argumen dan Safe Args

Untuk mentransfer data antar layar, Navigation Component mendukung Safe Args — pembuatan kode kelas argumen type-safe. Alih-alih menempatkan data secara manual ke Bundle, pengembang mendeklarasikan argumen di NavGraph dan menerimanya melalui kelas Directions dan Args yang dihasilkan. Safe Args menghilangkan kesalahan ketidakcocokan tipe dan menyederhanakan refactoring.

// Definisi NavGraph dalam 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) }
    }
}

// Navigasi secara programatis
navController.navigate("detail/42")

BottomNavigation dengan tumpukan Push

Kombinasi Bottom Navigation dan navigasi Push — pola umum dalam aplikasi mobile. Setiap tab Bottom Navigation memiliki tumpukan layar sendiri. Navigation Component mendukung ini melalui NavHost per tab atau satu NavHost dengan grafik terpisah untuk setiap tab. Berpindah tab tidak mereset status tumpukan Push.

Push Presentation vs Modal Presentation

Push Presentation dan Modal Presentation menyelesaikan tugas navigasi yang berbeda. Push ditujukan untuk melihat konten secara berurutan, di mana setiap layar baru memperdalam konteks. Modal — untuk tugas fokus yang memerlukan penyelesaian. Dalam praktiknya, penting untuk memilih pola yang tepat untuk skenario tertentu.

Kriteria pemilihan utama: jika pengguna harus dapat kembali dengan bebas tanpa kehilangan konteks — pilih Push. Jika tugas bersifat sementara dan memblokir konten utama (formulir, otentikasi) — gunakan Modal. Mencampur pola pada satu layar (Push di dalam Modal) diperbolehkan, tetapi memerlukan hierarki visual yang jelas.

Kesalahan adalah menggunakan Modal untuk urutan layar yang secara logis merupakan bagian dari aliran utama. Misalnya, wizard pembuatan pesanan (Langkah 1 → Langkah 2 → Langkah 3) lebih baik diimplementasikan melalui Push di dalam kontainer modal daripada melalui rantai jendela modal. Ini mempertahankan hierarki navigasi dan prediktabilitas kembali.

Contoh implementasi di Swift dan Kotlin

Mari kita lihat implementasi lengkap navigasi Push di kedua platform. Contoh Swift mendemonstrasikan UINavigationController dengan manajemen tumpukan programatis dan penanganan tautan dalam. Contoh Kotlin menunjukkan Navigation Component dengan NavHost, argumen, dan animasi.

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

Contoh menunjukkan navigasi Push dasar: daftar → detail. iOS menggunakan storyboard dan UINavigationController dengan transfer data manual. Android menggunakan NavHost dengan argumen type-safe dan manajemen back stack otomatis. Kedua pendekatan mendukung tautan dalam, animasi kustom, dan penyimpanan status saat rotasi.