মোবাইল ডেভেলপমেন্টে মোডাল প্রেজেন্টেশন: এটি কী, স্ক্রিনের প্রকারভেদ

মোডাল প্রেজেন্টেশন কী?

মোডাল প্রেজেন্টেশন একটি নেভিগেশন প্যাটার্ন যেখানে একটি নতুন স্ক্রিন বর্তমান স্ক্রিনের উপরে প্রদর্শিত হয়, অস্থায়ীভাবে প্যারেন্ট বিষয়বস্তুর সাথে মিথস্ক্রিয়াকে ব্লক করে। পূর্ববর্তী অবস্থায় ফিরে যাওয়ার জন্য ব্যবহারকারীকে স্পষ্টভাবে মোডাল কাজটি (বাতিল, সংরক্ষণ, বন্ধ) সম্পূর্ণ করতে হবে।

মোডালিটি একটি জ্ঞানীয় কাজ সমাধান করে: এটি বাকি ইন্টারফেস থেকে বিভ্রান্তি ছাড়াই একটি একক কর্মে ব্যবহারকারীর মনোযোগ কেন্দ্রীভূত করে। এটি নিবন্ধন ফর্ম, নিশ্চিতকরণ ডায়ালগ, ফাইল নির্বাচন এবং তৃতীয়-পক্ষের পরিষেবার মাধ্যমে অনুমোদনের জন্য অত্যন্ত গুরুত্বপূর্ণ। 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 হয়ে যায়, এবং নতুনটি menjadi 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()
        }
    }
}