موبائل ڈویلپمنٹ میں Modal Presentation: یہ کیا ہے، اسکرین کی اقسام

Modal Presentation کیا ہے؟

Modal Presentation — نیویگیشن کا ایک پیٹرن ہے جس میں نیا اسکرین موجودہ کے اوپر ظاہر ہوتا ہے، عارضی طور پر والدین کے مواد کے ساتھ تعامل کو بلاک کرتا ہے۔ صارف کو پچھلی حالت میں واپس جانے کے لیے موڈل کام کو واضح طور پر مکمل کرنا ہوگا (منسوخ، محفوظ، بند)۔

موڈلٹی ایک علمی کام حل کرتی ہے: یہ صارف کی توجہ ایک عمل پر مرکوز کرتی ہے بغیر باقی انٹرفیس سے ہٹائے۔ یہ رجسٹریشن فارمز، تصدیقی ڈائیلاگز، فائل کے انتخاب اور فریق ثالث سروسز کے ذریعے لاگ ان کے لیے انتہائی اہم ہے۔ Human Interface Guidelines ایپل ان کاموں کے لیے موڈلٹی استعمال کرنے کی سفارش کرتے ہیں جنہیں کام جاری رکھنے سے پہلے مکمل کرنا ضروری ہو۔

ویب موڈل ونڈوز کے برعکس، موبائل Modal Presentation مکمل اسکرین (پوری اسکرین پر قبضہ) یا جزوی (Page Sheet, Bottom Sheet) ہو سکتی ہے۔ قسم کا انتخاب کام کے سیاق و سباق اور پلیٹ فارم کے معاہدوں پر منحصر ہے۔ iOS زیادہ تر منظرناموں کے لیے Page Sheet کی طرف جھکتا ہے، Full Screen کو ویڈیو پلیئرز اور فوٹو ایڈیٹرز کے لیے چھوڑتا ہے۔

موڈل پریزنٹیشن Push سے کیسے مختلف ہے؟

Push Presentation (اسٹیک نیویگیشن) اسکرین کو نیویگیشن اسٹیک میں شامل کرتی ہے اور خود بخود بیک بٹن دکھاتی ہے۔ صارف کسی بھی وقت پچھلی اسکرین پر واپس جا سکتا ہے۔ اس کے برعکس، Modal Presentation واضح تکمیل کا تقاضا کرتی ہے: بیک بٹن یا تو موجود نہیں ہوتا، یا موڈل ونڈو کو بند کرتا ہے، پچھلی اسکرین پر واپس نہیں جاتا۔

موڈل اور push پریزنٹیشن کے درمیان بنیادی فرق: Modal Presentation ڈیٹا کے ضیاع کے بغیر بیک نیویگیشن کو بلاک کرتی ہے، بند کرنے کے لیے ایک عمل کی ضرورت ہوتی ہے (Save, Cancel, Done) اور عام طور پر ایک الگ کام پیش کرتی ہے۔ Push Presentation نیویگیشن کی ترتیب کو محفوظ رکھتی ہے، خود بخود واپسی کا بٹن شامل کرتی ہے اور مواد کے ترتیب وار دیکھنے کے لیے موزوں ہے۔

عملی طور پر Modal اور Push کے درمیان انتخاب سیاق و سباق پر منحصر ہے۔ سفارش کی جاتی ہے ان کاموں کے لیے موڈلٹی استعمال کرنے کی جنہیں صارف کو جاری رکھنے سے پہلے مکمل کرنا ہو، اور مواد کے ترتیب وار مطالعے کے لیے Push۔ ایک ہی اسکرین پر پیٹرنز کا مرکب الجھن پیدا کرتا ہے اور UX کو خراب کرتا ہے۔

iOS میں موڈل پریزنٹیشن: UIKit اور SwiftUI

iOS موڈل پریزنٹیشن کے کئی انداز پیش کرتا ہے — enum 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 یا ایک شناختی آبجیکٹ پر binding قبول کرتے ہیں جو موڈل ونڈو کی نمائش کو کنٹرول کرتا ہے۔ بند کرنا binding کو false پر سیٹ کرنے یا environment سے 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) ہے۔

Modal Bottom Sheet

BottomSheetDialogFragment موڈل ونڈو کو نیچے سے اٹھنے والے پینل کی شکل میں ظاہر کرتا ہے۔ یہ پیٹرن Material Design میں اختیارات کے انتخاب، شیئرنگ اور فوری اعمال کے لیے مقبول ہے۔ BottomSheet مقررہ اونچائی یا قابل توسیع (peek height + full height) ہو سکتی ہے۔ 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 اندر اندر موڈل ونڈوز سے بچنے کی سفارش کرتا ہے — یہ صارف کو الجھاتا ہے اور نیویگیشن کی ترتیب کو توڑتا ہے۔

ٹیکسٹ فیلڈز والی موڈل ونڈوز کے لیے کی بورڈ فوکس کے نقصان کو یقینی طور پر ہینڈل کریں۔ کی بورڈ کے ظاہر ہونے پر موڈل ونڈو اوپر کی طرف منتقل ہونی چاہیے تاکہ صارف اپنا درج کردہ ٹیکسٹ دیکھ سکے۔ UIKeyboardWillShowNotification iOS میں اور adjustResize Android میں اس کام کو حل کرتے ہیں۔

Swift اور Kotlin میں کوڈ کی مثالیں

دونوں پلیٹ فارمز پر موڈل پریزنٹیشن کے نفاذ پر غور کریں۔ Swift مثال بند کرنے کو ہینڈل کرنے کے لیے delegate کے ساتھ UIModalPresentationStyle.pageSheet کی ترتیب دکھاتی ہے۔ Kotlin مثال کسٹم layout اور حالت کے تحفظ کے ساتھ 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()
        }
    }
}