Notch — مبانی، تطبیق رابط با برش صفحه نمایش

Notch چیست؟

Notch (برش، "ابرو") — ناحیه‌ای در بالای صفحه نمایش گوشی هوشمند که دوربین جلو، بلندگوی مکالمه، حسگرهای مجاورت و نور و برای iPhone X و جدیدتر — دوربین مادون قرمز Face ID، پروژکتور نقاط و نورپرداز (سیستم TrueDepth camera) در آن قرار گرفته است. Notch برای افزایش مساحت مفید صفحه نمایش با حفظ تمام حسگرهای ضروری معرفی شد — به جای قاب بالایی (bezel) نمایشگر به سمت بالا در اطراف برش گسترش می‌یابد.

ابعاد: notch استاندارد iPhone دارای عرض ~34 میلی‌متر (~209 pt در حالت عمودی برای مدل‌های 6.1 اینچی) و ارتفاع ~5 میلی‌متر (~30 pt) است. در کنار notch "گوش‌هایی" (ears) — بخش‌های کوچکی از صفحه در سمت راست و چپ برش — باقی می‌ماند. "گوش" راست معمولاً ساعت، نشانگر باتری و Wi-Fi را نشان می‌دهد؛ سمت چپ — اپراتور و وضعیت را. در حالت افقی iOS notch را با یک نوار سیاه در تمام عرض نوار وضعیت پنهان می‌کند — محتوا در ناحیه برش نمایش داده نمی‌شود.

فقط iPhone نیست: مفهوم notch توسط بسیاری از تولیدکنندگان Android اقتباس شد. Google Pixel 3 XL، OnePlus 6، Huawei P20، Xiaomi Mi 8 — همه دارای برش بودند. برخی تولیدکنندگان فراتر رفتند: برش "قطره‌ای" (waterdrop notch)، دوربین 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 inset بالایی = ~44 pt (عمودی) یا ~0 pt (افقی با نوار سیاه).

// استفاده از safeAreaInsets برای موقعیت‌دهی محتوا
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // خواندن حاشیه‌های Safe Area
        let safeArea = self.view.safeAreaInsets

        // ثبت مقادیر برای اشکال‌زدایی
        print("inset بالایی: \(safeArea.top)")    // ~44 pt با notch
        print("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() // محاسبه مجدد layout
    }
}

Auto Layout و Safe Area: در Interface Builder از "Safe Area" به عنوان هدف anchor به جای "Superview" استفاده کنید. برای layout برنامه‌نویسی شده از safeAreaLayoutGuide استفاده کنید: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS به طور خودکار safeAreaInsets را هنگام چرخش دستگاه، انتقال به Split View در iPad، نمایش/پنهان کردن صفحه کلید و تغییر جهت به‌روزرسانی می‌کند. همه کنترلرهای استاندارد UIKit (UINavigationController، UITabBarController) از قبل Safe Area را در نظر می‌گیرند. viewها و کنترلرهای سفارشی باید به صراحت از 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 — سیستمی متشکل از دوربین مادون قرمز، پروژکتور نقاط (Dot Projector) و نورپرداز (Flood Illuminator) بود. ابعاد برش: ~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: inset بالایی = 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 اما left/right insets افزایش یافته (~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 با صفحه لبه‌دار (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) و گوشه‌های گرد را فراموش نکنید.