Notch — podstawy, adaptacja interfejsu do wycięcia ekranu

Czym jest Notch?

Notch (wycięcie, "grzywka") — obszar w górnej części ekranu smartfona, w którym umieszczono przedni aparat, głośnik słuchawkowy, czujniki zbliżeniowe i oświetlenia, a dla iPhone X i nowszych — kamerę na podczerwień Face ID, projektor punktów i oświetlacz (system TrueDepth camera). Notch został wprowadzony w celu zwiększenia użytecznej powierzchni ekranu przy zachowaniu wszystkich niezbędnych czujników — zamiast górnej ramki (bezel) wyświetlacz rozszerza się w górę wokół wycięcia.

Wymiary: standardowy notch iPhone'a ma szerokość ~34 mm (~209 pt w orientacji pionowej dla modeli 6.1 cala) i wysokość ~5 mm (~30 pt). Po bokach notcha znajdują się "uszy" (ears) — małe fragmenty ekranu po prawej i lewej stronie wycięcia. Prawe "ucho" zwykle pokazuje godzinę, wskaźnik baterii i Wi-Fi; lewe — operatora i stan. W orientacji poziomej iOS ukrywa notch czarnym paskiem na całej szerokości paska stanu — treść nie jest wyświetlana w strefie wycięcia.

Nie tylko iPhone: koncepcję notcha zapożyczyło wielu producentów Androida. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — wszystkie miały wycięcie. Niektórzy producenci poszli dalej: wycięcie "kroplowe" (waterdrop notch), kamera punch-hole (otwór w ekranie), kamera wysuwana (suwak). Współczesne flagowce Androida (Samsung Galaxy S23+, Google Pixel 8 Pro) używają punch-hole — minimalnego otworu na aparat w górnej części ekranu, bez szerokiego wycięcia.

Safe Area w iOS: safeAreaInsets

Safe Area — to prostokątny obszar wewnątrz widoku, który gwarantująco nie jest zasłaniany przez systemowe elementy interfejsu: notch, zaokrąglone rogi ekranu (corner radius), Home Indicator (wskaźnik domu), pasek zakładek (tab bar) i pasek nawigacyjny (navigation bar). Rozmiary Safe Area są zwracane przez właściwość UIView.safeAreaInsets — UIEdgeInsets z wartościami top, left, bottom, right. Dla iPhone'a z notchem górny wcięcie = ~44 pt (pionowo) lub ~0 pt (poziomo z czarnym paskiem).

// Użycie safeAreaInsets do pozycjonowania treści
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Odczytanie odstępów Safe Area
        let safeArea = self.view.safeAreaInsets

        // Logowanie wartości do debugowania
        print("Górny wcięcie: \(safeArea.top)")    // ~44 pt z notchem
        print("Dolny wcięcie: \(safeArea.bottom)") // ~34 pt z Home Indicator

        // Pozycjonowanie tytułu z uwzględnieniem 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
        )
    }

    // Obsługa zmian Safe Area (obrót, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Przeliczenie layoutu
    }
}

Auto Layout i Safe Area: w Interface Builder używaj "Safe Area" jako celu anchor zamiast "Superview". Dla programistycznego layoutu używaj safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS automatycznie aktualizuje safeAreaInsets przy obrocie urządzenia, przejściu do Split View na iPadzie, wyświetlaniu/ukrywaniu klawiatury i zmianie orientacji. Wszystkie standardowe kontrolery UIKit (UINavigationController, UITabBarController) już uwzględniają Safe Area. Niestandardowe widoki i kontrolery muszą jawnie używać safeAreaInsets.

Notch w Androidzie: DisplayCutout i WindowInsets

DisplayCutout — klasa Android SDK, dodana w API 28 (Android 9.0), opisująca obszar wycięcia na ekranie. Można ją uzyskać przez WindowInsets.displayCutout(). Klasa zwraca boundingBoxList — listę prostokątów opisujących wycięcie(-a) oraz safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimalne marginesy do bezpiecznego wyświetlania treści. Android obsługuje różne konfiguracje wycięć: centralne (jak iPhone), boczne (aparat w rogu), podwójne (dwa aparaty), punch-hole.

// Adaptacja interfejsu do DisplayCutout w Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Zezwalamy na wyświetlanie treści w strefie wycięcia (jeśli potrzebne)
        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)

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

            // Ustawiamy odstęp dla górnej treści
            headerView.updatePadding(top = safeTop)
        }
    }
}

Tryby wyświetlania (layoutInDisplayCutoutMode): ALWAYS — treść może być wyświetlana w strefie wycięcia (dla aplikacji pełnoekranowych, wideo, gier); NEVER — treść nigdy nie zachodzi na wycięcie, system dodaje margines; SHORT_EDGES — treść jest wyświetlana w strefie wycięcia tylko na krótkim boku (dla aplikacji pionowych z notchem u góry). Standardowy tryb — SHORT_EDGES (od Androida 12). Dla kamery punch-hole wycięcie jest mniejsze i wiele aplikacji używa ALWAYS dla maksymalnego wykorzystania ekranu.

