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، كانت جميع أجهزة iPhone تحتوي على شاشة مستطيلة بنفس النسب. مع ظهور notch، زاد عدد أنواع الشاشات إلى أكثر من 20 — أحجام مختلفة من notch وDynamic Island والزوايا الدائرية والمؤشرات. Safe Area تجرد المطور من هذه الاختلافات من خلال توفير API موحد للهوامش المتجاوبة. وفقًا لـ Apple Developer (2025)، يطبق iOS Safe Area تلقائيًا على العرض الجذر، لكن UICollectionView وUIScrollView يتطلبان تكوينًا يدويًا.

Safe Area في iOS: SafeAreaLayoutGuide وSwiftUI

في iOS، يتم تنفيذ Safe Area من خلال SafeAreaLayoutGuide في UIKit والمعدل safeAreaInset في SwiftUI. 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),
])

SafeAreaLayoutGuide في UIKit يحدد أربعة نقاط ارتساء — العلوي والسفلي والبداية والنهاية — والتي تراعي تلقائيًا notch وStatusBar وHome Indicator. يعمل هذا النهج على جميع أجهزة iOS بدءًا من iOS 11. في 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 على الجانب المحدد. هذا نمط قياسي لأشرطة التنقل وأشرطة الأدوات واللافتات الإعلانية.

Safe Area في Android: WindowInsets وSystem Bars

في Android، يتم تنفيذ Safe Area من خلال WindowInsets (API 30+) وWindowInsetsCompat (مكتبة AndroidX). يوفر WindowInsets هوامش لشريط الحالة وشريط التنقل و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 الهوامش لجميع أشرطة النظام — شريط الحالة في الأعلى وشريط التنقل في الأسفل. يتم استدعاء setOnApplyWindowInsetsListener في كل مرة تتغير فيها الهوامش (التدوير، استدعاء لوحة المفاتيح). تجمع طريقة systemBars() شريط الحالة وشريط التنقل وشريط التخصيص في مجموعة واحدة، مما يبسط الكود.

Edge-to-Edge في Android

بدءًا من Android 15، تطلب Google عرض edge-to-edge لجميع التطبيقات التي تستهدف API الجديد. هذا يعني أن التطبيق يُرسم تحت أشرطة النظام، ويتم تطبيق Safe Area عبر handleWindowInsets أو WindowInsetController. وفقًا لـ Android Developer Blog (2025)، انتقل 68% من التطبيقات بالفعل إلى edge-to-edge، مما يحسن الإدراك البصري على الأجهزة ذات الشاشات الكبيرة.

Safe Area وPadding وInsets: ما الفرق

Safe Area وPadding وInsets هي مفاهيم مرتبطة ولكن مختلفة. Safe Area هي منطقة الشاشة الخالية من عناصر النظام. Padding هو الهامش الداخلي لعنصر من حدوده. Insets هي قيم رقمية محددة للإزاحة تُرجعها API Safe Area. وفقًا لـ Apple Tech Notes (2025)، الارتباك بين Safe Area وPadding هو سبب 40% من مشاكل التكيف في متاجر التطبيقات.

أمثلة على تنفيذ Safe Area مع الكود

لننظر في السيناريوهات النموذجية: Safe Area في UIKit للوضع الأفقي مع notch، Safe Area في SwiftUI مع لوحة مخصصة، Safe Area في Android Compose. مثال لـ iOS UIKit — وضع مجموعة داخل Safe Area على iPhone مع Dynamic Island. مثال لـ Jetpack Compose — استخدام WindowInsets في Material 3.

// 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 تلقائيًا WindowInsets عبر معامل contentWindowInsets. يتم تمرير InnerPadding إلى المحتوى وتطبيقه على العناصر الداخلية. يضمن Column مع معدل padding(innerPadding) عدم وضع النص تحت أشرطة النظام.

الأخطاء الشائعة عند العمل مع Safe Area

وفقًا لتحليل App Store Review من Apple (2025)، الأخطاء الخمسة الأكثر شيوعًا هي: تجاهل Safe Area في الوضع الأفقي، استخدام هوامش ثابتة بدلاً من SafeAreaLayoutGuide، معالجة غير صحيحة لـ Safe Area في UIScrollView، هوامش منسية في العروض المشروطة، وعدم التكيف مع Dynamic Island. الهوامش الثابتة (20px ثابتة في الأعلى) هي الخطأ الأكثر شيوعًا: على iPhone 14 Pro، تتحول هذه الـ 20px إلى 59px، ويتم قص المحتوى.

• تجاهل الوضع الأفقي — في الوضع الأفقي، Safe Area لها هوامش مختلفة: ينتقل Home Indicator إلى الجانب الأيمن، ويقل الهامش العلوي.
• الهوامش الثابتة — قيم 20px أو 44px تعمل فقط على أجهزة iPhone القديمة بدون notch. على الأجهزة الحديثة، تختلف الهوامش بمقدار 2-3 مرات.
• ScrollView وSafe Area — يجب ضبط contentInsetAdjustmentBehavior في UIScrollView على .always، وإلا سيتم إخفاء المحتوى تحت أشرطة النظام.