মোবাইল ডেভেলপমেন্টে 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 সর্বদা expanded অবস্থায় দেখানো হয় এবং স্পষ্টভাবে বন্ধ করার প্রয়োজন হয় — বাটন, কার্যকলাপ বা নীচে সোয়াইপের মাধ্যমে। 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-এ ব্যবহারকারীর মৌলিক প্রত্যাশা।