Notch — conceitos básicos, adaptação de interface para recorte de tela

O que é Notch?

Notch (recorte, "chanfradura") é uma área no topo da tela do smartphone onde estão localizados a câmera frontal, o alto-falante de chamada, sensores de proximidade e luz ambiente, e para iPhone X e mais novos — a câmera infravermelha Face ID, o projetor de pontos e o iluminador (TrueDepth camera system). O notch foi introduzido para aumentar a área útil da tela enquanto mantém todos os sensores necessários — em vez de uma moldura superior (bezel), a tela se estende para cima ao redor do recorte.

Dimensões: o notch padrão do iPhone tem aproximadamente ~34 mm de largura (~209 pt em orientação retrato para modelos de 6.1 polegadas) e ~5 mm de altura (~30 pt). Nas laterais do notch ficam "orelhas" — pequenas seções de tela à direita e à esquerda do recorte. A "orelha" direita geralmente mostra a hora, o indicador de bateria e Wi-Fi; a esquerda mostra a operadora e o status. Na orientação paisagem, o iOS esconde o notch com uma barra preta em toda a largura da barra de status — o conteúdo não é exibido na área do recorte.

Não apenas iPhone: o conceito de notch foi adotado por muitos fabricantes Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — todos tinham recorte. Alguns fabricantes foram além: notch em gota (waterdrop), câmera punch-hole (furo na tela), câmera deslizante (módulo retrátil). Os flagships Android modernos (Samsung Galaxy S23+, Google Pixel 8 Pro) usam punch-hole — um furo mínimo para a câmera no topo da tela, sem um recorte largo.

Safe Area no iOS: safeAreaInsets

Safe Area é uma área retangular dentro de uma view que é garantidamente livre de sobreposição de elementos do sistema: notch, cantos arredondados da tela (corner radius), Home Indicator, barra de abas (tab bar) e barra de navegação (navigation bar). As dimensões da Safe Area são retornadas através da propriedade UIView.safeAreaInsets — UIEdgeInsets com valores top, left, bottom, right. Para um iPhone com notch, top inset = ~44 pt (retrato) ou ~0 pt (paisagem com barra preta).

// Uso de safeAreaInsets para posicionar conteúdo
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Leitura das margens da Safe Area
        let safeArea = self.view.safeAreaInsets

        // Registro de valores para depuração
        print("Top inset: \(safeArea.top)")    // ~44 pt com notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt com Home Indicator

        // Posicionamento do título com 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
        )
    }

    // Manuseio de mudanças da Safe Area (rotação, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Recálculo de layout
    }
}

Auto Layout e Safe Area: no Interface Builder, use "Safe Area" como destino da âncora em vez de "Superview". Para layout programático, use safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). O iOS atualiza automaticamente safeAreaInsets ao girar o dispositivo, entrar no Split View no iPad, mostrar/esconder o teclado e mudanças de orientação. Todos os controladores UIKit padrão (UINavigationController, UITabBarController) já consideram a Safe Area. Views e controladores personalizados devem usar safeAreaInsets explicitamente.

Notch no Android: DisplayCutout e WindowInsets

DisplayCutout é uma classe do SDK Android adicionada na API 28 (Android 9.0) que descreve a área de recorte na tela. Pode ser obtida através de WindowInsets.displayCutout(). A classe retorna boundingBoxList — uma lista de retângulos descrevendo o(s) recorte(s), e safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — margens mínimas para exibição segura de conteúdo. O Android suporta várias configurações de recorte: central (como iPhone), lateral (câmera no canto), duplo (duas câmeras), punch-hole.

// Adaptação de interface para DisplayCutout em Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Permitir exibição de conteúdo na área do recorte (se necessário)
        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)

        // Obtenção de DisplayCutout via WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Definir margem para o conteúdo superior
            headerView.updatePadding(top = safeTop)
        }
    }
}

Modos de exibição (layoutInDisplayCutoutMode): ALWAYS — o conteúdo pode ser exibido na área do recorte (para aplicativos em tela cheia, vídeo, jogos); NEVER — o conteúdo nunca sobrepõe o recorte, o sistema adiciona margens; SHORT_EDGES — o conteúdo é exibido na área do recorte apenas na borda curta (para aplicativos retrato com notch superior). O modo padrão é SHORT_EDGES (desde Android 12). Para câmeras punch-hole, o recorte é menor e muitos aplicativos usam ALWAYS para maximizar o uso da tela.

Evolução do Notch: do iPhone X ao Dynamic Island

