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: концепцію notch запозичили багато виробників Android. 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() // Перерахунок layout
    }
}

Auto Layout та Safe Area: у Interface Builder використовуйте «Safe Area» як ціль анкера замість «Superview». Для програмного макету використовуйте 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 — систему з інфрачервоної камери, проектора точок та підсвічки. Розміри вирізу: ~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 зі суцільним екраном (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) та закругленими кутами.