Notch — basisbeginselen, interface aanpassen aan schermuitsnede

Wat is een Notch?

Notch (uitsnede, "wenkbrauw") — het gebied in het bovenste deel van het smartphonescherm waar de frontcamera, gespreksluidspreker, nabijheids- en lichtsensoren, en voor iPhone X en nieuwer — de infraroodcamera Face ID, puntprojector en verlichting (TrueDepth camerasysteem) zijn geplaatst. De notch is geïntroduceerd om het bruikbare schermoppervlak te vergroten met behoud van alle noodzakelijke sensoren — in plaats van de bovenste rand (bezel) breidt het display zich naar boven uit rond de uitsnede.

Afmetingen: de standaard iPhone-notch heeft een breedte van ~34 mm (~209 pt in portretoriëntatie voor 6.1-inch modellen) en een hoogte van ~5 mm (~30 pt). Aan de zijkanten van de notch blijven "oren" (ears) — kleine schermgedeelten rechts en links van de uitsnede. Het rechter "oor" toont meestal de tijd, batterijindicator en Wi-Fi; het linker — de provider en status. In liggende oriëntatie verbergt iOS de notch met een zwarte balk over de volledige breedte van de statusbalk — content wordt niet weergegeven in het uitsnedegebied.

Niet alleen iPhone: het notch-concept werd overgenomen door veel Android-fabrikanten. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — ze hadden allemaal een uitsnede. Sommige fabrikanten gingen verder: "druppel"-uitsnede (waterdrop notch), punch-hole camera (gat in het scherm), schuifcamera (uittrekbare module). Moderne Android-vlaggenschepen (Samsung Galaxy S23+, Google Pixel 8 Pro) gebruiken punch-hole — een minimaal gat voor de camera in het bovenste deel van het scherm, zonder brede uitsnede.

Safe Area in iOS: safeAreaInsets

Safe Area — is een rechthoekig gebied binnen de view dat gegarandeerd niet wordt bedekt door systeeminterface-elementen: notch, afgeronde schermhoeken (corner radius), Home Indicator, tabbladbalk (tab bar) en navigatiebalk (navigation bar). De afmetingen van de Safe Area worden geretourneerd via de eigenschap UIView.safeAreaInsets — UIEdgeInsets met waarden top, left, bottom, right. Voor iPhone met notch is de bovenmarge = ~44 pt (portret) of ~0 pt (liggend met zwarte balk).

// Gebruik van safeAreaInsets voor het positioneren van content
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Uitlezen van Safe Area-marges
        let safeArea = self.view.safeAreaInsets

        // Loggen van waarden voor debuggen
        print("Bovenmarge: \(safeArea.top)")    // ~44 pt met notch
        print("Ondermarge: \(safeArea.bottom)") // ~34 pt met Home Indicator

        // Positioneren van titel met Safe Area in acht
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Verwerking van Safe Area-wijzigingen (rotatie, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Herberekening van layout
    }
}

Auto Layout en Safe Area: gebruik in Interface Builder "Safe Area" als anchordoel in plaats van "Superview". Gebruik voor programmatische layout safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS werkt safeAreaInsets automatisch bij bij rotatie van het apparaat, overgang naar Split View op iPad, weergeven/verbergen van het toetsenbord en oriëntatiewijziging. Alle standaard UIKit-controllers (UINavigationController, UITabBarController) houden al rekening met de Safe Area. Aangepaste views en controllers moeten expliciet safeAreaInsets gebruiken.

Notch in Android: DisplayCutout en WindowInsets

DisplayCutout — de Android SDK-klasse, toegevoegd in API 28 (Android 9.0), die het uitsnedegebied op het scherm beschrijft. Het kan worden verkregen via WindowInsets.displayCutout(). De klasse retourneert boundingBoxList — een lijst van rechthoeken die de uitsnede(s) beschrijven, en safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimale marges voor veilige weergave van content. Android ondersteunt verschillende uitsnedeconfiguraties: centraal (zoals iPhone), zijkant (camera in de hoek), dubbel (twee camera's), punch-hole.

// Aanpassing van interface aan DisplayCutout in Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Toestaan van contentweergave in uitsnedegebied (indien nodig)
        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)

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

            // Instellen van marge voor bovenste content
            headerView.updatePadding(top = safeTop)
        }
    }
}

Weergavemodi (layoutInDisplayCutoutMode): ALWAYS — content kan worden weergegeven in het uitsnedegebied (voor full-screen apps, video, games); NEVER — content bedekt nooit de uitsnede, het systeem voegt marge toe; SHORT_EDGES — content wordt alleen aan de korte zijde in het uitsnedegebied weergegeven (voor portret-apps met notch bovenaan). Standaardmodus — SHORT_EDGES (vanaf Android 12). Voor punch-hole camera is de uitsnede kleiner en veel apps gebruiken ALWAYS voor maximaal schermgebruik.

