Notch — الأساسيات، تكييف الواجهة مع قص الشاشة

ما هو Notch؟

Notch (قص، "نتوء") هو منطقة في الجزء العلوي من شاشة الهاتف حيث توجد الكاميرا الأمامية وسماعة المكالمات ومستشعرات القرب والإضاءة المحيطة، وبالنسبة لـ iPhone X والأحدث — كاميرا الأشعة تحت الحمراء Face ID وجهاز عرض النقاط والإضاءة (TrueDepth camera system). تم تقديم notch لزيادة مساحة الشاشة القابلة للاستخدام مع الاحتفاظ بجميع المستشعرات الضرورية — بدلاً من الإطار العلوي (bezel)، تمتد الشاشة لأعلى حول القص.

الأبعاد: يبلغ عرض notch القياسي لـ iPhone حوالي ~34 مم (~209 pt في الوضع العمودي للموديلات 6.1 بوصة) وارتفاع ~5 مم (~30 pt). على جانبي notch توجد "آذان" — أقسام صغيرة من الشاشة على يمين ويسار القص. تُظهر "الأذن" اليمنى عادةً الوقت ومؤشر البطارية و Wi-Fi؛ واليسرى تُظهر مشغل الاتصالات والحالة. في الوضع الأفقي، يخفي iOS notch بشريط أسود بعرض شريط الحالة بالكامل — لا يتم عرض المحتوى في منطقة القص.

ليس iPhone فقط: تبنى العديد من مصنعي Android مفهوم notch. Google Pixel 3 XL و OnePlus 6 و Huawei P20 و Xiaomi Mi 8 — كلها كانت بها قص. ذهب بعض المصنعين إلى أبعد من ذلك: notch على شكل قطرة (waterdrop)، كاميرا punch-hole (ثقب في الشاشة)، كاميرا منزلقة (وحدة قابلة للسحب). تستخدم هواتف Android الرائدة الحديثة (Samsung Galaxy S23+، Google Pixel 8 Pro) punch-hole — ثقب صغير للكاميرا في الجزء العلوي من الشاشة، بدون قص عريض.

Safe Area في iOS: safeAreaInsets

Safe Area هي منطقة مستطيلة داخل view مضمونة عدم تداخلها مع عناصر الواجهة النظامية: notch والزوايا المستديرة للشاشة (corner radius) و Home Indicator وشريط علامات التبويب (tab bar) وشريط التنقل (navigation bar). يتم إرجاع أبعاد Safe Area عبر الخاصية UIView.safeAreaInsets — UIEdgeInsets بقيم top و left و bottom و right. بالنسبة لـ iPhone مع notch، الهامش العلوي = ~44 pt (عمودي) أو ~0 pt (أفقي مع شريط أسود).

// استخدام safeAreaInsets لتحديد موضع المحتوى
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // قراءة هوامش Safe Area
        let safeArea = self.view.safeAreaInsets

        // تسجيل القيم للتصحيح
        print("Top inset: \(safeArea.top)")    // ~44 pt مع notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt مع Home Indicator

        // تحديد موضع العنوان مع Safe Area
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // معالجة تغييرات Safe Area (تدوير، Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // إعادة حساب التخطيط
    }
}

Auto Layout و Safe Area: في Interface Builder، استخدم "Safe Area" كهدف للـ anchor بدلاً من "Superview". للتخطيط البرمجي، استخدم safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). يقوم iOS تلقائياً بتحديث safeAreaInsets عند تدوير الجهاز والدخول إلى Split View على iPad وإظهار/إخفاء لوحة المفاتيح وتغييرات الاتجاه. جميع وحدات التحكم UIKit القياسية (UINavigationController، UITabBarController) تراعي Safe Area بالفعل. يجب على المشاهدات ووحدات التحكم المخصصة استخدام safeAreaInsets بشكل صريح.

Notch في Android: DisplayCutout و WindowInsets

DisplayCutout هي فئة من Android SDK تمت إضافتها في API 28 (Android 9.0) تصف منطقة القص على الشاشة. يمكن الحصول عليها عبر WindowInsets.displayCutout(). ترجع الفئة boundingBoxList — قائمة من المستطيلات تصف القص/القصصات، و safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — هوامش دنيا لعرض المحتوى بأمان. يدعم Android تكوينات قص مختلفة: مركزي (مثل iPhone)، جانبي (كاميرا في الزاوية)، مزدوج (كاميرتان)، punch-hole.

// تكييف الواجهة مع DisplayCutout في Activity
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // السماح بعرض المحتوى في منطقة القص (إذا لزم الأمر)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // الحصول على DisplayCutout عبر WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // تعيين هامش للمحتوى العلوي
            headerView.updatePadding(top = safeTop)
        }
    }
}

أوضاع العرض (layoutInDisplayCutoutMode): ALWAYS — يمكن عرض المحتوى في منطقة القص (للتطبيقات بملء الشاشة والفيديو والألعاب)؛ NEVER — لا يتداخل المحتوى أبداً مع القص، يضيف النظام هوامش؛ SHORT_EDGES — يتم عرض المحتوى في منطقة القص فقط على الحافة القصيرة (للتطبيقات العمودية ذات notch علوي). الوضع الافتراضي هو SHORT_EDGES (منذ Android 12). بالنسبة لكاميرات punch-hole، يكون القص أصغر، وتستخدم العديد من التطبيقات ALWAYS لزيادة استخدام الشاشة.

تطور Notch: من iPhone X إلى Dynamic Island

