मोबाइल डेवलपमेंट में Sheet — यह क्या है, प्रकार और यह कैसे काम करता है

मोबाइल ऐप्लिकेशन में Sheet क्या है

Sheet एक सतही स्तर का UI घटक है जो स्क्रीन के नीचे से ऊपर की ओर खिसकता है और उपयोगकर्ता को वर्तमान स्क्रीन से हटाए बिना अतिरिक्त सामग्री या कार्रवाइयाँ प्रदर्शित करता है। पूर्ण स्क्रीन संक्रमणों के विपरीत, Sheet संदर्भ बनाए रखता है: उपयोगकर्ता पृष्ठभूमि स्क्रीन देखता है और समझता है कि Sheet कहाँ से आया है।

Sheet की संरचना समायोज्य ऊँचाई वाले कंटेनर पर आधारित है। न्यूनतम स्थिति (collapsed) में, केवल सामग्री का एक भाग दिखाई देता है — आमतौर पर एक शीर्षक या छोटा पैनल। उपयोगकर्ता Sheet को ऊपर खींचकर विस्तारित (expanded) कर सकता है या नीचे स्वाइप करके बंद कर सकता है। यह व्यवहार एक भौतिक कागज़ की शीट की याद दिलाता है जिसे ढेर के नीचे से बाहर निकाला जाता है — इसलिए इसका नाम Sheet है।

Google अपने Material Design 3 दिशानिर्देशों (2024) में Sheet के उपयोग के दो प्रमुख परिदृश्य बताता है: अतिरिक्त कार्रवाइयाँ प्रदर्शित करना जो मुख्य टूलबार पर फ़िट नहीं होतीं, और एक अलग स्क्रीन पर नेविगेट किए बिना फ़ॉर्म या विस्तृत जानकारी दिखाना। iOS पर, Apple ने iOS 15 से UISheetPresentationController के माध्यम से Sheet के लिए सिस्टम स्तर का समर्थन जोड़ा, जो पैटर्न की सार्वभौमिकता की पुष्टि करता है।

Bottom Sheet के प्रकार: मानक, मोडल और विस्तारित

Material Design तीन प्रकार के Bottom Sheet परिभाषित करता है, प्रत्येक का अपना व्यवहार और उपयोग क्षेत्र होता है। सही प्रकार चुनना सीधे उपयोगकर्ता अनुभव और प्लेटफ़ॉर्म दिशानिर्देशों के अनुपालन को प्रभावित करता है।

मानक Bottom Sheet

मानक Bottom Sheet एक गैर-मोडल घटक है: उपयोगकर्ता Sheet को बंद किए बिना पृष्ठभूमि स्क्रीन के साथ इंटरैक्ट कर सकता है। उदाहरण के लिए, पृष्ठभूमि में उत्पाद सूची ब्राउज़ करते समय, उपयोगकर्ता Bottom Sheet में फ़िल्टर देखता है और पैनल को बंद किए बिना उन्हें बदल सकता है। Sheet अपनी ऊँचाई को सामग्री के अनुसार समायोजित करता है — स्क्रीन के 30% से 90% तक।

मानक Bottom Sheet पृष्ठभूमि को ब्लॉक नहीं करता और मुख्य सामग्री के साथ इंटरैक्शन की अनुमति देता है। यह मोडल Sheet से मुख्य अंतर है, जिसे जारी रखने के लिए अनिवार्य कार्रवाई की आवश्यकता होती है। मानक Sheet का उपयोग करें जब अतिरिक्त जानकारी मुख्य परिदृश्य के लिए महत्वपूर्ण न हो।

मोडल Bottom Sheet

मोडल Bottom Sheet पृष्ठभूमि स्क्रीन के साथ इंटरैक्शन को तब तक ब्लॉक करता है जब तक उपयोगकर्ता Sheet के अंदर कोई कार्रवाई नहीं करता। ऐसी Sheet हमेशा विस्तारित स्थिति में दिखाई जाती है और स्पष्ट रूप से बंद करने की आवश्यकता होती है — बटन, कार्रवाई या नीचे स्वाइप के माध्यम से। Material Design मोडल Sheet को लॉगिन फ़ॉर्म, पुष्टिकरण और महत्वपूर्ण सेटिंग्स के लिए अनुशंसित करता है।

Android पर, मोडल Bottom Sheet को BottomSheetDialogFragment के माध्यम से लागू किया जाता है, जो स्वचालित रूप से पृष्ठभूमि को ब्लॉक करता है। iOS पर, समान व्यवहार .mediumDetent पैरामीटर के साथ UISheetPresentationController के मोडल वेरिएंट द्वारा प्रदान किया जाता है। मोडल Sheet का उपयोग केवल तभी करें जब संदर्भ में उपयोगकर्ता का ध्यान आवश्यक हो।

विस्तारित Bottom Sheet

