Arsitektur layar dan navigasi dalam pengembangan seluler: apa itu, jenis dan cara kerjanya

Apa itu arsitektur layar dan navigasi

Arsitektur layar dan navigasi adalah kerangka aplikasi seluler yang mendefinisikan layar yang tersedia dan cara bergerak di antara mereka. Setiap layar menyelesaikan tugas tertentu: daftar produk, kartu produk, keranjang atau formulir pembayaran. Menurut Apple Human Interface Guidelines (2025), navigasi yang dirancang dengan baik mengurangi beban kognitif pengguna sebesar 40%. Pengembang pemula harus memulai dengan skema sederhana tiga hingga lima layar.

Arsitektur layar terdiri dari apa

Setiap arsitektur layar mencakup tiga elemen dasar: layar, transisi dan kontainer navigasi. Layar menampilkan konten, transisi mengelola animasi perubahan layar, dan kontainer menyimpan riwayat pergerakan pengguna. Di Android peran ini dilakukan oleh FragmentManager, di iOS — oleh UINavigationController. Memahami ketiga komponen ini adalah langkah pertama menuju merancang antarmuka yang ramah pengguna.

Jenis utama navigasi dalam aplikasi seluler

Dalam aplikasi seluler, ada empat jenis navigasi utama: stack, modal, tab dan berbasis gerakan. Model stack bekerja seperti tumpukan kartu — setiap layar baru ditempatkan di atas, dan tombol "Kembali" menghapus kartu teratas. Menurut Nielsen Norman Group (2024), navigasi stack adalah pola yang paling dapat diprediksi, dipahami oleh 94% pengguna tanpa pelatihan. Memulai dengan stack dianjurkan karena secara intuitif jelas bagi pengguna platform apa pun.

Kapan menggunakan jendela modal

Jendela modal adalah layar sementara yang memerlukan tindakan sebelum kembali ke konten utama. Mereka digunakan untuk satu tugas: mengonfirmasi tindakan, formulir masuk atau memilih opsi. Tidak seperti stack, jendela modal tidak disimpan dalam riwayat navigasi. Jenis navigasi dipilih berdasarkan skenario penggunaan aplikasi.

Navigasi di iOS dengan UINavigationController

Di iOS, navigasi dibangun di sekitar UINavigationController — pengontrol yang mengelola stack layar. UINavigationController secara otomatis menambahkan bilah navigasi dengan judul dan tombol "Kembali". Menurut Apple Developer Documentation (2025), 85% aplikasi di App Store menggunakan UINavigationController sebagai pola navigasi utama. Pengembang iOS pemula hanya perlu menguasai push dan pop yang dikombinasikan dengan dasar-dasar desain UX/UI.

Cara kerja stack layar di iOS

Selama transisi push, layar baru ditempatkan di stack navigasi dan pengguna melihat animasi geser dari kanan. Selama transisi pop, layar saat ini dihapus dari stack dan pengguna kembali ke layar sebelumnya. UINavigationController menyimpan referensi ke semua layar di stack, memungkinkan pengguna kembali beberapa langkah. Di IT Sectr, kami menggunakan pendekatan ini di semua proyek iOS untuk membangun skenario pengguna linier.

Cara kerja navigasi di Android

Di Android, arsitektur layar diimplementasikan melalui Navigation Component — pustaka dari Google untuk membangun navigasi. Navigation Component menggunakan grafik navigasi (nav graph), di mana setiap layar adalah simpul dan transisi adalah tepi di antara mereka. Menurut Android Developers Guide (2025), Navigation Component mengurangi kesalahan navigasi sebesar 60% dibandingkan dengan FragmentManager manual. Pengembang Android pemula dianjurkan untuk segera menguasai Navigation Component.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

// Di nav_graph.xml:
<!-- 
  <fragment android:id="@+id/homeFragment"
    android:name=".HomeFragment" />
  <fragment android:id="@+id/detailFragment"
    android:name=".DetailFragment" />
  <action android:id="@+id/toDetail"
    app:destination="@id/detailFragment" />
-->

// Navigasi saat klik tombol:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager dan perannya

Sebelum Navigation Component, pengembang mengelola transisi melalui FragmentManager — kelas sistem untuk mengganti fragmen. FragmentManager bekerja dengan transaksi: replace, add, remove untuk mengubah fragmen di layar. Namun, ini memerlukan manajemen stack dan status manual, yang sering menyebabkan kesalahan. Google secara resmi merekomendasikan Navigation Component sebagai alternatif yang lebih aman daripada FragmentManager manual.

Kesalahan umum pemula dalam arsitektur layar

Pengembang pemula sering membuat kesalahan tipikal saat merancang arsitektur layar. Yang paling umum adalah kurangnya pusat kendali navigasi tunggal, ketika transisi tersebar di seluruh kode. Menurut analisis Google Play Console (2025), aplikasi dengan navigasi kacau memiliki 37% lebih banyak laporan crash terkait transisi. Satu router atau grafik navigasi memecahkan masalah ini.

Mengabaikan tombol "Kembali"

Banyak pemula lupa menangani tombol "Kembali" sistem di Android atau gerakan gesek di iOS. Pengembalian yang tidak ditangani menyebabkan aplikasi macet atau keluar secara tidak terduga. Di Android, Navigation Component menangani tombol "Kembali" secara otomatis jika grafik navigasi dikonfigurasi. Di bawah ini adalah contoh penanganan tombol "Kembali" dengan OnBackPressedDispatcher.

class MyFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val callback = OnBackPressedCallback(true) {
            if (isSheetExpanded) {
                collapseSheet()
                isEnabled = false
            } else {
                isEnabled = false
                requireActivity().onBackPressedDispatcher.onBackPressed()
            }
        }
        requireActivity().onBackPressedDispatcher.addCallback(
            viewLifecycleOwner, callback
        )
    }
}

Kode memeriksa apakah panel Bottom Sheet diperluas: jika ya — menciutkannya, jika tidak — meneruskan acara ke dispatcher sistem. Ini adalah pola standar untuk penanganan "kembali" khusus di Android.