Modal Presentation dalam pengembangan mobile: apa itu, jenis layar

Apa itu Modal Presentation?

Modal Presentation — adalah pola navigasi di mana layar baru muncul di atas layar saat ini, untuk sementara memblokir interaksi dengan konten induk. Pengguna harus secara eksplisit menyelesaikan tugas modal (batal, simpan, tutup) untuk kembali ke keadaan sebelumnya.

Modalitas memecahkan tugas kognitif: memfokuskan perhatian pengguna pada satu tindakan tanpa gangguan dari antarmuka lainnya. Ini sangat penting untuk formulir pendaftaran, dialog konfirmasi, pemilihan file, dan otentikasi melalui layanan pihak ketiga. Human Interface Guidelines Apple merekomendasikan penggunaan modalitas hanya untuk tugas yang memerlukan penyelesaian sebelum melanjutkan pekerjaan.

Tidak seperti jendela modal web, Modal Presentation mobile bisa layar penuh (mengambil seluruh layar) atau parsial (Page Sheet, Bottom Sheet). Pemilihan jenis tergantung pada konteks tugas dan konvensi platform. iOS cenderung menggunakan Page Sheet untuk sebagian besar skenario, meninggalkan Full Screen untuk pemutar video dan editor foto.

Apa perbedaan presentasi modal dengan Push?

Push Presentation (navigasi tumpukan) menambahkan layar ke tumpukan navigasi dan secara otomatis menampilkan tombol kembali. Pengguna dapat kembali ke layar sebelumnya kapan saja. Modal Presentation, sebaliknya, memerlukan penyelesaian eksplisit: tombol kembali tidak ada atau menutup jendela modal, bukan kembali ke layar sebelumnya.

Perbedaan utama antara presentasi modal dan push: Modal Presentation memblokir navigasi mundur tanpa kehilangan data, memerlukan tindakan untuk menutup (Save, Cancel, Done) dan biasanya mewakili tugas terpisah. Push Presentation mempertahankan hierarki navigasi, secara otomatis menambahkan tombol kembali, dan cocok untuk melihat konten secara berurutan.

Dalam praktiknya, pilihan antara Modal dan Push tergantung pada konteks. Disarankan menggunakan modalitas untuk tugas yang harus diselesaikan pengguna sebelum melanjutkan, dan Push untuk menjelajahi konten secara berurutan. Mencampur pola pada layar yang sama menyebabkan kebingungan dan memperburuk UX.

Presentasi modal di iOS: UIKit dan SwiftUI

iOS menawarkan beberapa gaya presentasi modal melalui enumerasi UIModalPresentationStyle. UIKit mendukung .fullScreen (layar penuh), .pageSheet (kartu dengan margin atas), .formSheet (jendela terpusat di iPad) dan .automatic (pemilihan oleh sistem berdasarkan konteks). Mulai iOS 13, gaya default menjadi .automatic, yang untuk iPhone memilih .pageSheet.

UIViewController.present

Metode dasar UIKit untuk presentasi modal — present(_:animated:completion:). Controller yang memanggil metode menjadi presentingViewController, dan yang baru menjadi presentedViewController. Penutupan dilakukan melalui dismiss(animated:completion:). SwiftUI menyediakan modifier .sheet untuk perilaku serupa.

SwiftUI .sheet

Pendekatan deklaratif SwiftUI menggunakan modifier .sheet dan .fullScreenCover. Yang pertama membuat Page Sheet, yang kedua — presentasi modal layar penuh. Keduanya menerima binding ke Bool atau objek yang dapat diidentifikasi yang mengontrol visibilitas jendela modal. Penutupan terjadi saat binding diatur ke false atau pemanggilan dismiss dari environment.

struct ContentView: View {
    @State private var showModal = false

    var body: some View {
        Button("Buka formulir") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

struct RegistrationForm: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        Button("Simpan") { dismiss() }
    }
}

Presentasi modal di Android: Fragment dan Compose

Android tidak memiliki API tunggal untuk presentasi modal seperti iOS. Sebaliknya, platform menawarkan beberapa mekanisme: DialogFragment untuk jendela dialog, BottomSheetDialogFragment untuk panel bawah, dan Activity dengan flag NEW_TASK dan CLEAR_TOP untuk layar modal. Di Jetpack Compose, komponen tunggal Dialog telah muncul untuk semua jenis jendela modal.

DialogFragment

DialogFragment — kelas dasar untuk jendela modal di Android SDK. Ia mengelola siklus hidup dialog, memproses rotasi layar, dan menyimpan status. Fragment ditampilkan di atas Activity tanpa memblokir tumpukan navigasi. Penutupan dilakukan melalui dismiss() atau klik di luar area dialog jika setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment menampilkan jendela modal sebagai panel yang muncul dari bawah. Pola ini populer di Material Design untuk pemilihan opsi, berbagi, dan tindakan cepat. BottomSheet dapat memiliki tinggi tetap atau dapat diperluas (peek height + full height). Di Compose, digunakan ModalBottomSheet dari pustaka Material3.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Formulir modal", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Tutup")
                }
            }
        }
    }
}

Praktik terbaik presentasi modal

Jendela modal — alat UX yang kuat, tetapi penggunaan berlebihan memperburuk pengalaman pengguna. Apple HIG dan Google Material Design sepakat dalam rekomendasi: modalitas harus diterapkan untuk tugas fokus dan tidak melebihi 20% dari total tindakan navigasi.

Kapan menggunakan presentasi modal

Jendela modal cocok untuk skenario: input data (formulir pendaftaran, profil), konfirmasi (penghapusan, pengiriman), pemilihan (pemilih tanggal, manajer file) dan otentikasi (OAuth, Firebase Auth). Jika tugas memakan waktu kurang dari 30 detik dan memerlukan pemblokiran konteks — pilih modalitas.

Apa yang harus dihindari

Jangan gunakan presentasi modal untuk: melihat konten secara berurutan (gunakan Push), menampilkan kesalahan (gunakan Toast atau Snackbar), iklan dan penawaran promosi tanpa permintaan eksplisit pengguna. Material Design merekomendasikan untuk menghindari jendela modal bersarang — ini membingungkan pengguna dan melanggar hierarki navigasi.

Untuk jendela modal dengan bidang teks, pastikan untuk menangani kehilangan fokus keyboard. Saat keyboard muncul, jendela modal harus bergerak ke atas sehingga pengguna dapat melihat teks yang dimasukkan. UIKeyboardWillShowNotification di iOS dan adjustResize di Android menyelesaikan masalah ini.

Contoh kode di Swift dan Kotlin

Mari kita lihat implementasi presentasi modal di kedua platform. Contoh Swift menunjukkan konfigurasi UIModalPresentationStyle.pageSheet dengan delegasi untuk menangani penutupan. Contoh Kotlin mendemonstrasikan DialogFragment dengan layout kustom dan penyimpanan status.

let modalVC = ModalViewController()
modalVC.modalPresentationStyle = .pageSheet

if let sheet = modalVC.sheetPresentationController {
    sheet.detents = [.medium(), .large()]
    sheet.prefersGrabberVisible = true
}

modalVC.presentationController?.delegate = self
present(modalVC, animated: true)

// MARK: - UIAdaptivePresentationControllerDelegate
extension ViewController: UIAdaptivePresentationControllerDelegate {
    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
        print("Jendela modal ditutup")
    }
}

class ModalDialogFragment : DialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_modal, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        view.findViewById<Button>(R.id.closeButton).setOnClickListener {
            dismiss()
        }
    }
}