iPhone X (2017) — o primeiro smartphone Apple com notch. O recorte continha a câmera TrueDepth para Face ID — um sistema de câmera infravermelha, projetor de pontos e iluminador. Dimensões do recorte: ~34 mm × 5 mm. No iOS 11, a Apple introduziu a Safe Area para adaptação de aplicativos. Os usuários se dividiram: alguns aceitaram o notch como necessário para o Face ID, outros o criticaram por uma tela "cortada".

iPhone 13 (2021) — a Apple reduziu o notch em 20% movendo o alto-falante para a moldura superior. Este foi o último notch clássico. O iPhone 14 e 14 Plus (2022) mantiveram o notch reduzido. O iPhone 14 Pro e Pro Max introduziram o Dynamic Island — um recorte elipsoidal que combina a câmera e os sensores Face ID, que muda dinamicamente de forma e exibe notificações do sistema (temporizador, música, conexão AirPods). O Dynamic Island tornou-se uma plataforma de software com sua própria API (ActivityKit, Live Activities).

Dynamic Island não é apenas um recorte, mas um elemento de interface interativo. Ao conectar AirPods, a ilha se expande mostrando um ícone e status. Chamar um táxi (Uber) exibe o horário de chegada. Um temporizador fica visível na ilha ao minimizar o aplicativo. O Dynamic Island está disponível no 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 maior que o notch clássico).

Regras de design para interfaces com recorte

Nunca esconda conteúdo atrás do notch — use Safe Area ou DisplayCutout para cálculo automático de margens. Não defina valores fixos de margens (por exemplo, 44 pt) — eles diferem em diferentes dispositivos e orientações. Sempre use as APIs do sistema para ler a Safe Area: safeAreaInsets no iOS, windowInsets.displayCutout no Android. Isso garante exibição correta em todos os dispositivos: iPhone SE (sem notch), iPhone 14 Pro (com notch), iPhone 15 (Dynamic Island), iPad (sem notch, mas com Home Indicator).

Orientação paisagem — uma área de risco especial. Em um iPhone com notch na paisagem, o iOS adiciona automaticamente uma barra preta em toda a largura da barra de status (o conteúdo não é exibido à esquerda e direita do notch). Isso é feito com Safe Area inset = 0 top, mas margens esquerda/direita aumentadas (~47 pt). Não tente desabilitar este comportamento — a App Store rejeitará um aplicativo que use áreas "proibidas" da tela para conteúdo na paisagem. Para vídeo em tela cheia, use AVPlayerViewController que coloca automaticamente os controles fora da área do notch.

Fundo e barra de status: se você usa uma cor de fundo personalizada, ela deve preencher toda a área da tela, incluindo a área atrás do notch. Não desenhe conteúdo sobre a barra de status — use Safe Area. Para o modo escuro, certifique-se de que a barra de status seja legível: defina preferredStatusBarStyle de acordo com seu estilo de fundo (.default para texto escuro em fundo claro, .lightContent para texto claro em fundo escuro).

Teste de adaptação ao Notch

Simuladores e emuladores: o Xcode fornece simuladores de todos os modelos de iPhone com notch (iPhone X–14) e Dynamic Island (iPhone 14 Pro–15). O Android Studio fornece emuladores com várias configurações de recorte (Google Pixel 3 XL, emulador personalizado com cutout). Teste em orientação retrato e paisagem, com e sem teclado, no Split View (iPad). Verifique se todo o conteúdo é legível e não está coberto.

Dispositivos reais: o notch no simulador e no dispositivo real pode diferir. Por exemplo, o simulador do iPhone 14 Pro mostra o Dynamic Island, mas sem interatividade real (Live Activities). Para Android, uma câmera punch-hole pode não ser emulada com precisão. A melhor forma é testar em dispositivos reais. Conjunto mínimo: iPhone SE (sem notch), iPhone 14 (com notch), iPhone 15 Pro (Dynamic Island), Android com punch-hole, Android com tela waterfall (Samsung Edge).

Ferramentas: para iOS, use o Xcode View Debugger com a opção "Show Safe Area Insets" — mostra visualmente os limites da Safe Area. Para Android — Layout Inspector no Android Studio, que exibe WindowInsets e DisplayCutout no painel Attributes. Também é útil o Accessibility Inspector para verificar se todos os elementos dentro da Safe Area são acessíveis ao VoiceOver/TalkBack. Não se esqueça do iPad sem notch, mas com Home Indicator (margem inferior ~21 pt) e cantos arredondados.