iPhone X (2017) — أول هاتف ذكي من Apple مع notch. احتوى القص على كاميرا TrueDepth لـ Face ID — نظام من كاميرا تحت الحمراء وجهاز عرض نقاط وإضاءة. أبعاد القص: ~34 مم × 5 مم. في iOS 11، قدمت Apple Safe Area لتكييف التطبيقات. انقسم المستخدمون: قبل البعض notch كضرورة لـ Face ID، وانتقده آخرون بسبب شاشة "مقتصّة".

iPhone 13 (2021) — قللت Apple حجم notch بنسبة 20% عن طريق نقل السماعة إلى الإطار العلوي. كان هذا آخر notch كلاسيكي. احتفظ iPhone 14 و 14 Plus (2022) بالـ notch المصغر. قدم iPhone 14 Pro و Pro Max Dynamic Island — قص بيضاوي يجمع الكاميرا ومستشعرات Face ID، والذي يغير شكله ديناميكياً ويعرض إشعارات النظام (مؤقت، موسيقى، اتصال AirPods). أصبح Dynamic Island منصة برمجية مع API خاص به (ActivityKit، Live Activities).

Dynamic Island ليس مجرد قص، بل عنصر واجهة تفاعلي. عند توصيل AirPods، تتوسع الجزيرة لتظهر أيقونة وحالة. استدعاء سيارة (Uber) يعرض وقت الوصول. يكون المؤقت مرئياً في الجزيرة عند تصغير التطبيق. Dynamic Island متاح على iPhone 14 Pro/Pro Max و iPhone 15/15 Pro/15 Pro Max و iPhone 16/16 Pro/16 Pro Max. Safe Area لـ Dynamic Island: الهامش العلوي = 54 pt (أكبر بـ 10 pt من notch الكلاسيكي).

قواعد التصميم للواجهات ذات القص

لا تخفِ المحتوى خلف notch أبداً — استخدم Safe Area أو DisplayCutout للحساب التلقائي للهوامش. لا تحدد قيماً ثابتة للهوامش (مثل 44 pt) — فهي تختلف على الأجهزة المختلفة وفي الاتجاهات المختلفة. استخدم دائماً API النظام لقراءة Safe Area: safeAreaInsets في iOS، windowInsets.displayCutout في Android. هذا يضمن عرضاً صحيحاً على جميع الأجهزة: iPhone SE (بدون notch)، iPhone 14 Pro (مع notch)، iPhone 15 (Dynamic Island)، iPad (بدون notch، ولكن مع Home Indicator).

الاتجاه الأفقي — منطقة خطر خاصة. على iPhone مع notch في الوضع الأفقي، يضيف iOS تلقائياً شريطاً أسود بعرض شريط الحالة بالكامل (لا يتم عرض المحتوى على يسار ويمين notch). يتم ذلك عبر Safe Area inset = 0 top، لكن مع هوامش يسار/يمين متزايدة (~47 pt). لا تحاول تعطيل هذا السلوك — سيرفض App Store التطبيق الذي يستخدم مناطق "محظورة" من الشاشة للمحتوى في الوضع الأفقي. للفيديو بملء الشاشة، استخدم AVPlayerViewController الذي يضع عناصر التحكم تلقائياً خارج منطقة notch.

الخلفية وشريط الحالة: إذا كنت تستخدم لون خلفية مخصصاً، يجب أن يملأ منطقة الشاشة بأكملها، بما في ذلك المنطقة خلف notch. لا ترسم محتوى فوق شريط الحالة — استخدم Safe Area. للوضع الداكن، تأكد من أن شريط الحالة قابل للقراءة: عيّن preferredStatusBarStyle وفقاً لنمط خلفيتك (.default لنص داكن على خلفية فاتحة، .lightContent لنص فاتح على خلفية داكنة).

اختبار التكيف مع Notch

أجهزة المحاكاة: يوفر Xcode محاكيات لجميع موديلات iPhone ذات notch (iPhone X–14) و Dynamic Island (iPhone 14 Pro–15). يوفر Android Studio محاكيات بتكوينات قص مختلفة (Google Pixel 3 XL، محاك مخصص مع cutout). اختبر في الوضع العمودي والأفقي، مع لوحة المفاتيح وبدونها، في Split View (iPad). تحقق من أن كل المحتوى قابل للقراءة وغير مغطى.

الأجهزة الحقيقية: قد يختلف notch على المحاكي عن الجهاز الحقيقي. على سبيل المثال، يعرض محاكي iPhone 14 Pro Dynamic Island ولكن بدون تفاعل حقيقي (Live Activities). بالنسبة لـ Android، قد لا تتم محاكاة كاميرا punch-hole بدقة. أفضل طريقة هي الاختبار على أجهزة حقيقية. الحد الأدنى: iPhone SE (بدون notch)، iPhone 14 (مع notch)، iPhone 15 Pro (Dynamic Island)، Android مع punch-hole، Android مع شاشة waterfall (Samsung Edge).

الأدوات: لـ iOS، استخدم Xcode View Debugger مع خيار "Show Safe Area Insets" — يعرض بصرياً حدود Safe Area. لـ Android — Layout Inspector في Android Studio، الذي يعرض WindowInsets و DisplayCutout في لوحة Attributes. أيضاً يُعد Accessibility Inspector مفيداً للتحقق من أن جميع العناصر داخل Safe Area متاحة لـ VoiceOver/TalkBack. لا تنسَ iPad بدون notch، ولكن مع Home Indicator (هامش سفلي ~21 pt) وزوايا مستديرة.