Notch — conceptos básicos, adaptación de interfaz para recorte de pantalla

¿Qué es Notch?

Notch (recorte, "muesca", "ceja") es un área en la parte superior de la pantalla del teléfono donde se encuentran la cámara frontal, el altavoz de llamada, los sensores de proximidad y luz ambiental, y para iPhone X y posteriores — la cámara infrarroja Face ID, el proyector de puntos y el iluminador (TrueDepth camera system). El notch se introdujo para aumentar el área útil de la pantalla mientras se mantienen todos los sensores necesarios — en lugar de un marco superior (bezel), la pantalla se extiende hacia arriba alrededor del recorte.

Dimensiones: el notch estándar del iPhone tiene aproximadamente ~34 mm de ancho (~209 pt en orientación vertical para modelos de 6.1 pulgadas) y ~5 mm de alto (~30 pt). A los lados del notch quedan "orejas" — pequeñas secciones de pantalla a la derecha e izquierda del recorte. La "oreja" derecha generalmente muestra la hora, el indicador de batería y Wi-Fi; la izquierda muestra el operador y el estado. En orientación horizontal, iOS oculta el notch con una barra negra en todo el ancho de la barra de estado — el contenido no se muestra en el área del recorte.

No solo iPhone: el concepto de notch fue adoptado por muchos fabricantes de Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — todos tenían recorte. Algunos fabricantes fueron más allá: notch en forma de gota (waterdrop), cámara punch-hole (agujero en la pantalla), cámara deslizante (módulo retráctil). Los Android insignia modernos (Samsung Galaxy S23+, Google Pixel 8 Pro) usan punch-hole — un agujero mínimo para la cámara en la parte superior de la pantalla, sin un recorte ancho.

Safe Area en iOS: safeAreaInsets

Safe Area es un área rectangular dentro de una vista que está garantizada libre de superposición con elementos del sistema: notch, esquinas redondeadas de la pantalla (corner radius), Home Indicator, barra de pestañas (tab bar) y barra de navegación (navigation bar). Las dimensiones de Safe Area se devuelven a través de la propiedad UIView.safeAreaInsets — UIEdgeInsets con valores top, left, bottom, right. Para un iPhone con notch, top inset = ~44 pt (vertical) o ~0 pt (horizontal con barra negra).

// Uso de safeAreaInsets para posicionar contenido
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Lectura de márgenes de Safe Area
        let safeArea = self.view.safeAreaInsets

        // Registro de valores para depuración
        print("Top inset: \(safeArea.top)")    // ~44 pt con notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt con Home Indicator

        // Posicionamiento del título con 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
        )
    }

    // Manejo de cambios de Safe Area (rotación, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Recálculo de layout
    }
}

Auto Layout y Safe Area: en Interface Builder, use "Safe Area" como destino del anchor en lugar de "Superview". Para layout programático, use safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS actualiza automáticamente safeAreaInsets al rotar el dispositivo, entrar en Split View en iPad, mostrar/ocultar el teclado y cambios de orientación. Todos los controladores UIKit estándar (UINavigationController, UITabBarController) ya consideran Safe Area. Las vistas y controladores personalizados deben usar safeAreaInsets explícitamente.

Notch en Android: DisplayCutout y WindowInsets

DisplayCutout es una clase del SDK de Android agregada en API 28 (Android 9.0) que describe el área de recorte en la pantalla. Se puede obtener a través de WindowInsets.displayCutout(). La clase devuelve boundingBoxList — una lista de rectángulos que describen el/los recorte(s), y safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — márgenes mínimos para mostrar contenido de forma segura. Android admite varias configuraciones de recorte: central (como iPhone), lateral (cámara en la esquina), doble (dos cámaras), punch-hole.

// Adaptación de interfaz para DisplayCutout en Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Permitir visualización de contenido en el área del recorte (si es necesario)
        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)

        // Obtención de DisplayCutout mediante WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Establecer margen para el contenido superior
            headerView.updatePadding(top = safeTop)
        }
    }
}

Modos de visualización (layoutInDisplayCutoutMode): ALWAYS — el contenido puede mostrarse en el área del recorte (para aplicaciones a pantalla completa, video, juegos); NEVER — el contenido nunca se superpone al recorte, el sistema agrega márgenes; SHORT_EDGES — el contenido se muestra en el área del recorte solo en el borde corto (para aplicaciones verticales con notch superior). El modo predeterminado es SHORT_EDGES (desde Android 12). Para cámaras punch-hole, el recorte es más pequeño y muchas aplicaciones usan ALWAYS para maximizar el uso de la pantalla.

Evolución de Notch: desde iPhone X hasta Dynamic Island

