Notch — основи, адаптиране на интерфейса към изреза на екрана

Какво е Notch?

Notch (изрез, "вежда") — областта в горната част на екрана на смартфона, където са разположени предната камера, говорителя за разговори, сензорите за близост и осветеност, а за iPhone X и по-нови — инфрачервената камера Face ID, проекторът на точки и осветителят (TrueDepth camera система). Notch е въведен за увеличаване на полезната площ на екрана при запазване на всички необходими сензори — вместо горна рамка (bezel) дисплеят се разширява нагоре около изреза.

Размери: стандартният notch на iPhone има ширина ~34 mm (~209 pt в портретна ориентация за 6.1-инчови модели) и височина ~5 mm (~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 горното отстояние = ~44 pt (портрет) или ~0 pt (пейзаж с черна лента).

// Използване на safeAreaInsets за позициониране на съдържание
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Четене на отстоянията на Safe Area
        let safeArea = self.view.safeAreaInsets

        // Логиране на стойности за отстраняване на грешки
        print("Горно отстояние: \(safeArea.top)")    // ~44 pt с notch
        print("Долно отстояние: \(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 — съдържанието може да се показва в зоната на изреза (за full-screen приложения, видео, игри); 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 mm × 5 mm. В 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).

Design правила за интерфейси с изрез

Никога не крийте съдържание зад 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 ще отхвърли приложението, използващо "забранени" зони на екрана за съдържание в пейзаж. За full-screen видео използвайте 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) и заоблени ъгли.