Notch — bases, adaptation de l'interface à la découpe d'écran

Qu'est-ce que Notch ?

Notch (découpe, « sourcil ») est une zone en haut de l'écran du smartphone où se trouvent la caméra frontale, le haut-parleur d'oreillette, les capteurs de proximité et de lumière ambiante, et pour l'iPhone X et les suivants — la caméra infrarouge Face ID, le projecteur de points et l'illuminateur (TrueDepth camera system). Le notch a été introduit pour augmenter la surface d'écran utilisable tout en conservant tous les capteurs nécessaires — au lieu d'un cadre supérieur (bezel), l'écran s'étend vers le haut autour de la découpe.

Dimensions : le notch standard de l'iPhone mesure environ ~34 mm de large (~209 pt en orientation portrait pour les modèles 6,1 pouces) et ~5 mm de haut (~30 pt). Sur les côtés du notch se trouvent des « oreilles » — de petites sections d'écran à droite et à gauche de la découpe. L'oreille droite affiche généralement l'heure, l'indicateur de batterie et le Wi-Fi ; la gauche affiche l'opérateur et le statut. En orientation paysage, iOS masque le notch par une barre noire sur toute la largeur de la barre d'état — le contenu ne s'affiche pas dans la zone de découpe.

Pas seulement iPhone : le concept de notch a été adopté par de nombreux fabricants Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — tous avaient une découpe. Certains fabricants sont allés plus loin : notch en goutte d'eau (waterdrop), caméra punch-hole (trou dans l'écran), caméra coulissante (module rétractable). Les flagships Android modernes (Samsung Galaxy S23+, Google Pixel 8 Pro) utilisent le punch-hole — un trou minimal pour la caméra en haut de l'écran, sans découpe large.

Safe Area dans iOS : safeAreaInsets

Safe Area est une zone rectangulaire à l'intérieur d'une vue qui est garantie de ne pas être masquée par les éléments d'interface système : notch, coins arrondis de l'écran (corner radius), Home Indicator, barre d'onglets (tab bar) et barre de navigation (navigation bar). Les dimensions de Safe Area sont retournées via la propriété UIView.safeAreaInsets — UIEdgeInsets avec les valeurs top, left, bottom, right. Pour un iPhone avec notch, top inset = ~44 pt (portrait) ou ~0 pt (paysage avec barre noire).

// Utilisation de safeAreaInsets pour positionner le contenu
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Lecture des marges Safe Area
        let safeArea = self.view.safeAreaInsets

        // Journalisation des valeurs pour le débogage
        print("Top inset: \(safeArea.top)")    // ~44 pt avec notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt avec Home Indicator

        // Positionnement du titre avec 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
        )
    }

    // Gestion des changements Safe Area (rotation, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Recalcul de la mise en page
    }
}

Auto Layout et Safe Area : dans Interface Builder, utilisez « Safe Area » comme cible d'ancrage au lieu de « Superview ». Pour la mise en page programmatique, utilisez safeAreaLayoutGuide : let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS met à jour automatiquement safeAreaInsets lors de la rotation de l'appareil, de l'entrée en Split View sur iPad, de l'affichage/masquage du clavier et des changements d'orientation. Tous les contrôleurs UIKit standards (UINavigationController, UITabBarController) prennent déjà en compte Safe Area. Les vues et contrôleurs personnalisés doivent utiliser explicitement safeAreaInsets.

Notch dans Android : DisplayCutout et WindowInsets

DisplayCutout est une classe du SDK Android ajoutée dans l'API 28 (Android 9.0) qui décrit la zone de découpe sur l'écran. On peut l'obtenir via WindowInsets.displayCutout(). La classe retourne boundingBoxList — une liste de rectangles décrivant la/les découpe(s), et safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — les marges minimales pour un affichage sûr du contenu. Android prend en charge diverses configurations de découpe : centrale (comme iPhone), latérale (caméra dans le coin), double (deux caméras), punch-hole.

// Adaptation d'interface pour DisplayCutout dans Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Autoriser l'affichage du contenu dans la zone de découpe (si nécessaire)
        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)

        // Obtention 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

            // Définir la marge pour le contenu supérieur
            headerView.updatePadding(top = safeTop)
        }
    }
}

Modes d'affichage (layoutInDisplayCutoutMode) : ALWAYS — le contenu peut s'afficher dans la zone de découpe (pour les applications plein écran, vidéo, jeux) ; NEVER — le contenu ne masque jamais la découpe, le système ajoute des marges ; SHORT_EDGES — le contenu s'affiche dans la zone de découpe uniquement sur le bord court (pour les applications portrait avec notch supérieur). Le mode par défaut est SHORT_EDGES (depuis Android 12). Pour les caméras punch-hole, la découpe est plus petite et de nombreuses applications utilisent ALWAYS pour maximiser l'utilisation de l'écran.