iPhone X (2017) — el primer teléfono inteligente Apple con notch. El recorte contenía la cámara TrueDepth para Face ID — un sistema de cámara infrarroja, proyector de puntos e iluminador. Dimensiones del recorte: ~34 mm × 5 mm. En iOS 11, Apple presentó Safe Area para la adaptación de aplicaciones. Los usuarios se dividieron: algunos aceptaron el notch como necesario para Face ID, otros lo criticaron por una pantalla "recortada".

iPhone 13 (2021) — Apple redujo el notch en un 20% moviendo el altavoz al marco superior. Este fue el último notch clásico. El iPhone 14 y 14 Plus (2022) mantuvieron el notch reducido. El iPhone 14 Pro y Pro Max introdujeron Dynamic Island — un recorte elipsoidal que combina la cámara y los sensores Face ID, que cambia dinámicamente de forma y muestra notificaciones del sistema (temporizador, música, conexión de AirPods). Dynamic Island se convirtió en una plataforma de software con su propio API (ActivityKit, Live Activities).

Dynamic Island no es solo un recorte, sino un elemento interactivo de la interfaz. Al conectar AirPods, la isla se expande mostrando un ícono y estado. Llamar a un taxi (Uber) muestra la hora de llegada. Un temporizador es visible en la isla al minimizar la aplicación. Dynamic Island está disponible en iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area para Dynamic Island: top inset = 54 pt (10 pt más que el notch clásico).

Reglas de diseño para interfaces con recorte

Nunca esconda contenido detrás del notch — use Safe Area o DisplayCutout para el cálculo automático de márgenes. No establezca valores fijos de márgenes (por ejemplo, 44 pt) — varían en diferentes dispositivos y orientaciones. Siempre use las API del sistema para leer Safe Area: safeAreaInsets en iOS, windowInsets.displayCutout en Android. Esto garantiza una visualización correcta en todos los dispositivos: iPhone SE (sin notch), iPhone 14 Pro (con notch), iPhone 15 (Dynamic Island), iPad (sin notch, pero con Home Indicator).

Orientación horizontal — un área de riesgo especial. En un iPhone con notch en horizontal, iOS agrega automáticamente una barra negra en todo el ancho de la barra de estado (el contenido no se muestra a la izquierda y derecha del notch). Esto se hace mediante Safe Area inset = 0 top, pero con márgenes izquierdo/derecho aumentados (~47 pt). No intente deshabilitar este comportamiento — App Store rechazará una aplicación que use áreas "prohibidas" de la pantalla para contenido en horizontal. Para video a pantalla completa, use AVPlayerViewController que coloca automáticamente los controles fuera del área del notch.

Fondo y barra de estado: si usa un color de fondo personalizado, debe llenar toda el área de la pantalla, incluida la zona detrás del notch. No dibuje contenido sobre la barra de estado — use Safe Area. Para el modo oscuro, asegúrese de que la barra de estado sea legible: establezca preferredStatusBarStyle según su estilo de fondo (.default para texto oscuro sobre fondo claro, .lightContent para texto claro sobre fondo oscuro).

Pruebas de adaptación a Notch

Simuladores y emuladores: Xcode proporciona simuladores de todos los modelos de iPhone con notch (iPhone X–14) y Dynamic Island (iPhone 14 Pro–15). Android Studio proporciona emuladores con varias configuraciones de recorte (Google Pixel 3 XL, emulador personalizado con cutout). Pruebe en orientación vertical y horizontal, con y sin teclado, en Split View (iPad). Verifique que todo el contenido sea legible y no esté cubierto.

Dispositivos reales: el notch en un simulador y en un dispositivo real puede diferir. Por ejemplo, el simulador de iPhone 14 Pro muestra Dynamic Island, pero sin interactividad real (Live Activities). Para Android, una cámara punch-hole puede no emularse con precisión. La mejor forma es probar en dispositivos reales. Conjunto mínimo: iPhone SE (sin notch), iPhone 14 (con notch), iPhone 15 Pro (Dynamic Island), Android con punch-hole, Android con pantalla waterfall (Samsung Edge).

Herramientas: para iOS, use Xcode View Debugger con la opción "Show Safe Area Insets" — muestra visualmente los límites de Safe Area. Para Android — Layout Inspector en Android Studio, que muestra WindowInsets y DisplayCutout en el panel Attributes. También es útil Accessibility Inspector para verificar que todos los elementos dentro de Safe Area sean accesibles para VoiceOver/TalkBack. No olvide el iPad sin notch, pero con Home Indicator (bottom inset ~21 pt) y esquinas redondeadas.