Safe Area — یہ کیا ہے، notch اور StatusBar سے مارجن

Safe Area کیا ہے؟

Safe Area اسکرین کا ایک مستطیل علاقہ ہے جہاں مواد ہارڈویئر اور سافٹ ویئر سسٹم عناصر: کیمرہ کٹ آؤٹ (notch)، Dynamic Island، اسٹیٹس بار (StatusBar)، جیسچر نیویگیشن اشارہ (Home Indicator)، گول ڈسپلے کونے اور نیویگیشن بار سے چھپائے جانے کی ضمانت نہیں ہے۔ Safe Area کی حدود ڈیوائس گھمانے، کی بورڈ بلانے یا Split View شروع کرنے پر متحرک طور پر تبدیل ہوتی ہیں۔ Apple Human Interface Guidelines (2025) کے مطابق، Safe Area کو نظرانداز کرنا ڈیزائن کی خامی سمجھا جاتا ہے اور جائزے کے دوران ایپلیکیشن مسترد ہونے کا سبب بن سکتا ہے۔

Safe Area کیوں ضروری ہے

Safe Area موبائل ایکو سسٹم میں اسکرین کے ٹکڑے ہونے کے مسئلے کو حل کرتا ہے۔ iPhone X سے پہلے، تمام iPhones میں ایک ہی تناسب کے ساتھ مستطیل ڈسپلے تھا۔ notch کی آمد کے ساتھ، اسکرین کی مختلف اقسام کی تعداد 20+ ہوگئی — مختلف notch سائز، Dynamic Island، گول کونے، اشارے۔ Safe Area ڈویلپر کو ان اختلافات سے الگ کرتا ہے، انکولی مارجن کے لیے ایک متحد API فراہم کرتا ہے۔ Apple Developer (2025) کے مطابق، iOS روٹ ویو پر خود بخود Safe Area لاگو کرتا ہے، لیکن UICollectionView اور UIScrollView کو دستی ترتیب کی ضرورت ہوتی ہے۔

iOS میں Safe Area: SafeAreaLayoutGuide اور SwiftUI

iOS میں، Safe Area UIKit میں SafeAreaLayoutGuide اور SwiftUI میں safeAreaInset موڈیفائر کے ذریعے لاگو کیا جاتا ہے۔ SafeAreaLayoutGuide ایک لے آؤٹ گائیڈ ہے جو ہر UIView میں شامل کیا جاتا ہے اور سسٹم عناصر سے پاک مستطیل کی وضاحت کرتا ہے۔ Interface Builder میں، Safe Area نیلے علاقے کے طور پر ظاہر ہوتا ہے۔ SwiftUI زیادہ تر کنٹینرز کے لیے خود بخود Safe Area لاگو کرتا ہے لیکن .ignoresSafeArea() کے ذریعے اسے نظرانداز کرنے کی اجازت دیتا ہے۔

// UIKit: SafeAreaLayoutGuide
let safeGuide = view.safeAreaLayoutGuide
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    button.topAnchor.constraint(
        equalTo: safeGuide.topAnchor),
    button.leadingAnchor.constraint(
        equalTo: safeGuide.leadingAnchor),
    button.trailingAnchor.constraint(
        equalTo: safeGuide.trailingAnchor),
])

UIKit میں SafeAreaLayoutGuide چار اینکر — اوپر، نیچے، شروع، آخر — کی وضاحت کرتا ہے جو خود بخود notch، StatusBar اور Home Indicator کو مدنظر رکھتے ہیں۔ یہ طریقہ iOS 11 سے تمام iOS آلات پر کام کرتا ہے۔ SwiftUI میں، وہی اثر NavigationStack یا VStack کے اندر مواد کے موڈیفائر کے ذریعے حاصل کیا جاتا ہے — SwiftUI خود بخود Safe Area Insets لاگو کرتا ہے۔

// SwiftUI: safeAreaInset اور ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Safe Area میں مواد")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("اسکرین کے نیچے بار")
        .padding()
        .background(.thinMaterial)
}

SwiftUI میں، .ignoresSafeArea() پس منظر کو Safe Area سے باہر پھیلانے کی اجازت دیتا ہے، جبکہ .safeAreaInset(edge:) ایک حسب ضرورت پینل شامل کرتا ہے جو مخصوص سمت میں Safe Area کو کم کرتا ہے۔ یہ نیویگیشن بارز، ٹول بارز اور اشتہاری بینرز کے لیے ایک معیاری نمونہ ہے۔

Android میں Safe Area: WindowInsets اور System Bars

Android میں، Safe Area WindowInsets (API 30+) اور WindowInsetsCompat (AndroidX لائبریری) کے ذریعے لاگو کیا جاتا ہے۔ WindowInsets Status Bar، Navigation Bar، IME (کی بورڈ) اور سسٹم جیسچرز کے لیے مارجن فراہم کرتا ہے۔ Android 10 (API 29) سے شروع کرتے ہوئے، Google تمام سسٹم عناصر کے لیے متحد مارجن سیٹ حاصل کرنے کے لیے WindowInsetsCompat.getInsets() کو WindowInsetsCompat.Type.systemBars() کے ساتھ استعمال کرنے کی تجویز کرتا ہے۔

// Android: WindowInsets (Kotlin)
class MainActivity : AppCompatActivity() {
    override fun onCreate(
        savedInstanceState: Bundle?
    ) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ViewCompat.setOnApplyWindowInsetsListener(
            findViewById(R.id.main_content)
        ) { view, insets ->
            val systemBars = insets.getInsets(
                WindowInsetsCompat.Type.systemBars()
            )
            view.setPadding(
                systemBars.left,
                systemBars.top,
                systemBars.right,
                systemBars.bottom
            )
            ViewCompat.ON_APPLY_WINDOW_INSETS_LISTENER
        }
    }
}