Évolution de Notch : de l'iPhone X au Dynamic Island

iPhone X (2017) — le premier smartphone Apple avec notch. La découpe contenait la caméra TrueDepth pour Face ID — un système de caméra infrarouge, projecteur de points et illuminateur. Dimensions de la découpe : ~34 mm × 5 mm. Dans iOS 11, Apple a introduit Safe Area pour l'adaptation des applications. Les utilisateurs étaient divisés : certains ont accepté le notch comme nécessaire pour Face ID, d'autres l'ont critiqué pour un écran « tronqué ».

iPhone 13 (2021) — Apple a réduit le notch de 20 % en déplaçant le haut-parleur vers le cadre supérieur. Ce fut le dernier notch classique. L'iPhone 14 et 14 Plus (2022) ont conservé le notch réduit. L'iPhone 14 Pro et Pro Max ont introduit Dynamic Island — une découpe ellipsoïdale combinant la caméra et les capteurs Face ID, qui change dynamiquement de forme et affiche les notifications système (minuteur, musique, connexion AirPods). Dynamic Island est devenu une plateforme logicielle avec sa propre API (ActivityKit, Live Activities).

Dynamic Island n'est pas seulement une découpe, mais un élément d'interface interactif. Lors de la connexion d'AirPods, l'île s'agrandit montrant une icône et l'état. Appeler un taxi (Uber) affiche l'heure d'arrivée. Un minuteur est visible dans l'île lors de la réduction de l'application. Dynamic Island est disponible sur iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area pour Dynamic Island : top inset = 54 pt (10 pt de plus que le notch classique).

Règles de conception pour les interfaces avec découpe

Ne cachez jamais de contenu derrière le notch — utilisez Safe Area ou DisplayCutout pour le calcul automatique des marges. Ne définissez pas de valeurs de marges fixes (par exemple, 44 pt) — elles diffèrent selon les appareils et les orientations. Utilisez toujours les API système pour lire Safe Area : safeAreaInsets dans iOS, windowInsets.displayCutout dans Android. Cela garantit un affichage correct sur tous les appareils : iPhone SE (sans notch), iPhone 14 Pro (avec notch), iPhone 15 (Dynamic Island), iPad (sans notch, mais avec Home Indicator).

Orientation paysage — une zone de risque particulière. Sur un iPhone avec notch en paysage, iOS ajoute automatiquement une barre noire sur toute la largeur de la barre d'état (le contenu ne s'affiche pas à gauche et à droite du notch). Ceci est fait par Safe Area inset = 0 top, mais avec des marges gauche/droite augmentées (~47 pt). N'essayez pas de désactiver ce comportement — l'App Store rejettera une application utilisant des zones « interdites » de l'écran pour le contenu en paysage. Pour la vidéo plein écran, utilisez AVPlayerViewController qui place automatiquement les commandes en dehors de la zone du notch.

Fond et barre d'état : si vous utilisez une couleur de fond personnalisée, elle doit remplir toute la zone de l'écran, y compris la zone derrière le notch. Ne dessinez pas de contenu sur la barre d'état — utilisez Safe Area. Pour le mode sombre, assurez-vous que la barre d'état soit lisible : définissez preferredStatusBarStyle selon votre style de fond (.default pour texte foncé sur fond clair, .lightContent pour texte clair sur fond foncé).

Test d'adaptation au Notch

Simulateurs et émulateurs : Xcode fournit des simulateurs de tous les modèles d'iPhone avec notch (iPhone X–14) et Dynamic Island (iPhone 14 Pro–15). Android Studio fournit des émulateurs avec diverses configurations de découpe (Google Pixel 3 XL, émulateur personnalisé avec cutout). Testez en orientation portrait et paysage, avec et sans clavier, en Split View (iPad). Vérifiez que tout le contenu est lisible et non masqué.

Appareils réels : le notch sur un simulateur et sur un appareil réel peut différer. Par exemple, le simulateur d'iPhone 14 Pro montre Dynamic Island, mais sans interactivité réelle (Live Activities). Pour Android, une caméra punch-hole peut ne pas être émulée avec précision. La meilleure méthode est de tester sur des appareils réels. Ensemble minimal : iPhone SE (sans notch), iPhone 14 (avec notch), iPhone 15 Pro (Dynamic Island), Android avec punch-hole, Android avec écran waterfall (Samsung Edge).

Outils : pour iOS, utilisez Xcode View Debugger avec l'option « Show Safe Area Insets » — il affiche visuellement les limites de Safe Area. Pour Android — Layout Inspector dans Android Studio, qui affiche WindowInsets et DisplayCutout dans le panneau Attributes. Également utile : Accessibility Inspector pour vérifier que tous les éléments dans Safe Area sont accessibles à VoiceOver/TalkBack. N'oubliez pas l'iPad sans notch, mais avec Home Indicator (marge inférieure ~21 pt) et coins arrondis.