Modal Presentation i mobilutveckling: vad är det, skärmtyper

Vad är Modal Presentation?

Modal Presentation — är ett navigeringsmönster där en ny skärm visas ovanför den aktuella och tillfälligt blockerar interaktion med det överordnade innehållet. Användaren måste explicit slutföra den modala uppgiften (avbryta, spara, stänga) för att återgå till föregående tillstånd.

Modalitet löser en kognitiv uppgift: den fokuserar användarens uppmärksamhet på en enda åtgärd utan distraktion från resten av gränssnittet. Detta är avgörande för registreringsformulär, bekräftelsedialoger, filval och autentisering via tredjepartstjänster. Apples Human Interface Guidelines rekommenderar att modalitet endast används för uppgifter som kräver slutförande innan arbetet fortsätter.

Till skillnad från webbaserade modala fönster kan mobil Modal Presentation vara helskärm (ta upp hela skärmen) eller partiell (Page Sheet, Bottom Sheet). Valet av typ beror på uppgiftens kontext och plattformskonventioner. iOS lutar åt Page Sheet för de flesta scenarier och lämnar Full Screen för videospelare och fotoredigerare.

Hur skiljer sig modal presentation från Push?

Push Presentation (stacknavigering) lägger till skärmen i navigeringsstacken och visar automatiskt en tillbakaknapp. Användaren kan när som helst återgå till föregående skärm. Modal Presentation kräver däremot explicit slutförande: tillbakaknappen saknas eller stänger det modala fönstret istället för att återgå till föregående skärm.

Huvudskillnader mellan modal och push-presentation: Modal Presentation blockerar bakåtnavigering utan dataförlust, kräver en åtgärd för att stänga (Save, Cancel, Done) och representerar vanligtvis en separat uppgift. Push Presentation bevarar navigeringshierarkin, lägger automatiskt till en återvändningsknapp och är lämplig för sekventiell visning av innehåll.

I praktiken beror valet mellan Modal och Push på sammanhanget. Det rekommenderas att använda modalitet för uppgifter som användaren måste slutföra innan fortsättning, och Push för sekventiell utforskning av innehåll. Att blanda mönster på samma skärm leder till förvirring och försämrar UX.

Modal presentation i iOS: UIKit och SwiftUI

iOS erbjuder flera stilar av modal presentation genom uppräkningen UIModalPresentationStyle. UIKit stöder .fullScreen (helskärm), .pageSheet (kort med marginal upptill), .formSheet (centrerat fönster på iPad) och .automatic (systemval baserat på kontext). Från och med iOS 13 har standardstilen blivit .automatic, som för iPhone väljer .pageSheet.

UIViewController.present

UIKit:s grundläggande metod för modal presentation — present(_:animated:completion:). Kontrollern som anropar metoden blir presentingViewController och den nya blir presentedViewController. Stängning utförs via dismiss(animated:completion:). SwiftUI tillhandahåller modifieraren .sheet för liknande beteende.

SwiftUI .sheet

SwiftUI:s deklarativa tillvägagångssätt använder modifierarna .sheet och .fullScreenCover. Den första skapar Page Sheet, den andra — en helskärms modal presentation. Båda accepterar en binding till Bool eller ett identifierbart objekt som styr synligheten av det modala fönstret. Stängning sker när bindingen sätts till false eller anrop av dismiss från environment.

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

    var body: some View {
        Button("Öppna formulär") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

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

Modal presentation i Android: Fragment och Compose

Android har inte ett enhetligt API för modal presentation som iOS. Istället erbjuder plattformen flera mekanismer: DialogFragment för dialogrutor, BottomSheetDialogFragment för nedre paneler och Activity med NEW_TASK och CLEAR_TOP-flaggor för modala skärmar. I Jetpack Compose har en enhetlig komponent Dialog dykt upp för alla typer av modala fönster.

DialogFragment

DialogFragment — basklassen för modala fönster i Android SDK. Den hanterar dialogens livscykel, bearbetar skärmrotation och sparar tillstånd. Fragmentet visas ovanför Activity utan att blockera navigeringsstacken. Stängning utförs via dismiss() eller klick utanför dialogområdet om setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment visar det modala fönstret som en panel som höjs från botten. Detta mönster är populärt i Material Design för val av alternativ, delning och snabba åtgärder. BottomSheet kan ha fast höjd eller vara expanderbar (peek height + full height). I Compose används ModalBottomSheet från Material3-biblioteket.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Modalt formulär", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Stäng")
                }
            }
        }
    }
}

Bästa praxis för modal presentation

Modala fönster — ett kraftfullt UX-verktyg, men överdriven användning försämrar användarupplevelsen. Apple HIG och Google Material Design är överens om rekommendationerna: modalitet bör tillämpas för fokuserade uppgifter och inte överstiga 20% av det totala antalet navigeringsåtgärder.

När ska man använda modal presentation

Modala fönster är lämpliga för scenarier: datainmatning (registreringsformulär, profil), bekräftelse (borttagning, sändning), val (datumväljare, filhanterare) och autentisering (OAuth, Firebase Auth). Om uppgiften tar mindre än 30 sekunder och kräver kontextblockering — välj modalitet.

Vad man bör undvika

Använd inte modal presentation för: sekventiell visning av innehåll (använd Push), visning av fel (använd Toast eller Snackbar), reklam och erbjudanden utan användarens explicita begäran. Material Design rekommenderar att undvika nästlade modala fönster — detta desorienterar användaren och bryter navigeringshierarkin.

För modala fönster med textfält måste du hantera tangentbordsfokusförlust. När tangentbordet visas bör det modala fönstret flyttas uppåt så att användaren ser texten som skrivs in. UIKeyboardWillShowNotification i iOS och adjustResize i Android löser detta problem.

Kodexempel i Swift och Kotlin

Låt oss titta på implementeringen av modal presentation på båda plattformarna. Swift-exemplet visar konfiguration av UIModalPresentationStyle.pageSheet med en delegat för att hantera stängning. Kotlin-exemplet visar DialogFragment med anpassad layout och tillståndssparande.

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("Modalt fönster stängt")
    }
}

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