Notch — Grundlagen, Anpassung der Benutzeroberfläche an den Bildschirmausschnitt

Was ist Notch?

Notch (Ausschnitt) ist ein Bereich oben auf dem Smartphone-Bildschirm, in dem sich die Frontkamera, der Ohrhörer-Lautsprecher, Näherungs- und Umgebungslichtsensoren sowie bei iPhone X und neuer die Infrarot-Face-ID-Kamera, der Punktprojektor und der Flutlichtstrahler (TrueDepth-Kamerasystem) befinden. Der Notch wurde eingeführt, um die nutzbare Bildschirmfläche zu vergrößern und gleichzeitig alle notwendigen Sensoren beizubehalten — anstelle eines oberen Rahmens (Bezel) erstreckt sich das Display um den Ausschnitt herum nach oben.

Abmessungen: Der Standard-iPhone-Notch ist etwa ~34 mm breit (~209 pt im Hochformat für 6,1-Zoll-Modelle) und ~5 mm hoch (~30 pt). An den Seiten des Notch befinden sich Ohren — kleine Bildschirmabschnitte rechts und links des Ausschnitts. Das rechte Ohr zeigt normalerweise die Uhrzeit, den Akkustand und WLAN; das linke zeigt den Mobilfunkanbieter und den Status. Im Querformat versteckt iOS den Notch mit einem schwarzen Balken über die gesamte Breite der Statusleiste — Inhalte werden nicht im Ausschnittbereich angezeigt.

Nicht nur iPhone: Das Notch-Konzept wurde von vielen Android-Herstellern übernommen. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — alle hatten einen Ausschnitt. Einige Hersteller gingen noch weiter: Wassertropfen-Notch, Punch-Hole-Kamera (Loch im Bildschirm), Slider-Kamera (ausfahrbares Modul). Moderne Android-Flaggschiffe (Samsung Galaxy S23+, Google Pixel 8 Pro) verwenden Punch-Hole — ein minimales Loch für die Kamera oben auf dem Bildschirm, ohne breiten Ausschnitt.

Safe Area in iOS: safeAreaInsets

Safe Area ist ein rechteckiger Bereich innerhalb einer Ansicht, der garantiert nicht von Systemoberflächenelementen überlagert wird: Notch, abgerundete Bildschirmecken (Corner Radius), Home Indicator, Tab-Leiste und Navigationsleiste. Die Safe-Area-Abmessungen werden über die Eigenschaft UIView.safeAreaInsets zurückgegeben — UIEdgeInsets mit Werten für top, left, bottom, right. Für ein iPhone mit Notch beträgt der obere Abstand ~44 pt (Hochformat) oder ~0 pt (Querformat mit schwarzem Balken).

// Verwendung von safeAreaInsets zur Positionierung von Inhalten
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Lesen der Safe-Area-Abstände
        let safeArea = self.view.safeAreaInsets

        // Protokollieren von Werten zur Fehlersuche
        print("Top inset: \(safeArea.top)")    // ~44 pt mit Notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt mit Home Indicator

        // Positionierung des Titels mit 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
        )
    }

    // Behandlung von Safe-Area-Änderungen (Rotation, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Neuberechnung des Layouts
    }
}

Auto Layout und Safe Area: Verwenden Sie im Interface Builder Safe Area als Ankerziel anstelle von Superview. Für programmatisches Layout verwenden Sie safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS aktualisiert safeAreaInsets automatisch bei Drehung des Geräts, Wechsel in den Split View auf dem iPad, Ein-/Ausblenden der Tastatur und Orientierungsänderungen. Alle standardmäßigen UIKit-Controller (UINavigationController, UITabBarController) berücksichtigen bereits die Safe Area. Benutzerdefinierte Ansichten und Controller müssen safeAreaInsets explizit verwenden.

Notch in Android: DisplayCutout und WindowInsets

DisplayCutout ist eine Android-SDK-Klasse, die in API 28 (Android 9.0) hinzugefügt wurde und den Ausschnittbereich auf dem Bildschirm beschreibt. Sie kann über WindowInsets.displayCutout() abgerufen werden. Die Klasse gibt boundingBoxList zurück — eine Liste von Rechtecken, die den/die Ausschnitt(e) beschreiben, und safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimale Abstände für die sichere Anzeige von Inhalten. Android unterstützt verschiedene Ausschnittkonfigurationen: zentral (wie iPhone), seitlich (Kamera in der Ecke), doppelt (zwei Kameras), Punch-Hole.

// Anpassung der Oberfläche an DisplayCutout in Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Inhaltsanzeige im Ausschnittbereich erlauben (falls erforderlich)
        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)

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

            // Abstand für obere Inhalte festlegen
            headerView.updatePadding(top = safeTop)
        }
    }
}

Anzeigemodi (layoutInDisplayCutoutMode): ALWAYS — Inhalte können im Ausschnittbereich angezeigt werden (für Vollbild-Apps, Video, Spiele); NEVER — Inhalte überlappen den Ausschnitt nie, das System fügt Abstände hinzu; SHORT_EDGES — Inhalte werden nur auf der kurzen Seite im Ausschnittbereich angezeigt (für Hochformat-Apps mit oberem Notch). Der Standardmodus ist SHORT_EDGES (seit Android 12). Bei Punch-Hole-Kameras ist der Ausschnitt kleiner und viele Apps verwenden ALWAYS, um die Bildschirmnutzung zu maximieren.

Evolution des Notch: vom iPhone X zu Dynamic Island

