Modal Presentation v mobilním vývoji: co to je, typy obrazovek

Co je Modal Presentation?

Modal Presentation — je navigační vzor, při kterém se nová obrazovka objeví nad aktuální a dočasně blokuje interakci s rodičovským obsahem. Uživatel musí explicitně dokončit modální úkol (zrušit, uložit, zavřít), aby se vrátil do předchozího stavu.

Modalita řeší kognitivní úkol: soustředí pozornost uživatele na jednu akci bez rozptylování zbytkem rozhraní. To je kritické pro registrační formuláře, potvrzovací dialogy, výběr souborů a autentizaci prostřednictvím služeb třetích stran. Human Interface Guidelines od Apple doporučují používat modalitu pouze pro úkoly, které vyžadují dokončení před pokračováním v práci.

Na rozdíl od webových modálních oken může být mobilní Modal Presentation celoobrazovková (zabírá celou obrazovku) nebo částečná (Page Sheet, Bottom Sheet). Výběr typu závisí na kontextu úkolu a platformních konvencích. iOS tíhne k Page Sheet pro většinu scénářů, ponechává Full Screen pro přehrávače videa a fotoeditory.

Čím se liší modální prezentace od Push?

Push Presentation (zásobníková navigace) přidává obrazovku do navigačního zásobníku a automaticky zobrazuje tlačítko zpět. Uživatel se může kdykoli vrátit na předchozí obrazovku. Modal Presentation naopak vyžaduje explicitní dokončení: tlačítko zpět buď chybí, nebo zavírá modální okno, nikoli se vrací na předchozí obrazovku.

Hlavní rozdíly mezi modální a push prezentací: Modal Presentation blokuje navigaci zpět bez ztráty dat, vyžaduje akci pro zavření (Save, Cancel, Done) a obvykle představuje samostatný úkol. Push Presentation zachovává hierarchii navigace, automaticky přidává tlačítko zpět a je vhodná pro sekvenční prohlížení obsahu.

V praxi závisí výběr mezi Modal a Push na kontextu. Doporučuje se používat modalitu pro úkoly, které musí uživatel dokončit před pokračováním, a Push pro sekvenční prozkoumávání obsahu. Míchání vzorů na jedné obrazovce vede k zmatení a zhoršuje UX.

Modální prezentace v iOS: UIKit a SwiftUI

iOS nabízí několik stylů modální prezentace prostřednictvím výčtu UIModalPresentationStyle. UIKit podporuje .fullScreen (celá obrazovka), .pageSheet (karta s okrajem nahoře), .formSheet (centrované okno na iPadu) a .automatic (výběr systémem na základě kontextu). Od iOS 13 se výchozím stylem stal .automatic, který pro iPhone volí .pageSheet.

UIViewController.present

Základní metoda UIKit pro modální prezentaci — present(_:animated:completion:). Kontroler, který metodu volá, se stává presentingViewController a nový — presentedViewController. Zavření se provádí pomocí dismiss(animated:completion:). SwiftUI poskytuje modifikátor .sheet pro podobné chování.

SwiftUI .sheet

Deklarativní přístup SwiftUI používá modifikátory .sheet a .fullScreenCover. První vytváří Page Sheet, druhý — celoobrazovkovou modální prezentaci. Oba přijímají binding na Bool nebo identifikovatelný objekt, který řídí viditelnost modálního okna. Zavření nastane při nastavení binding na false nebo voláním dismiss z environment.

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

    var body: some View {
        Button("Otevřít formulář") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

    var body: some View {
        Button("Uložit") { dismiss() }
    }
}

Modální prezentace v Androidu: Fragment a Compose

Android nemá jednotné API pro modální prezentaci jako iOS. Místo toho platforma nabízí několik mechanismů: DialogFragment pro dialogová okna, BottomSheetDialogFragment pro spodní panely a Activity s flagy NEW_TASK a CLEAR_TOP pro modální obrazovky. V Jetpack Compose se objevila jednotná komponenta Dialog pro všechny typy modálních oken.

DialogFragment

DialogFragment — základní třída pro modální okna v Android SDK. Spravuje životní cyklus dialogu, zpracovává otáčení obrazovky a ukládá stav. Fragment se zobrazuje nad Activity bez blokování navigačního zásobníku. Zavření se provádí pomocí dismiss() nebo kliknutím mimo oblast dialogu, pokud je setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment zobrazuje modální okno jako panel zvedající se zdola. Tento vzor je populární v Material Design pro výběr možností, sdílení a rychlé akce. BottomSheet může mít pevnou výšku nebo být rozšiřitelný (peek height + full height). V Compose se používá ModalBottomSheet z knihovny Material3.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Modální formulář", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Zavřít")
                }
            }
        }
    }
}

Nejlepší praktiky modální prezentace

Modální okna — mocný nástroj UX, ale jejich nadměrné používání zhoršuje uživatelský zážitek. Apple HIG a Google Material Design se shodují v doporučeních: modalita by měla být aplikována pro fokusované úkoly a neměla by přesahovat 20 % celkového počtu navigačních akcí.

Kdy používat modální prezentaci

Modální okna jsou vhodná pro scénáře: zadávání dat (registrační formuláře, profil), potvrzování (mazání, odesílání), výběr (výběr data, správce souborů) a autentizace (OAuth, Firebase Auth). Pokud úkol trvá méně než 30 sekund a vyžaduje blokování kontextu — zvolte modalitu.

Čemu se vyhnout

Nepoužívejte modální prezentaci pro: sekvenční prohlížení obsahu (použijte Push), zobrazování chyb (použijte Toast nebo Snackbar), reklamy a propagační nabídky bez explicitního požadavku uživatele. Material Design doporučuje vyhnout se vnořeným modálním oknům — to dezorientuje uživatele a narušuje hierarchii navigace.

U modálních oken s textovými poli nezapomeňte zpracovat ztrátu fokusu klávesnice. Při zobrazení klávesnice by se modální okno mělo posunout nahoru, aby uživatel viděl zadávaný text. UIKeyboardWillShowNotification v iOS a adjustResize v Androidu tento problém řeší.

Příklady kódu v Swift a Kotlin

Podívejme se na implementaci modální prezentace na obou platformách. Příklad v Swift ukazuje nastavení UIModalPresentationStyle.pageSheet s delegátem pro zpracování zavření. Příklad v Kotlin demonstruje DialogFragment s vlastním layoutem a ukládáním stavu.

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("Modální okno zavřeno")
    }
}

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