Evolutie van de Notch: van iPhone X tot Dynamic Island

iPhone X (2017) — de eerste Apple-smartphone met notch. De uitsnede bevatte de TrueDepth-camera voor Face ID — een systeem bestaande uit een infraroodcamera, puntprojector (Dot Projector) en verlichting (Flood Illuminator). Afmetingen van de uitsnede: ~34 mm × 5 mm. In iOS 11 introduceerde Apple de Safe Area voor aanpassing van apps. Gebruikers waren verdeeld: sommigen accepteerden de notch als noodzaak voor Face ID, anderen bekritiseerden het vanwege het "ingekorte" scherm.

iPhone 13 (2021) — Apple verkleinde de notch met 20% door de luidspreker naar de bovenste schermrand te verplaatsen. Dit was de laatste klassieke notch. iPhone 14 en 14 Plus (2022) behielden de verkleinde notch. iPhone 14 Pro en Pro Max introduceerden Dynamic Island — een ellipsvormige uitsnede die de camera en Face ID-sensoren combineert, dynamisch van vorm verandert en systeemmeldingen (timer, muziek, AirPods-verbinding) weergeeft. Dynamic Island werd een softwareplatform met eigen API (ActivityKit, Live Activities).

Dynamic Island — is niet zomaar een uitsnede, maar een interactief interface-element. Bij het aansluiten van AirPods breidt het eiland zich uit met pictogram en status. Een taxioproep (Uber) toont de aankomsttijd. Een timer is zichtbaar in het eiland bij het minimaliseren van de app. Dynamic Island is beschikbaar op iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area voor Dynamic Island: bovenmarge = 54 pt (10 pt meer dan klassieke notch).

Ontwerpregels voor interfaces met uitsnede

Verberg nooit content achter de notch — gebruik Safe Area of DisplayCutout voor automatische berekening van marges. Stel geen vaste marges in (bijv. 44 pt) — deze verschillen per apparaat en oriëntatie. Gebruik altijd systeem-API's om de Safe Area uit te lezen: safeAreaInsets in iOS, windowInsets.displayCutout in Android. Dit garandeert correcte weergave op alle apparaten: iPhone SE (zonder notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (zonder notch, maar met Home Indicator).

Liggende oriëntatie — een bijzondere risicozone. Op iPhone met notch in liggende stand voegt iOS automatisch een zwarte balk toe over de volledige breedte van de statusbalk (content links en rechts van de notch wordt niet weergegeven). Dit gebeurt door systemische Safe Area inset = 0 top, maar verhoogde left/right insets (~47 pt). Probeer dit gedrag niet uit te schakelen — de App Store wijst de app af die "verboden" schermzones gebruikt voor content in liggende stand. Gebruik voor full-screen video AVPlayerViewController, die automatisch bedieningselementen buiten de notch-zone plaatst.

Achtergrond en statusbalk: als u een aangepaste achtergrondkleur gebruikt, moet deze het hele schermgebied vullen, inclusief de zone achter de notch. Teken geen content over de statusbalk — gebruik Safe Area. Zorg voor de donkere modus dat de statusbalk leesbaar is: stel preferredStatusBarStyle in op de stijl van uw achtergrond (.default voor donkere tekst op lichte achtergrond, .lightContent voor lichte tekst op donkere achtergrond).

Aanpassing aan Notch testen

Simulators en emulatoren: Xcode biedt simulators van alle iPhone-modellen met notch (iPhone X–14) en Dynamic Island (iPhone 14 Pro–15). Android Studio biedt emulatoren met verschillende uitsnedeconfiguraties (Google Pixel 3 XL, aangepaste emulator met cutout). Test in portret- en liggende oriëntatie, met en zonder toetsenbord, in Split View (iPad). Controleer of alle content leesbaar en niet bedekt is.

Echte apparaten: de notch op een simulator en op een echt apparaat kan verschillen. Bijvoorbeeld, de iPhone 14 Pro-simulator toont Dynamic Island, maar zonder echte interactiviteit (Live Activities). In Android kan de punch-hole-camera mogelijk niet nauwkeurig worden geëmuleerd. De beste manier is testen op echte apparaten. Minimale set: iPhone SE (zonder notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android met punch-hole, Android met waterfall-scherm (Samsung Edge).

Hulpmiddelen: gebruik voor iOS Xcode View Debugger met de optie "Show Safe Area Insets" — toont visueel de grenzen van de Safe Area. Voor Android — Layout Inspector in Android Studio, die WindowInsets en DisplayCutout toont in het deelvenster Attributes. Ook is Accessibility Inspector nuttig om te controleren of alle elementen in de Safe Area toegankelijk zijn voor VoiceOver/TalkBack. Vergeet de iPad niet zonder notch, maar met Home Indicator (ondermarge ~21 pt) en afgeronde hoeken.