iPhone X (2017) — das erste Apple-Smartphone mit Notch. Der Ausschnitt enthielt die TrueDepth-Kamera für Face ID — ein System aus Infrarotkamera, Punktprojektor und Flutlichtstrahler. Ausschnittabmessungen: ~34 mm × 5 mm. In iOS 11 führte Apple die Safe Area zur App-Anpassung ein. Die Nutzer waren gespalten: Einige akzeptierten den Notch als notwendig für Face ID, andere kritisierten ihn für einen beschnittenen Bildschirm.

iPhone 13 (2021) — Apple reduzierte den Notch um 20%, indem der Lautsprecher zum oberen Rahmen verschoben wurde. Dies war der letzte klassische Notch. Das iPhone 14 und 14 Plus (2022) behielten den reduzierten Notch bei. Das iPhone 14 Pro und Pro Max führten Dynamic Island ein — einen ellipsoiden Ausschnitt, der Kamera und Face ID-Sensoren vereint, dynamisch die Form ändert und Systembenachrichtigungen (Timer, Musik, AirPods-Verbindung) anzeigt. Dynamic Island wurde zu einer Softwareplattform mit eigener API (ActivityKit, Live Activities).

Dynamic Island ist nicht nur ein Ausschnitt, sondern ein interaktives Oberflächenelement. Beim Verbinden von AirPods erweitert sich die Insel und zeigt ein Symbol und den Status an. Das Rufen eines Taxis (Uber) zeigt die Ankunftszeit an. Ein Timer ist beim Minimieren der App in der Insel sichtbar. Dynamic Island ist auf iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max verfügbar. Safe Area für Dynamic Island: oberer Abstand = 54 pt (10 pt größer als der klassische Notch).

Designregeln für Schnittstellen mit Ausschnitt

Verstecken Sie niemals Inhalte hinter dem Notch — verwenden Sie Safe Area oder DisplayCutout zur automatischen Abstandsberechnung. Legen Sie keine festen Abstandswerte fest (z. B. 44 pt) — sie unterscheiden sich auf verschiedenen Geräten und Ausrichtungen. Verwenden Sie immer die System-APIs zum Lesen der Safe Area: safeAreaInsets in iOS, windowInsets.displayCutout in Android. Dies gewährleistet eine korrekte Anzeige auf allen Geräten: iPhone SE (ohne Notch), iPhone 14 Pro (mit Notch), iPhone 15 (Dynamic Island), iPad (ohne Notch, aber mit Home Indicator).

Querformat — ein besonderer Risikobereich. Auf einem iPhone mit Notch im Querformat fügt iOS automatisch einen schwarzen Balken über die gesamte Breite der Statusleiste hinzu (Inhalte werden links und rechts des Notch nicht angezeigt). Dies geschieht durch Safe Area inset = 0 top, aber erhöhte linke/rechte Abstände (~47 pt). Versuchen Sie nicht, dieses Verhalten zu deaktivieren — der App Store lehnt eine App ab, die verbotene Bildschirmbereiche für Inhalte im Querformat verwendet. Verwenden Sie für Vollbildvideos AVPlayerViewController, der die Steuerelemente automatisch außerhalb des Notch-Bereichs platziert.

Hintergrund und Statusleiste: Wenn Sie eine benutzerdefinierte Hintergrundfarbe verwenden, sollte diese den gesamten Bildschirmbereich einschließlich des Bereichs hinter dem Notch ausfüllen. Zeichnen Sie keine Inhalte über die Statusleiste — verwenden Sie Safe Area. Stellen Sie im Dunkelmodus sicher, dass die Statusleiste lesbar ist: Setzen Sie preferredStatusBarStyle passend zu Ihrem Hintergrundstil (.default für dunklen Text auf hellem Hintergrund, .lightContent für hellen Text auf dunklem Hintergrund).

Testen der Notch-Anpassung

Simulatoren und Emulatoren: Xcode bietet Simulatoren für alle iPhone-Modelle mit Notch (iPhone X–14) und Dynamic Island (iPhone 14 Pro–15). Android Studio bietet Emulatoren mit verschiedenen Ausschnittkonfigurationen (Google Pixel 3 XL, benutzerdefinierter Emulator mit Cutout). Testen Sie im Hoch- und Querformat, mit und ohne Tastatur, im Split View (iPad). Überprüfen Sie, ob alle Inhalte lesbar und nicht verdeckt sind.

Echte Geräte: Der Notch auf einem Simulator und auf einem echten Gerät kann unterschiedlich sein. Beispielsweise zeigt der iPhone 14 Pro Simulator Dynamic Island, aber ohne echte Interaktivität (Live Activities). Bei Android kann eine Punch-Hole-Kamera möglicherweise nicht genau emuliert werden. Der beste Weg ist, auf echten Geräten zu testen. Mindestsatz: iPhone SE (ohne Notch), iPhone 14 (mit Notch), iPhone 15 Pro (Dynamic Island), Android mit Punch-Hole, Android mit Wasserfall-Bildschirm (Samsung Edge).

Werkzeuge: Verwenden Sie für iOS den Xcode View Debugger mit der Option Show Safe Area Insets — er zeigt die Safe-Area-Grenzen visuell an. Für Android — den Layout Inspector in Android Studio, der WindowInsets und DisplayCutout im Attributes-Bereich anzeigt. Nützlich ist auch der Accessibility Inspector, um zu überprüfen, ob alle Elemente innerhalb der Safe Area für VoiceOver/TalkBack zugänglich sind. Vergessen Sie nicht das iPad ohne Notch, aber mit Home Indicator (unterer Abstand ~21 pt) und abgerundeten Ecken.