Ewolucja Notch: od iPhone X do Dynamic Island

iPhone X (2017) — pierwszy smartfon Apple z notchem. Wycięcie zawierało kamerę TrueDepth dla Face ID — system składający się z kamery na podczerwień, projektora punktów (Dot Projector) i oświetlacza (Flood Illuminator). Wymiary wycięcia: ~34 mm × 5 mm. W iOS 11 Apple wprowadziło Safe Area do adaptacji aplikacji. Użytkownicy podzielili się: jedni zaakceptowali notch jako konieczność dla Face ID, inni krytykowali za "okrojony" ekran.

iPhone 13 (2021) — Apple zmniejszyło notch o 20% poprzez przesunięcie głośnika do górnej ramki ekranu. To był ostatni klasyczny notch. iPhone 14 i 14 Plus (2022) zachowały zmniejszony notch. iPhone 14 Pro i Pro Max wprowadziły Dynamic Island — elipsoidalne wycięcie łączące aparat i czujniki Face ID, które dynamicznie zmienia kształt i wyświetla powiadomienia systemowe (timer, muzyka, podłączenie AirPods). Dynamic Island stało się platformą programową z własnym API (ActivityKit, Live Activities).

Dynamic Island — to nie tylko wycięcie, ale interaktywny element interfejsu. Po podłączeniu AirPods wysepka rozszerza się, pokazując ikonę i status. Wezwanie taksówki (Uber) wyświetla czas przyjazdu. Timer jest widoczny na wysepce po zminimalizowaniu aplikacji. Dynamic Island jest dostępne na iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area dla Dynamic Island: górny wcięcie = 54 pt (o 10 pt więcej niż klasyczny notch).

Zasady projektowania interfejsów z wycięciem

Nigdy nie chowaj treści za notchem — używaj Safe Area lub DisplayCutout do automatycznego obliczania marginesów. Nie ustawiaj stałych wartości marginesów (np. 44 pt) — różnią się one na różnych urządzeniach i w różnych orientacjach. Zawsze używaj systemowych API do odczytu Safe Area: safeAreaInsets w iOS, windowInsets.displayCutout w Androidzie. Gwarantuje to poprawne wyświetlanie na wszystkich urządzeniach: iPhone SE (bez notcha), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (bez notcha, ale z Home Indicator).

Orientacja pozioma — szczególna strefa ryzyka. Na iPhonie z notchem w poziomie iOS automatycznie dodaje czarny pasek na całej szerokości paska stanu (treść po lewej i prawej stronie notcha nie jest wyświetlana). Robi to systemowy Safe Area inset = 0 top, ale zwiększone left/right insets (~47 pt). Nie próbuj wyłączać tego zachowania — App Store odrzuci aplikację używającą "zabronionych" stref ekranu dla treści w poziomie. Dla wideo pełnoekranowego używaj AVPlayerViewController, który automatycznie rozmieszcza elementy sterujące poza strefą notcha.

Tło i pasek stanu: jeśli używasz niestandardowego koloru tła, powinien on wypełniać cały obszar ekranu, włączając strefę za notchem. Nie rysuj treści na pasku stanu — używaj Safe Area. Dla trybu ciemnego upewnij się, że pasek stanu jest czytelny: ustaw preferredStatusBarStyle zgodnie ze stylem tła (.default dla ciemnego tekstu na jasnym tle, .lightContent dla jasnego tekstu na ciemnym tle).

Testowanie adaptacji do Notch

Symulatory i emulatory: Xcode udostępnia symulatory wszystkich modeli iPhone'a z notchem (iPhone X–14) i Dynamic Island (iPhone 14 Pro–15). Android Studio udostępnia emulatory z różnymi konfiguracjami wycięć (Google Pixel 3 XL, niestandardowy emulator z cutout). Testuj w orientacji pionowej i poziomej, z klawiaturą i bez, w Split View (iPad). Sprawdź, czy cała treść jest czytelna i niezasłonięta.

Rzeczywiste urządzenia: notch na symulatorze i na prawdziwym urządzeniu może się różnić. Na przykład symulator iPhone 14 Pro pokazuje Dynamic Island, ale bez rzeczywistej interaktywności (Live Activities). W Androidzie kamera punch-hole może nie być dokładnie emulowana. Najlepszym sposobem jest testowanie na prawdziwych urządzeniach. Minimalny zestaw: iPhone SE (bez notcha), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android z punch-hole, Android z ekranem krawędziowym (Samsung Edge).

Narzędzia: dla iOS używaj Xcode View Debugger z opcją "Show Safe Area Insets" — wizualnie pokaże granice Safe Area. Dla Androida — Layout Inspector w Android Studio, wyświetlający WindowInsets i DisplayCutout na panelu Attributes. Przydatny jest również Accessibility Inspector do sprawdzenia, czy wszystkie elementy w Safe Area są dostępne dla VoiceOver/TalkBack. Nie zapominaj o iPadzie bez notcha, ale z Home Indicator (dolny margines ~21 pt) i zaokrąglonymi rogami.