Modal Presentation mobil inkişafda: nədir, ekran növləri

Modal Presentation nədir?

Modal Presentation — naviqasiya nümunəsidir, bu zaman yeni ekran cari ekranın üzərində görünür, müvəqqəti olaraq valideyn məzmunu ilə qarşılıqlı əlaqəni bloklayır. İstifadəçi əvvəlki vəziyyətə qayıtmaq üçün modal tapşırığı açıq şəkildə tamamlamalıdır (ləğv etmə, yadda saxlama, bağlama).

Modallıq idrak tapşırığını həll edir: istifadəçinin diqqətini interfeysin qalan hissəsindən yayındırmadan bir hərəkətə cəmləyir. Bu, qeydiyyat formaları, təsdiq dialoqları, fayl seçimi və üçüncü tərəf xidmətləri vasitəsilə autentifikasiya üçün kritik əhəmiyyətlidir. Apple-ın Human Interface Guidelines təlimatları modallığı yalnız işə davam etməzdən əvvəl tamamlanması tələb olunan tapşırıqlar üçün istifadə etməyi tövsiyə edir.

Veb modal pəncərələrdən fərqli olaraq, mobil Modal Presentation tam ekranlı (bütün ekranı tutur) və ya qismən (Page Sheet, Bottom Sheet) ola bilər. Növün seçimi tapşırığın kontekstindən və platforma razılaşmalarından asılıdır. iOS əksər ssenarilər üçün Page Sheet-ə meyl edir, Full Screen-i video pleyerlər və foto redaktorlar üçün saxlayır.

Modal prezentasiya Push-dan nə ilə fərqlənir?

Push Presentation (yığın naviqasiyası) ekranı naviqasiya yığınına əlavə edir və avtomatik olaraq geri düyməsini göstərir. İstifadəçi istənilən vaxt əvvəlki ekrana qayıda bilər. Modal Presentation isə açıq şəkildə tamamlanma tələb edir: geri düyməsi ya yoxdur, ya da modal pəncərəni bağlayır, əvvəlki ekrana qayıtmır.

Modal və push prezentasiyası arasında əsas fərqlər: Modal Presentation məlumat itkisi olmadan geri naviqasiyanı bloklayır, bağlanmaq üçün hərəkət tələb edir (Save, Cancel, Done) və adətən ayrıca tapşırıq təqdim edir. Push Presentation naviqasiya iyerarxiyasını qoruyur, avtomatik olaraq geri düyməsi əlavə edir və məzmunun ardıcıl baxışı üçün uyğundur.

Təcrübədə Modal və Push arasında seçim kontekstdən asılıdır. Tövsiyə olunur modallığı istifadəçinin davam etməzdən əvvəl tamamlamalı olduğu tapşırıqlar üçün, Push-u isə məzmunun ardıcıl öyrənilməsi üçün istifadə etmək. Bir ekranda nümunələri qarışdırmaq çaşqınlığa səbəb olur və UX-i pisləşdirir.

iOS-da modal prezentasiya: UIKit və SwiftUI

iOS UIModalPresentationStyle enumu vasitəsilə bir neçə modal prezentasiya stili təklif edir. UIKit .fullScreen (tam ekran), .pageSheet (yuxarıda boşluq olan kart), .formSheet (iPad-da mərkəzləşdirilmiş pəncərə) və .automatic (kontekst əsasında sistem seçimi) dəstəkləyir. iOS 13-dən etibarən defolt stil .automatic oldu, iPhone üçün .pageSheet seçir.

UIViewController.present

UIKit-də modal prezentasiya üçün əsas metod — present(_:animated:completion:). Metodu çağıran kontroller presentingViewController, yenisi isə presentedViewController olur. Bağlanma dismiss(animated:completion:) vasitəsilə həyata keçirilir. SwiftUI oxşar davranış üçün .sheet modifikatorunu təqdim edir.

SwiftUI .sheet

