मोबाइल डेवलपमेंट में मॉडल प्रेजेंटेशन: यह क्या है, स्क्रीन के प्रकार

मॉडल प्रेजेंटेशन क्या है?

मॉडल प्रेजेंटेशन एक नेविगेशन पैटर्न है जहाँ एक नई स्क्रीन वर्तमान स्क्रीन के ऊपर दिखाई देती है, अस्थायी रूप से पैरेंट सामग्री के साथ इंटरैक्शन को अवरुद्ध करती है। उपयोगकर्ता को पिछली स्थिति में लौटने के लिए मॉडल कार्य (रद्द करें, सहेजें, बंद करें) को स्पष्ट रूप से पूरा करना होगा।

मॉडलिटी एक संज्ञानात्मक कार्य को हल करती है: यह उपयोगकर्ता का ध्यान शेष इंटरफ़ेस से विचलित हुए बिना एक क्रिया पर केंद्रित करती है। यह पंजीकरण फॉर्म, पुष्टिकरण संवाद, फ़ाइल चयन और तृतीय-पक्ष सेवाओं के माध्यम से प्राधिकरण के लिए अत्यंत महत्वपूर्ण है। Apple के Human Interface Guidelines केवल उन कार्यों के लिए मॉडलिटी का उपयोग करने की सलाह देते हैं जिन्हें आगे बढ़ने से पहले पूरा करना आवश्यक है।

वेब मॉडल विंडो के विपरीत, मोबाइल मॉडल प्रेजेंटेशन पूर्ण-स्क्रीन (पूरी स्क्रीन पर कब्जा) या आंशिक (Page Sheet, Bottom Sheet) हो सकता है। प्रकार का चयन कार्य संदर्भ और प्लेटफ़ॉर्म परंपराओं पर निर्भर करता है। iOS अधिकांश परिदृश्यों के लिए Page Sheet की ओर झुकता है, Full Screen को वीडियो प्लेयर और फ़ोटो संपादकों के लिए छोड़ता है।

मॉडल प्रेजेंटेशन Push से कैसे भिन्न है?

Push Presentation (स्टैक नेविगेशन) नेविगेशन स्टैक में एक स्क्रीन जोड़ता है और स्वचालित रूप से एक बैक बटन दिखाता है। उपयोगकर्ता किसी भी समय पिछली स्क्रीन पर लौट सकता है। मॉडल प्रेजेंटेशन, इसके विपरीत, स्पष्ट पूर्णता की आवश्यकता होती है: बैक बटन या तो अनुपस्थित होता है या पिछली स्क्रीन पर लौटने के बजाय मॉडल विंडो को बंद कर देता है।

मॉडल और Push प्रेजेंटेशन के बीच मुख्य अंतर: मॉडल प्रेजेंटेशन डेटा हानि के बिना पिछड़े नेविगेशन को अवरुद्ध करता है, बंद करने के लिए कार्रवाई की आवश्यकता होती है (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 बनाता है, दूसरा पूर्ण-स्क्रीन मॉडल प्रेजेंटेशन बनाता है। दोनों एक Bool या पहचाने जाने योग्य ऑब्जेक्ट पर बाइंडिंग स्वीकार करते हैं जो मॉडल विंडो की दृश्यता को नियंत्रित करता है। बंद करना तब होता है जब बाइंडिंग को false पर सेट किया जाता है या पर्यावरण से dismiss कॉल किया जाता है।

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 के पास iOS की तरह मॉडल प्रेजेंटेशन के लिए एक एकल API नहीं है। इसके बजाय, प्लेटफ़ॉर्म कई तंत्र प्रदान करता है: संवाद विंडो के लिए DialogFragment, निचले पैनल के लिए BottomSheetDialogFragment, और मॉडल स्क्रीन के लिए NEW_TASK और CLEAR_TOP फ़्लैग वाली Activity। Jetpack Compose ने सभी प्रकार की मॉडल विंडो के लिए एक एकीकृत Dialog घटक पेश किया।

DialogFragment

DialogFragment Android SDK में मॉडल विंडो के लिए आधार वर्ग है। यह संवाद के जीवनचक्र का प्रबंधन करता है, स्क्रीन रोटेशन को संभालता है, और स्थिति सहेजता है। फ़्रैगमेंट Activity के ऊपर नेविगेशन स्टैक को अवरुद्ध किए बिना प्रदर्शित होता है। बंद करना dismiss() के माध्यम से या यदि setCancelable(true) है तो संवाद क्षेत्र के बाहर टैप करके किया जाता है।

मॉडल बॉटम शीट

BottomSheetDialogFragment एक मॉडल विंडो को नीचे से उठने वाले पैनल के रूप में प्रदर्शित करता है। यह पैटर्न Material Design में विकल्प चयन, साझाकरण और त्वरित कार्रवाइयों के लिए लोकप्रिय है। BottomSheet निश्चित ऊंचाई या विस्तार योग्य (पीक ऊंचाई + पूर्ण ऊंचाई) हो सकता है। Compose में, Material3 लाइब्रेरी से ModalBottomSheet का उपयोग किया जाता है।

@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 नेस्टेड मॉडल विंडो से बचने की सलाह देता है, क्योंकि इससे उपयोगकर्ता भ्रमित होता है और नेविगेशन पदानुक्रम बाधित होता है।

टेक्स्ट फ़ील्ड वाली मॉडल विंडो के लिए, कीबोर्ड फोकस हानि को संभालना सुनिश्चित करें। जब कीबोर्ड दिखाई देता है, तो मॉडल विंडो को ऊपर की ओर खिसकना चाहिए ताकि उपयोगकर्ता दर्ज किए जा रहे टेक्स्ट को देख सके। iOS में UIKeyboardWillShowNotification और Android में adjustResize इस कार्य को हल करते हैं।

Swift और Kotlin में कोड उदाहरण

आइए दोनों प्लेटफ़ॉर्म पर मॉडल प्रेजेंटेशन के कार्यान्वयन को देखें। Swift उदाहरण बंद करने को संभालने के लिए एक डेलिगेट के साथ UIModalPresentationStyle.pageSheet कॉन्फ़िगरेशन दिखाता है। Kotlin उदाहरण कस्टम लेआउट और स्थिति संरक्षण के साथ DialogFragment प्रदर्शित करता है।

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