Modal Presentation sa mobile development: ano ito, mga uri ng screen

Ano ang Modal Presentation?

Modal Presentation — ay isang pattern ng navigation kung saan lumilitaw ang isang bagong screen sa ibabaw ng kasalukuyan, pansamantalang hinaharangan ang interaksyon sa parent na nilalaman. Dapat tahasang kumpletuhin ng user ang modal task (kanselahin, i-save, isara) upang makabalik sa nakaraang estado.

Ang modality ay lumulutas ng isang cognitive task: pinapatuon nito ang atensyon ng user sa isang aksyon nang walang distraction mula sa natitirang interface. Ito ay kritikal para sa mga registration form, confirmation dialog, file selection at authentication sa pamamagitan ng third-party services. Ang Human Interface Guidelines ng Apple ay nagrerekomenda na gamitin lamang ang modality para sa mga gawaing nangangailangan ng pagkumpleto bago magpatuloy.

Hindi tulad ng web modal windows, ang mobile Modal Presentation ay maaaring full-screen (sakop ang buong screen) o bahagihan (Page Sheet, Bottom Sheet). Ang pagpili ng uri ay depende sa konteksto ng gawain at mga platform convention. Ang iOS ay nakatuon sa Page Sheet para sa karamihan ng mga scenario, iniiwan ang Full Screen para sa mga video player at photo editor.

Paano naiiba ang modal presentation sa Push?

Push Presentation (stack navigation) ay nagdadagdag ng screen sa navigation stack at awtomatikong nagpapakita ng back button. Maaaring bumalik ang user sa nakaraang screen anumang oras. Ang Modal Presentation, sa kabaligtaran, ay nangangailangan ng tahasang pagkumpleto: ang back button ay wala o isinasara ang modal window, hindi bumabalik sa nakaraang screen.

Mga pangunahing pagkakaiba sa pagitan ng modal at push presentation: Modal Presentation ay humaharang sa navigation pabalik nang walang pagkawala ng data, nangangailangan ng aksyon upang isara (Save, Cancel, Done) at karaniwang nagpapakita ng hiwalay na gawain. Push Presentation ay nagpapanatili ng navigation hierarchy, awtomatikong nagdadagdag ng return button at angkop para sa sunod-sunod na pagtingin ng nilalaman.

Sa praktika, ang pagpili sa pagitan ng Modal at Push ay depende sa konteksto. Inirerekomenda na gamitin ang modality para sa mga gawaing dapat kumpletuhin ng user bago magpatuloy, at Push para sa sunod-sunod na pag-explore ng nilalaman. Ang paghahalo ng mga pattern sa iisang screen ay nagdudulot ng kalituhan at nagpapalala ng UX.

Modal presentation sa iOS: UIKit at SwiftUI

iOS ay nag-aalok ng ilang estilo ng modal presentation sa pamamagitan ng enumerasyon UIModalPresentationStyle. Ang UIKit ay sumusuporta sa .fullScreen (buong screen), .pageSheet (card na may margin sa itaas), .formSheet (naka-center na window sa iPad) at .automatic (pagpili ng system batay sa konteksto). Mula iOS 13, ang default na estilo ay naging .automatic, na para sa iPhone ay pumipili ng .pageSheet.

UIViewController.present

Ang pangunahing paraan ng UIKit para sa modal presentation — present(_:animated:completion:). Ang controller na tumatawag sa paraan ay nagiging presentingViewController, at ang bago ay nagiging presentedViewController. Ang pagsasara ay ginagawa sa pamamagitan ng dismiss(animated:completion:). Ang SwiftUI ay nagbibigay ng modifier na .sheet para sa katulad na pag-uugali.

SwiftUI .sheet

Ang declarative approach ng SwiftUI ay gumagamit ng mga modifier na .sheet at .fullScreenCover. Ang una ay gumagawa ng Page Sheet, ang pangalawa — full-screen modal presentation. Pareho silang tumatanggap ng binding sa Bool o isang identifiable object na kumokontrol sa visibility ng modal window. Ang pagsasara ay nangyayari kapag ang binding ay nakatakda sa false o pagtawag ng dismiss mula sa environment.

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

    var body: some View {
        Button("Buksan ang form") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

    var body: some View {
        Button("I-save") { dismiss() }
    }
}

Modal presentation sa Android: Fragment at Compose

Android ay walang iisang API para sa modal presentation tulad ng iOS. Sa halip, ang platform ay nag-aalok ng ilang mekanismo: DialogFragment para sa mga dialog window, BottomSheetDialogFragment para sa mga lower panel at Activity na may NEW_TASK at CLEAR_TOP flags para sa mga modal screen. Sa Jetpack Compose, lumitaw ang isang unified component na Dialog para sa lahat ng uri ng modal window.

DialogFragment

DialogFragment — ang base class para sa mga modal window sa Android SDK. Pinamamahalaan nito ang lifecycle ng dialog, pinoproseso ang screen rotation at nagse-save ng estado. Ang Fragment ay ipinapakita sa ibabaw ng Activity nang hindi hinaharangan ang navigation stack. Ang pagsasara ay ginagawa sa pamamagitan ng dismiss() o pag-click sa labas ng dialog area kung setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment ay nagpapakita ng modal window bilang isang panel na umaangat mula sa ibaba. Ang pattern na ito ay popular sa Material Design para sa pagpili ng mga opsyon, pagbabahagi at mabilis na aksyon. Ang BottomSheet ay maaaring may fixed height o expandable (peek height + full height). Sa Compose, ginagamit ang ModalBottomSheet mula sa Material3 library.

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

Pinakamahuhusay na kasanayan sa modal presentation

Ang mga modal window — ay isang makapangyarihang tool sa UX, ngunit ang labis na paggamit nito ay nagpapalala sa karanasan ng user. Ang Apple HIG at Google Material Design ay nagkakasundo sa mga rekomendasyon: ang modality ay dapat ilapat para sa mga nakatutok na gawain at hindi lalampas sa 20% ng kabuuang bilang ng mga navigation action.

Kailan gagamitin ang modal presentation

Ang mga modal window ay angkop para sa mga scenario: pag-input ng data (registration form, profile), pagkumpirma (pag-delete, pagpapadala), pagpili (date picker, file manager) at authentication (OAuth, Firebase Auth). Kung ang gawain ay tumatagal ng mas mababa sa 30 segundo at nangangailangan ng pag-block ng konteksto — piliin ang modality.

Ano ang iwasan

Huwag gumamit ng modal presentation para sa: sunod-sunod na pagtingin ng nilalaman (gumamit ng Push), pagpapakita ng mga error (gumamit ng Toast o Snackbar), mga ad at promotional offers nang walang tahasang hiling ng user. Material Design ay nagrerekomenda na iwasan ang nested modal windows — ito ay nakakalito sa user at lumalabag sa navigation hierarchy.

Para sa mga modal window na may text fields, siguraduhing hawakan ang pagkawala ng focus ng keyboard. Kapag lumitaw ang keyboard, ang modal window ay dapat gumalaw pataas upang makita ng user ang tekstong ina-input. Ang UIKeyboardWillShowNotification sa iOS at adjustResize sa Android ay lumulutas ng problemang ito.

Mga halimbawa ng code sa Swift at Kotlin

Tingnan natin ang implementasyon ng modal presentation sa parehong platform. Ang Swift na halimbawa ay nagpapakita ng configuration ng UIModalPresentationStyle.pageSheet na may delegate para sa paghawak ng pagsasara. Ang Kotlin na halimbawa ay nagpapakita ng DialogFragment na may custom na layout at pag-save ng estado.

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("Isinara ang modal window")
    }
}

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