Notch — basi, adattamento dell'interfaccia al ritaglio dello schermo

Cos'è Notch?

Notch (ritaglio, "tacca") è un'area nella parte superiore dello schermo dello smartphone dove si trovano la fotocamera frontale, l'altoparlante auricolare, i sensori di prossimità e luce ambientale, e per iPhone X e successivi — la fotocamera a infrarossi Face ID, il proiettore di punti e l'illuminatore (TrueDepth camera system). Il notch è stato introdotto per aumentare l'area utile dello schermo mantenendo tutti i sensori necessari — invece di una cornice superiore (bezel), il display si estende verso l'alto attorno al ritaglio.

Dimensioni: il notch standard dell'iPhone è largo circa ~34 mm (~209 pt in orientamento ritratto per modelli da 6,1 pollici) e alto circa ~5 mm (~30 pt). Ai lati del notch ci sono "orecchie" — piccole sezioni dello schermo a destra e a sinistra del ritaglio. L'orecchia destra mostra solitamente l'ora, l'indicatore della batteria e il Wi-Fi; la sinistra mostra l'operatore e lo stato. In orientamento paesaggio, iOS nasconde il notch con una barra nera per tutta la larghezza della barra di stato — i contenuti non vengono visualizzati nell'area del ritaglio.

Non solo iPhone: il concetto di notch è stato adottato da molti produttori Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — tutti avevano un ritaglio. Alcuni produttori sono andati oltre: notch a goccia (waterdrop), fotocamera punch-hole (foro nello schermo), fotocamera scorrevole (modulo retrattile). I flagship Android moderni (Samsung Galaxy S23+, Google Pixel 8 Pro) usano il punch-hole — un foro minimo per la fotocamera nella parte superiore dello schermo, senza un ritaglio largo.

Safe Area in iOS: safeAreaInsets

Safe Area è un'area rettangolare all'interno di una vista che è garantita non essere coperta dagli elementi dell'interfaccia di sistema: notch, angoli arrotondati dello schermo (corner radius), Home Indicator, barra delle schede (tab bar) e barra di navigazione (navigation bar). Le dimensioni di Safe Area vengono restituite tramite la proprietà UIView.safeAreaInsets — UIEdgeInsets con valori top, left, bottom, right. Per un iPhone con notch, top inset = ~44 pt (ritratto) o ~0 pt (paesaggio con barra nera).

// Utilizzo di safeAreaInsets per posizionare contenuti
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Lettura dei margini Safe Area
        let safeArea = self.view.safeAreaInsets

        // Registrazione dei valori per il debug
        print("Top inset: \(safeArea.top)")    // ~44 pt con notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt con Home Indicator

        // Posizionamento del titolo 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
        )
    }

    // Gestione delle modifiche Safe Area (rotazione, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Ricalcolo del layout
    }
}

Auto Layout e Safe Area: in Interface Builder, usa "Safe Area" come destinazione dell'ancora invece di "Superview". Per layout programmatico, usa safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS aggiorna automaticamente safeAreaInsets durante la rotazione del dispositivo, l'ingresso in Split View su iPad, la visualizzazione/nascondimento della tastiera e i cambi di orientamento. Tutti i controller UIKit standard (UINavigationController, UITabBarController) già considerano Safe Area. Le viste e i controller personalizzati devono usare esplicitamente safeAreaInsets.

Notch in Android: DisplayCutout e WindowInsets

DisplayCutout è una classe dell'SDK Android aggiunta in API 28 (Android 9.0) che descrive l'area di ritaglio sullo schermo. Può essere ottenuta tramite WindowInsets.displayCutout(). La classe restituisce boundingBoxList — un elenco di rettangoli che descrivono il/i ritaglio/i, e safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — margini minimi per la visualizzazione sicura dei contenuti. Android supporta varie configurazioni di ritaglio: centrale (come iPhone), laterale (fotocamera nell'angolo), doppio (due fotocamere), punch-hole.

// Adattamento dell'interfaccia per DisplayCutout in Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Consentire la visualizzazione dei contenuti nell'area di ritaglio (se necessario)
        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)

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

            // Impostare il margine per i contenuti superiori
            headerView.updatePadding(top = safeTop)
        }
    }
}

Modalità di visualizzazione (layoutInDisplayCutoutMode): ALWAYS — i contenuti possono essere visualizzati nell'area di ritaglio (per app a schermo intero, video, giochi); NEVER — i contenuti non sovrappongono mai il ritaglio, il sistema aggiunge margini; SHORT_EDGES — i contenuti vengono visualizzati nell'area di ritaglio solo sul bordo corto (per app in ritratto con notch superiore). La modalità predefinita è SHORT_EDGES (da Android 12). Per le fotocamere punch-hole, il ritaglio è più piccolo e molte app usano ALWAYS per massimizzare l'uso dello schermo.

Evoluzione di Notch: da iPhone X a Dynamic Island