SwiftUI-nin deklarativ yanaşması .sheet və .fullScreenCover modifikatorlarından istifadə edir. Birincisi Page Sheet yaradır, ikincisi tam ekranlı modal prezentasiya yaradır. Hər ikisi modal pəncərənin görünməsini idarə edən Bool və ya identifikasiya olunan obyektə binding qəbul edir. Bağlanma binding-in false-a təyin edilməsi və ya environment-dən dismiss çağırışı ilə baş verir.

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

    var body: some View {
        Button("Formanı aç") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

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

Android-də modal prezentasiya: Fragment və Compose

Android-də iOS kimi vahid modal prezentasiya API-si yoxdur. Bunun əvəzinə platforma bir neçə mexanizm təklif edir: dialoq pəncərələri üçün DialogFragment, alt panellər üçün BottomSheetDialogFragment və modal ekranlar üçün NEW_TASK və CLEAR_TOP flagları olan Activity. Jetpack Compose-da bütün növ modal pəncərələr üçün vahid Dialog komponenti meydana çıxdı.

DialogFragment

DialogFragment — Android SDK-da modal pəncərələr üçün əsas sinif. O, dialoqun həyat dövrünü idarə edir, ekranın dönməsini emal edir və vəziyyəti saxlayır. Fragment naviqasiya yığınını bloklamadan Activity-nin üzərində göstərilir. Bağlanma dismiss() və ya setCancelable(true) olduqda dialoq sahəsindən kənara klikləmə ilə həyata keçirilir.

Modal Bottom Sheet

BottomSheetDialogFragment modal pəncərəni aşağıdan qalxan panel şəklində göstərir. Bu nümunə Material Design-da seçim, paylaşma və sürətli hərəkətlər üçün populyardır. BottomSheet sabit hündürlükdə və ya genişlənən (peek height + full height) ola bilər. Compose-da Material3 kitabxanasından ModalBottomSheet istifadə olunur.

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

Modal prezentasiyanın ən yaxşı təcrübələri

Modal pəncərələr — güclü UX aləti, lakin onların həddindən artıq istifadəsi istifadəçi təcrübəsini pisləşdirir. Apple HIG və Google Material Design tövsiyələrdə həmfikirdir: modallıq diqqət tələb edən tapşırıqlar üçün tətbiq edilməli və naviqasiya hərəkətlərinin ümumi sayının 20%-dən çox olmamalıdır.

Modal prezentasiyadan nə vaxt istifadə etməli

Modal pəncərələr aşağıdakı ssenarilər üçün uyğundur: məlumat daxil etmə (qeydiyyat formaları, profil), təsdiqləmə (silme, göndərmə), seçim (tarix seçici, fayl meneceri) və autentifikasiya (OAuth, Firebase Auth). Əgər tapşırıq 30 saniyədən az çəkirsə və kontekst blokadası tələb edirsə — modallığı seçin.

Nədən qaçınmalı

Modal prezentasiyadan istifadə etməyin: məzmunun ardıcıl baxışı üçün (Push istifadə edin), səhvlərin göstərilməsi üçün (Toast və ya Snackbar istifadə edin), reklam və promosyon təklifləri üçün istifadəçinin açıq razılığı olmadan. Material Design iç-içə modal pəncərələrdən qaçınmağı tövsiyə edir — bu istifadəçini çaşdırır və naviqasiya iyerarxiyasını pozur.

Mətn sahələri olan modal pəncərələr üçün klaviatura fokus itkisini mütləq emal edin. Klaviatura görünəndə modal pəncərə yuxarı sürüşməlidir ki, istifadəçi daxil etdiyi mətni görsün. iOS-da UIKeyboardWillShowNotification və Android-də adjustResize bu problemi həll edir.

Swift və Kotlin-də kod nümunələri

Hər iki platformada modal prezentasiyanın tətbiqinə baxaq. Swift nümunəsi bağlanmanı emal etmək üçün deleqatla UIModalPresentationStyle.pageSheet konfiqurasiyasını göstərir. Kotlin nümunəsi fərdi layout və vəziyyətin saxlanması ilə DialogFragment-i nümayiş etdirir.

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("Modal bağlandı")
    }
}

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