विस्तारित Bottom Sheet मानक और मोडल के गुणों को जोड़ता है: यह collapsed स्थिति में गैर-मोडल के रूप में शुरू होता है, लेकिन ऊपर खींचने पर मोडल बन जाता है। व्यवहार में, इसका मतलब है कि उपयोगकर्ता पहले सामग्री पर एक नज़र डाल सकता है और फिर निर्णय ले सकता है — विस्तृत अध्ययन के लिए Sheet का विस्तार करें या इसे बंद करें।

यह पैटर्न विशेष रूप से मानचित्र और नेविगेटर में लोकप्रिय है, जहाँ निचला पैनल मार्ग बिंदु के बारे में संक्षिप्त जानकारी दिखाता है, और ऊपर स्वाइप करने पर विवरण के साथ विस्तारित होता है। Google Maps स्थानों और मार्गों के बारे में जानकारी प्रदर्शित करने के लिए इसी विस्तारित Sheet का उपयोग करता है।

Android पर Bottom Sheet: Material Design और Jetpack Compose

Android SDK Bottom Sheet को लागू करने के लिए कई API प्रदान करता है, क्लासिक View-आधारित दृष्टिकोण से लेकर आधुनिक Jetpack Compose तक। Android के लिए Material Components लाइब्रेरी में BottomSheetDialogFragment और BottomSheetBehavior की तैयार इम्प्लीमेंटेशन शामिल हैं।

XML लेआउट में BottomSheetBehavior

BottomSheetBehavior Material Components की एक क्लास है जो किसी भी View से जुड़ती है और स्क्रीन पर उसकी स्थिति को नियंत्रित करती है। डेवलपर तीन स्थितियाँ निर्धारित करता है: STATE_COLLAPSED, STATE_EXPANDED और STATE_HIDDEN। Behavior स्वचालित रूप से ड्रैग जेस्चर और एनिमेशन को संभालता है।

val sheet = findViewById<View>(R.id.bottom_sheet)
val behavior = BottomSheetBehavior.from(sheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
behavior.peekHeight = 200

Jetpack Compose में Bottom Sheet

Jetpack Compose Material 3 के ModalBottomSheet घटक के माध्यम से अधिक घोषणात्मक API प्रदान करता है। View-आधारित दृष्टिकोण के विपरीत, Compose में Bottom Sheet एक composable फ़ंक्शन है जो स्थिति और सामग्री को स्वीकार करता है। Sheet स्वचालित रूप से प्रकट होने, छिपने और खींचने पर ऊँचाई में परिवर्तन को एनिमेट करता है।

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("फ़िल्टर")
        Button(onClick = onDismiss) { Text("लागू करें") }
    }
}

मोडल परिदृश्यों के लिए BottomSheetDialogFragment

BottomSheetDialogFragment एक विशेष DialogFragment है जो Bottom Sheet के रूप में प्रदर्शित होता है। यह स्वचालित रूप से मोडलिटी, जीवनचक्र और कॉन्फ़िगरेशन परिवर्तनों को संभालता है। डेवलपर को केवल onCreateView को ओवरराइड करने और Sheet का लेआउट वापस करने की आवश्यकता है। Google दस्तावेज़ीकरण (Android Developers, 2024) के अनुसार, BottomSheetDialogFragment क्लासिक Android में मोडल Bottom Sheets के लिए अनुशंसित तरीका है।

iOS पर Sheet: UISheetPresentationController और SwiftUI

Apple ने iOS 15 से UISheetPresentationController के माध्यम से Sheet के लिए सिस्टम स्तर का समर्थन पेश किया। इससे पहले, डेवलपर कस्टम ट्रांज़िशन या तृतीय-पक्ष लाइब्रेरी के माध्यम से मैन्युअल रूप से Bottom Sheet लागू करते थे। Apple का मूल Sheet डिटेंट (detents) — पूर्वनिर्धारित विस्तार स्तरों का समर्थन करता है।

UIKit में UISheetPresentationController

UISheetPresentationController एक अंतर्निहित प्रस्तुति नियंत्रक है जो View Controller को Sheet के रूप में प्रदर्शित करता है। डेवलपर डिटेंट की एक सरणी निर्दिष्ट करता है — ऊँचाई मान जिन पर Sheet रुक सकता है। iOS 16 ने मनमानी ऊँचाई के साथ कस्टम डिटेंट जोड़े। Apple प्राथमिक के रूप में medium (.medium) और large (.large) डिटेंट का उपयोग करने की अनुशंसा करता है।

let viewController = MySheetViewController()
if let sheet = viewController.sheetPresentationController {
    sheet.detents = [.medium, .large]
    sheet.prefersGrabberVisible = true
    sheet.preferredCornerRadius = 16
}
present(viewController, animated: true)

SwiftUI में .sheet मॉडिफ़ायर