iPhone X (2017) — il primo smartphone Apple con notch. Il ritaglio conteneva la fotocamera TrueDepth per Face ID — un sistema di fotocamera a infrarossi, proiettore di punti e illuminatore. Dimensioni del ritaglio: ~34 mm × 5 mm. In iOS 11, Apple ha introdotto Safe Area per l'adattamento delle app. Gli utenti erano divisi: alcuni hanno accettato il notch come necessario per Face ID, altri lo hanno criticato per uno schermo "ritagliato".

iPhone 13 (2021) — Apple ha ridotto il notch del 20% spostando l'altoparlante nella cornice superiore. Questo è stato l'ultimo notch classico. L'iPhone 14 e 14 Plus (2022) hanno mantenuto il notch ridotto. L'iPhone 14 Pro e Pro Max hanno introdotto Dynamic Island — un ritaglio ellissoidale che combina fotocamera e sensori Face ID, che cambia dinamicamente forma e mostra notifiche di sistema (timer, musica, connessione AirPods). Dynamic Island è diventata una piattaforma software con una propria API (ActivityKit, Live Activities).

Dynamic Island non è solo un ritaglio, ma un elemento dell'interfaccia interattivo. Quando si collegano gli AirPods, l'isola si espande mostrando un'icona e lo stato. Chiamare un taxi (Uber) mostra l'orario di arrivo. Un timer è visibile nell'isola quando si minimizza l'app. Dynamic Island è disponibile su iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area per Dynamic Island: top inset = 54 pt (10 pt in più rispetto al notch classico).

Regole di design per interfacce con ritaglio

Non nascondere mai contenuti dietro il notch — usa Safe Area o DisplayCutout per il calcolo automatico dei margini. Non impostare valori di margine fissi (ad esempio, 44 pt) — differiscono su diversi dispositivi e orientamenti. Usa sempre le API di sistema per leggere Safe Area: safeAreaInsets in iOS, windowInsets.displayCutout in Android. Questo garantisce una visualizzazione corretta su tutti i dispositivi: iPhone SE (senza notch), iPhone 14 Pro (con notch), iPhone 15 (Dynamic Island), iPad (senza notch, ma con Home Indicator).

Orientamento paesaggio — un'area di rischio speciale. Su un iPhone con notch in paesaggio, iOS aggiunge automaticamente una barra nera per tutta la larghezza della barra di stato (i contenuti non vengono visualizzati a sinistra e destra del notch). Ciò avviene tramite Safe Area inset = 0 top, ma con margini sinistro/destro aumentati (~47 pt). Non tentare di disabilitare questo comportamento — l'App Store rifiuterà un'app che utilizza aree "vietate" dello schermo per i contenuti in paesaggio. Per i video a schermo intero, usa AVPlayerViewController che posiziona automaticamente i controlli fuori dall'area del notch.

Sfondo e barra di stato: se usi un colore di sfondo personalizzato, deve riempire l'intera area dello schermo, inclusa l'area dietro il notch. Non disegnare contenuti sopra la barra di stato — usa Safe Area. Per la modalità scura, assicurati che la barra di stato sia leggibile: imposta preferredStatusBarStyle in base al tuo stile di sfondo (.default per testo scuro su sfondo chiaro, .lightContent per testo chiaro su sfondo scuro).

Test dell'adattamento a Notch

Simulatori ed emulatori: Xcode fornisce simulatori di tutti i modelli di iPhone con notch (iPhone X–14) e Dynamic Island (iPhone 14 Pro–15). Android Studio fornisce emulatori con varie configurazioni di ritaglio (Google Pixel 3 XL, emulatore personalizzato con cutout). Testa in orientamento ritratto e paesaggio, con e senza tastiera, in Split View (iPad). Verifica che tutti i contenuti siano leggibili e non coperti.

Dispositivi reali: il notch su un simulatore e su un dispositivo reale può differire. Ad esempio, il simulatore di iPhone 14 Pro mostra Dynamic Island, ma senza interattività reale (Live Activities). Per Android, una fotocamera punch-hole potrebbe non essere emulata con precisione. Il metodo migliore è testare su dispositivi reali. Set minimo: iPhone SE (senza notch), iPhone 14 (con notch), iPhone 15 Pro (Dynamic Island), Android con punch-hole, Android con schermo waterfall (Samsung Edge).

Strumenti: per iOS, usa Xcode View Debugger con l'opzione "Show Safe Area Insets" — mostra visivamente i confini di Safe Area. Per Android — Layout Inspector in Android Studio, che mostra WindowInsets e DisplayCutout nel pannello Attributes. Utile anche Accessibility Inspector per verificare che tutti gli elementi all'interno di Safe Area siano accessibili a VoiceOver/TalkBack. Non dimenticare l'iPad senza notch, ma con Home Indicator (margine inferiore ~21 pt) e angoli arrotondati.