Notch — основы, адаптация интерфейса под вырез экрана

Что такое Notch?

Notch (вырез, "чёлка", монобровь) — область в верхней части экрана смартфона, где размещены фронтальная камера, разговорный динамик, датчики приближения и освещённости, а для iPhone X и новее — инфракрасная камера Face ID, проектор точек и подсветка (TrueDepth camera system). 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 top inset = ~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" в качестве anchor-цели вместо "Superview". Для программного layout используйте 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 — контент может отображаться в зоне выреза (для 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 мм × 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: top inset = 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.

Background и статус-бар: если вы используете кастомный цвет фона, он должен заливать всю область экрана, включая зону за 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 (bottom inset ~21 pt) и скруглёнными углами.