SwiftUI .sheet मॉडिफ़ायर प्रदान करता है, जो Sheet प्रदर्शन को स्थिति से बाँधता है। जब कोई published वेरिएबल true हो जाता है, SwiftUI स्वचालित रूप से Sheet दिखाता है। SwiftUI iOS 16 में जोड़े गए .presentationDetents मॉडिफ़ायर के माध्यम से भी डिटेंट का समर्थन करता है।

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

    var body: some View {
        Button("Sheet दिखाएँ") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क में Sheet: Flutter और React Native

क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क भी Bottom Sheet का समर्थन करते हैं, लक्ष्य प्लेटफ़ॉर्म के अनुसार व्यवहार को अनुकूलित करते हैं। Flutter और React Native विभिन्न स्तरों की लचीलापन के साथ अंतर्निहित और कस्टम इम्प्लीमेंटेशन प्रदान करते हैं।

Flutter में Bottom Sheet

Flutter SDK में Bottom Sheet प्रदर्शित करने के दो तरीके हैं: showBottomSheet (मानक) और showModalBottomSheet (मोडल)। Flutter में Material Design Android के समान सिद्धांतों का पालन करता है — Sheet नीचे से दिखाई देता है, ड्रैगिंग का समर्थन करता है और समायोज्य ऊँचाई रखता है। डिटेंट के साथ विस्तारित व्यवहार के लिए DraggableScrollableSheet का उपयोग किया जाता है।

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("Sheet सामग्री"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("बंद करें")
                )
            ]
        )
    );
})

React Native में Bottom Sheet

React Native के कोर में कोई अंतर्निहित Bottom Sheet घटक नहीं है, इसलिए डेवलपर तृतीय-पक्ष लाइब्रेरी का उपयोग करते हैं। सबसे लोकप्रिय @gorhom/bottom-sheet है (GitHub पर 7 हज़ार से अधिक स्टार, 2024)। यह स्नैप पॉइंट, एनिमेशन और स्टिकी हेडर के समर्थन के साथ जेस्चर-संचालित Bottom Sheet प्रदान करता है। लाइब्रेरी 60 FPS प्रदर्शन के लिए Reanimated 2 और Gesture Handler पर बनाई गई है।

सर्वोत्तम अभ्यास और सामान्य गलतियाँ

Bottom Sheet के सही उपयोग के लिए प्लेटफ़ॉर्म दिशानिर्देशों का पालन करना और उन परिदृश्यों को समझना आवश्यक है जहाँ Sheet उपयुक्त है। आइए Sheet डिज़ाइन करते समय मुख्य अनुशंसाओं और सामान्य गलतियों की समीक्षा करें।

Bottom Sheet का उपयोग कब करें

Bottom Sheet उन कार्रवाइयों के लिए सर्वोत्तम है जो स्क्रीन पर मुख्य सामग्री के अतिरिक्त हैं। फ़िल्टर, सॉर्टिंग, विकल्प चयन, आइटम के बारे में संक्षिप्त जानकारी — विशिष्ट परिदृश्य। Material Design उन टूल के लिए Bottom Sheet का उपयोग करने की अनुशंसा करता है जिन्हें पूरी स्क्रीन नहीं लेनी चाहिए लेकिन Action Sheet या Popup Menu से अधिक स्थान की आवश्यकता होती है।

Bottom Sheet का उपयोग कब न करें

महत्वपूर्ण चेतावनियों या त्रुटियों के लिए Bottom Sheet का उपयोग न करें — इसके लिए डायलॉग विंडो अधिक उपयुक्त हैं। बड़ी संख्या में इनपुट फ़ील्ड वाली Sheets से बचें जिनमें स्क्रॉल करने की आवश्यकता होती है: उपयोगकर्ता को कीबोर्ड तक पहुँचने में कठिनाई होती है और संदर्भ खो जाता है। यदि Sheet में सात से अधिक क्रिया आइटम हैं, तो Sheet के बजाय एक अलग स्क्रीन पर विचार करें।

गलती: बहुत ऊँचा collapsed मोड

एक सामान्य गलती peekHeight (संक्षिप्त स्थिति में ऊँचाई) को स्क्रीन के 40% से अधिक निर्धारित करना है। उपयोगकर्ता यह नहीं समझ पाता कि वह Sheet को पूरी तरह देख रहा है या इसे विस्तारित किया जा सकता है। Material Design स्क्रीन की ऊँचाई के 15-30% के भीतर peekHeight की अनुशंसा करता है ताकि सामग्री का एक ध्यान देने योग्य भाग छिपा रहे और ड्रैगिंग के लिए प्रेरित करे।

गलती: iOS पर स्वाइप जेस्चर को अनदेखा करना

iOS पर, उपयोगकर्ता उम्मीद करते हैं कि Sheet को किसी भी स्थिति से नीचे स्वाइप करके बंद किया जा सकता है। यदि आप इस जेस्चर को अक्षम करते हैं (UISheetPresentationController.prefersEdgeAttachedInCompactHeight के माध्यम से), तो उपयोगकर्ता Sheet को परिचित तरीके से बंद करने का प्रयास करते समय निराशा का अनुभव करता है। Apple Human Interface Guidelines (2024) इस बात पर ज़ोर देते हैं कि स्वाइप टू डिसमिस iOS पर उपयोगकर्ता की मूलभूत अपेक्षा है।