موبائل ڈویلپمنٹ میں 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 کو لاگو کرنے کے لیے کئی APIs فراہم کرتا ہے، کلاسک 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 کے طور پر ظاہر کرتا ہے۔ ڈویلپر detents کی ایک صف متعین کرتا ہے — اونچائی کی وہ قدریں جن پر Sheet رک سکتی ہے۔ iOS 16 نے صوابدیدی اونچائی کے ساتھ کسٹم detents شامل کیے ہیں۔ Apple بنیادی طور پر medium (.medium) اور large (.large) detents استعمال کرنے کی تجویز کرتا ہے۔

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 موڈیفائر کے ذریعے بھی detents کو سپورٹ کرتا ہے۔

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

    var body: some View {
        Button("شیٹ دکھائیں") { 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 نیچے سے ظاہر ہوتی ہے، گھسیٹنے کو سپورٹ کرتی ہے اور ایڈجسٹ ایبل اونچائی رکھتی ہے۔ Detents کے ساتھ توسیعی رویے کے لیے DraggableScrollableSheet استعمال کیا جاتا ہے۔

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("شیٹ کا مواد"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("بند کریں")
                )
            ]
        )
    );
})

React Native میں Bottom Sheet

React Native کے core میں کوئی بلٹ ان Bottom Sheet جزو نہیں ہے، اس لیے ڈویلپر تھرڈ پارٹی لائبریریاں استعمال کرتے ہیں۔ سب سے مقبول @gorhom/bottom-sheet ہے (GitHub پر 7,000 سے زیادہ ستارے، 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 کے ہیومن انٹرفیس گائیڈ لائنز (2024) اس بات پر زور دیتے ہیں کہ سوائپ ٹو ڈسمس iOS صارفین کی بنیادی توقع ہے۔