اس مثال میں، WindowInsets تمام سسٹم بارز — اوپر Status Bar، نیچے Navigation Bar — کے لیے مارجن لوٹاتا ہے۔ setOnApplyWindowInsetsListener ہر بار مارجن تبدیل ہونے پر کال کیا جاتا ہے (گھمانا، کی بورڈ بلانا)۔ systemBars() طریقہ اسٹیٹس بار، نیویگیشن بار اور کسٹمائزیشن بار کو ایک سیٹ میں جوڑتا ہے، کوڈ کو آسان بناتا ہے۔

Android میں Edge-to-Edge

Android 15 سے شروع کرتے ہوئے، Google نئی API کو ہدف بنانے والی تمام ایپلیکیشنز کے لیے edge-to-edge ڈسپلے کی ضرورت ہے۔ اس کا مطلب ہے کہ ایپلیکیشن سسٹم بارز کے نیچے کھینچتی ہے، اور Safe Area handleWindowInsets یا WindowInsetController کے ذریعے لاگو کیا جاتا ہے۔ Android Developer Blog (2025) کے مطابق، 68% ایپلیکیشنز پہلے ہی edge-to-edge پر منتقل ہو چکی ہیں، جو بڑی اسکرین والے آلات پر بصری ادراک کو بہتر بناتا ہے۔

Safe Area، Padding اور Insets: کیا فرق ہے

Safe Area، Padding اور Insets متعلقہ لیکن مختلف تصورات ہیں۔ Safe Area اسکرین کا وہ علاقہ ہے جو سسٹم عناصر سے پاک ہونے کی ضمانت ہے۔ Padding کسی عنصر کی اس کی حدود سے اندرونی مارجن ہے۔ Insets مخصوص عددی آفسیٹ ویلیوز ہیں جو Safe Area API کے ذریعے لوٹائی جاتی ہیں۔ Apple Tech Notes (2025) کے مطابق، Safe Area اور Padding کے درمیان الجھن ایپ اسٹورز میں 40% موافقت کے مسائل کی وجہ ہے۔

کوڈ کے ساتھ Safe Area کے نفاذ کی مثالیں

آئیے عام منظرناموں پر غور کریں: notch کے ساتھ افقی سمت کے لیے UIKit میں Safe Area، حسب ضرورت پینل کے ساتھ SwiftUI میں Safe Area، Android Compose میں Safe Area۔ iOS UIKit کے لیے مثال — Dynamic Island والے iPhone پر Safe Area کے اندر کلیکشن رکھنا۔ Jetpack Compose کے لیے مثال — Material 3 میں WindowInsets کا استعمال۔

// Jetpack Compose: Safe Area مارجن
@OptIn(ExperimentalMaterial3Api::class)
fun SafeAreaScreen() {
    val systemBars = with(
        LocalDensity.current
    ) {
        val insets = WindowInsets
            .systemBars
            .getAsPaddingValues()
        PaddingValues(
            top = insets.calculateTopPadding(),
            bottom = insets.calculateBottomPadding()
        )
    }
    Scaffold(
        contentWindowInsets = WindowInsets(
            top = systemBars.computeTopPadding(),
            bottom = systemBars.computeBottomPadding()
        )
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
        ) {
            Text("Safe Area میں مواد")
        }
    }
}

Jetpack Compose میں، Scaffold contentWindowInsets پیرامیٹر کے ذریعے خود بخود WindowInsets کو مدنظر رکھتا ہے۔ InnerPadding مواد میں منتقل کیا جاتا ہے اور اندرونی عناصر پر لاگو کیا جاتا ہے۔ padding(innerPadding) موڈیفائر والا Column ضمانت دیتا ہے کہ متن سسٹم بارز کے نیچے نہیں آئے گا۔

Safe Area کے ساتھ کام کرتے وقت عام غلطیاں

Apple (2025) کے App Store Review تجزیہ کے مطابق، پانچ سب سے عام غلطیاں ہیں: افقی سمت میں Safe Area کو نظرانداز کرنا، SafeAreaLayoutGuide کے بجائے ہارڈ کوڈڈ مارجن استعمال کرنا، UIScrollView میں Safe Area کی غلط ہینڈلنگ، موڈل پریزنٹیشنز میں مارجن بھول جانا اور Dynamic Island کے لیے موافقت کی کمی۔ ہارڈ کوڈڈ مارجن (اوپر 20px مقررہ) سب سے عام غلطی ہے: iPhone 14 Pro پر، وہ 20px 59px بن جاتے ہیں اور مواد کٹ جاتا ہے۔

• افقی سمت کو نظرانداز کرنا — افقی سمت میں، Safe Area کے مختلف مارجن ہوتے ہیں: Home Indicator دائیں طرف منتقل ہو جاتا ہے اور اوپر کا مارجن کم ہو جاتا ہے۔
• ہارڈ کوڈڈ مارجن — 20px یا 44px کی قدریں صرف notch کے بغیر پرانے iPhones پر کام کرتی ہیں۔ جدید آلات پر، مارجن 2-3 گنا مختلف ہوتے ہیں۔
• ScrollView اور Safe Area — UIScrollView میں contentInsetAdjustmentBehavior کو .always پر سیٹ کرنا چاہیے، ورنہ مواد سسٹم بارز کے نیچے چھپا رہے گا۔