Modal Presentation mobil ishlab chiqishda: nima, ekran turlari

Modal Presentation nima?

Modal Presentation — bu navigatsiya namunasi bo'lib, unda yangi ekran joriy ekran ustida paydo bo'lib, vaqtincha ota-ona tarkibi bilan o'zaro aloqani bloklaydi. Foydalanuvchi oldingi holatga qaytish uchun modal vazifani aniq yakunlashi kerak (bekor qilish, saqlash, yopish).

Modallik kognitiv vazifani hal qiladi: foydalanuvchining diqqatini interfeysning qolgan qismidan chalg'itmasdan bitta harakatga jamlaydi. Bu ro'yxatdan o'tish formalari, tasdiqlash dialoglari, fayl tanlash va uchinchi tomon xizmatlari orqali autentifikatsiya uchun juda muhimdir. Apple-ning Human Interface Guidelines qo'llanmasi modallikni faqat ishni davom ettirishdan oldin yakunlash kerak bo'lgan vazifalar uchun ishlatishni tavsiya qiladi.

Veb modal oynalardan farqli o'laroq, mobil Modal Presentation to'liq ekranli (butun ekranni egallaydi) yoki qisman (Page Sheet, Bottom Sheet) bo'lishi mumkin. Turni tanlash vazifa kontekstiga va platforma kelishuvlariga bog'liq. iOS ko'pchilik stsenariylar uchun Page Sheet ga moyil, Full Screen ni video pleerlar va foto muharrirlar uchun qoldiradi.

Modal prezentatsiya Push-dan nimasi bilan farq qiladi?

Push Presentation (stack navigatsiyasi) ekranni navigatsiya stekiga qo'shadi va avtomatik ravishda orqaga tugmasini ko'rsatadi. Foydalanuvchi istalgan vaqtda oldingi ekranga qaytishi mumkin. Modal Presentation, aksincha, aniq yakunlashni talab qiladi: orqaga tugmasi yo mavjud emas, yoki modal oynani yopadi, oldingi ekranga qaytarmaydi.

Modal va push prezentatsiyasi o'rtasidagi asosiy farqlar: Modal Presentation ma'lumot yo'qotmasdan orqaga navigatsiyani bloklaydi, yopish uchun harakat talab qiladi (Save, Cancel, Done) va odatda alohida vazifani taqdim etadi. Push Presentation navigatsiya ierarxiyasini saqlaydi, avtomatik ravishda orqaga tugmasini qo'shadi va tarkibni ketma-ket ko'rish uchun mos keladi.

Amalda Modal va Push o'rtasidagi tanlov kontekstga bog'liq. Tavsiya etiladi modallikni foydalanuvchi davom ettirishdan oldin yakunlashi kerak bo'lgan vazifalar uchun, Push ni esa tarkibni ketma-ket o'rganish uchun ishlatish. Bir ekranda na'munalarni aralashtirish chalkashlikka olib keladi va UX ni yomonlashtiradi.

iOS-da modal prezentatsiya: UIKit va SwiftUI

iOS UIModalPresentationStyle enumeratsiyasi orqali bir nechta modal prezentatsiya uslublarini taklif qiladi. UIKit .fullScreen (to'liq ekran), .pageSheet (yuqorida bo'shliqli karta), .formSheet (iPad-da markazlashtirilgan oyna) va .automatic (kontekstga asoslangan tizim tanlovi) ni qo'llab-quvvatlaydi. iOS 13 dan boshlab standart uslub .automatic bo'ldi, u iPhone uchun .pageSheet ni tanlaydi.

UIViewController.present

UIKit-da modal prezentatsiya uchun asosiy metod — present(_:animated:completion:). Metodni chaqiruvchi kontroller presentingViewController, yangisi esa presentedViewController bo'ladi. Yopish dismiss(animated:completion:) orqali amalga oshiriladi. SwiftUI o'xshash xatti-harakat uchun .sheet modifikatorini taqdim etadi.

SwiftUI .sheet

