Modal Presentation в мобилната разработка: какво е, видове екрани

Какво е Modal Presentation?

Modal Presentation — е модел на навигация, при който нов екран се появява над текущия, временно блокирайки взаимодействието с родителското съдържание. Потребителят трябва изрично да завърши модалната задача (отказ, запазване, затваряне), за да се върне към предишното състояние.

Модалността решава когнитивна задача: фокусира вниманието на потребителя върху едно действие без разсейване от останалия интерфейс. Това е критично за регистрационни формуляри, диалози за потвърждение, избор на файлове и удостоверяване чрез услуги на трети страни. Human Interface Guidelines на Apple препоръчват използването на модалност само за задачи, които изискват завършване преди продължаване на работата.

За разлика от уеб модалните прозорци, мобилната Modal Presentation може да бъде на цял екран (заема целия екран) или частична (Page Sheet, Bottom Sheet). Изборът на тип зависи от контекста на задачата и платформените конвенции. iOS клони към Page Sheet за повечето сценарии, оставяйки Full Screen за видео плейъри и фото редактори.

Как се различава модалната презентация от Push?

Push Presentation (стекова навигация) добавя екрана в навигационния стек и автоматично показва бутона за назад. Потребителят може да се върне към предишния екран по всяко време. Modal Presentation, напротив, предполага изрично завършване: бутонът за назад или липсва, или затваря модалния прозорец, а не се връща към предишния екран.

Основни разлики между модална и push презентация: Modal Presentation блокира навигацията назад без загуба на данни, изисква действие за затваряне (Save, Cancel, Done) и обикновено представлява отделна задача. Push Presentation запазва йерархията на навигация, автоматично добавя бутон за връщане и е подходяща за последователно разглеждане на съдържание.

На практика изборът между Modal и Push зависи от контекста. Препоръчва се използване на модалност за задачи, които потребителят трябва да завърши преди продължаване, и Push — за последователно разглеждане на съдържание. Смесването на модели на един екран води до объркване и влошава UX.

Модална презентация в iOS: UIKit и SwiftUI

iOS предлага няколко стила модална презентация чрез изброяването UIModalPresentationStyle. UIKit поддържа .fullScreen (цял екран), .pageSheet (карта с поле отгоре), .formSheet (центриран прозорец на iPad) и .automatic (избор от системата на база контекст). От iOS 13 насам, стилът по подразбиране стана .automatic, който за iPhone избира .pageSheet.

UIViewController.present

Основният метод на UIKit за модална презентация — present(_:animated:completion:). Контролерът, който извиква метода, става presentingViewController, а новият — presentedViewController. Затварянето се извършва чрез dismiss(animated:completion:). SwiftUI предоставя модификатор .sheet за подобно поведение.

SwiftUI .sheet

Декларативният подход на SwiftUI използва модификаторите .sheet и .fullScreenCover. Първият създава Page Sheet, вторият — модална презентация на цял екран. И двата приемат binding към Bool или идентифицируем обект, който управлява видимостта на модалния прозорец. Затварянето става при задаване на binding на false или извикване на dismiss от environment.

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

    var body: some View {
        Button("Отваряне на формуляр") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

    var body: some View {
        Button("Запазване") { dismiss() }
    }
}

Модална презентация в Android: Fragment и Compose

Android няма единен API за модална презентация като iOS. Вместо това платформата предлага няколко механизма: DialogFragment за диалогови прозорци, BottomSheetDialogFragment за долни панели и Activity с флагове NEW_TASK и CLEAR_TOP за модални екрани. В Jetpack Compose се появи единен компонент Dialog за всички видове модални прозорци.

DialogFragment

DialogFragment — базовият клас за модални прозорци в Android SDK. Той управлява жизнения цикъл на диалога, обработва завъртане на екрана и запазва състояние. Фрагментът се показва над Activity, без да блокира навигационния стек. Затварянето се извършва чрез dismiss() или кликване извън областта на диалога, ако setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment показва модалния прозорец като панел, който се повдига отдолу. Този модел е популярен в Material Design за избор на опции, споделяне и бързи действия. BottomSheet може да бъде с фиксирана височина или разширяем (peek height + full height). В Compose се използва ModalBottomSheet от библиотеката Material3.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Модален формуляр", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Затваряне")
                }
            }
        }
    }
}

Най-добри практики за модална презентация

Модалните прозорци — мощен UX инструмент, но прекомерната им употреба влошава потребителското изживяване. Apple HIG и Google Material Design са съгласни в препоръките: модалността трябва да се прилага за фокусирани задачи и да не надвишава 20% от общия брой навигационни действия.

Кога да използвате модална презентация

Модалните прозорци са подходящи за сценарии: въвеждане на данни (регистрационни формуляри, профил), потвърждение (изтриване, изпращане), избор (избор на дата, файлов мениджър) и удостоверяване (OAuth, Firebase Auth). Ако задачата отнема по-малко от 30 секунди и изисква блокиране на контекст — изберете модалност.

Какво да избягвате

Не използвайте модална презентация за: последователно разглеждане на съдържание (използвайте Push), показване на грешки (използвайте Toast или Snackbar), реклами и промоционални оферти без изрично искане от потребителя. Material Design препоръчва избягване на вложени модални прозорци — това дезориентира потребителя и нарушава навигационната йерархия.

За модални прозорци с текстови полета задължително обработвайте загубата на фокус на клавиатурата. При поява на клавиатурата модалният прозорец трябва да се премести нагоре, за да вижда потребителят въведения текст. UIKeyboardWillShowNotification в iOS и adjustResize в Android решават този проблем.

Примери за код в Swift и Kotlin

Нека разгледаме имплементацията на модална презентация на двете платформи. Swift примерът показва настройка на UIModalPresentationStyle.pageSheet с делегат за обработка на затваряне. Kotlin примерът демонстрира DialogFragment с персонализиран layout и запазване на състояние.

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("Модалният прозорец е затворен")
    }
}

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