SwiftUI ning deklarativ yondashuvi .sheet va .fullScreenCover modifikatorlaridan foydalanadi. Birinchisi Page Sheet yaratadi, ikkinchisi — to'liq ekranli modal prezentatsiya. Ikkalasi modal oynaning ko'rinishini boshqaradigan Bool yoki identifikatsiya qilinadigan ob'ektga binding qabul qiladi. Yopish binding ni false ga o'rnatish yoki environment dan dismiss ni chaqirish orqali sodir bo'ladi.

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

    var body: some View {
        Button("Formani ochish") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

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

Android-da modal prezentatsiya: Fragment va Compose

Android iOS kabi yagona modal prezentatsiya API siga ega emas. Buning o'rniga platforma bir nechta mexanizmlarni taklif qiladi: dialog oynalari uchun DialogFragment, pastki panellar uchun BottomSheetDialogFragment va modal ekranlar uchun NEW_TASK va CLEAR_TOP flaglari bilan Activity. Jetpack Compose da barcha turdagi modal oynalar uchun yagona Dialog komponenti paydo bo'ldi.

DialogFragment

DialogFragment — Android SDK da modal oynalar uchun asosiy sinf. U dialogning hayot aylanishini boshqaradi, ekran aylanishini qayta ishlaydi va holatni saqlaydi. Fragment navigatsiya stekini bloklamasdan Activity ustida ko'rsatiladi. Yopish dismiss() yoki setCancelable(true) bo'lganda dialog maydonidan tashqariga bosish orqali amalga oshiriladi.

Modal Bottom Sheet

BottomSheetDialogFragment modal oynani pastdan ko'tariladigan panel shaklida ko'rsatadi. Bu namuna Material Design da variantlarni tanlash, ulashish va tezkor harakatlar uchun mashhurdir. BottomSheet sobit balandlikda yoki kengaytiriladigan (peek height + full height) bo'lishi mumkin. Compose da Material3 kutubxonasidan ModalBottomSheet ishlatiladi.

@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("Yopish")
                }
            }
        }
    }
}

Modal prezentatsiyaning eng yaxshi amaliyotlari

Modal oynalar — kuchli UX vositasi, lekin ularning haddan tashqari ishlatilishi foydalanuvchi tajribasini yomonlashtiradi. Apple HIG va Google Material Design tavsiyalarda bir fikrda: modallik diqqat talab qiladigan vazifalar uchun qo'llanilishi va navigatsiya harakatlarining umumiy sonining 20% dan oshmasligi kerak.

Modal prezentatsiyadan qachon foydalanish kerak

Modal oynalar quyidagi stsenariylar uchun mos keladi: ma'lumot kiritish (ro'yxatdan o'tish formalari, profil), tasdiqlash (o'chirish, jo'natish), tanlash (sana tanlagich, fayl menejeri) va autentifikatsiya (OAuth, Firebase Auth). Agar vazifa 30 soniyadan kam davom etsa va kontekst blokadasini talab qilsa — modallikni tanlang.

Nimadan qochish kerak

Modal prezentatsiyadan foydalanmang: tarkibni ketma-ket ko'rish uchun (Push dan foydalaning), xatolarni ko'rsatish uchun (Toast yoki Snackbar dan foydalaning), foydalanuvchining aniq roziligisiz reklama va promo takliflar uchun. Material Design ichma-ich modal oynalardan qochishni tavsiya qiladi — bu foydalanuvchini chalkashtiradi va navigatsiya ierarxiyasini buzadi.

Matn maydonlari bo'lgan modal oynalar uchun klaviatura fokus yo'qotilishini albatta qayta ishlang. Klaviatura paydo bo'lganda, modal oyna yuqoriga siljishi kerak, shunda foydalanuvchi kiritayotgan matnni ko'radi. iOS da UIKeyboardWillShowNotification va Android da adjustResize bu muammoni hal qiladi.

Swift va Kotlin-dagi kod misollari

Ikkala platformada modal prezentatsiyaning amalga oshirilishini ko'rib chiqaylik. Swift misoli yopishni boshqarish uchun delegat bilan UIModalPresentationStyle.pageSheet sozlamasini ko'rsatadi. Kotlin misoli maxsus layout va holatni saqlash bilan DialogFragment ni namoyish etadi.

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 oyna yopildi")
    }
}

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