Notch — alapok, a felület adaptálása a képernyő kivágásához

Mi az a Notch?

Notch (kivágás, "szemöldök") — a smartphone képernyő felső részében lévő terület, ahol az előlapi kamera, beszédhangszóró, közelség- és fényérzékelők, valamint iPhone X és újabb esetén az infravörös Face ID kamera, pontprojektor és megvilágító (TrueDepth kamera rendszer) található. A notch a képernyő hasznos területének növelésére lett bevezetve az összes szükséges érzékelő megtartása mellett — a felső keret (bezel) helyett a kijelző felfelé terjeszkedik a kivágás körül.

Méretek: a szabványos iPhone notch szélessége ~34 mm (~209 pt portré tájolásban a 6.1 hüvelykes modelleknél) és magassága ~5 mm (~30 pt). A notch oldalain "fülek" (ears) — kis képernyőrészek a kivágás jobb és bal oldalán — maradnak. A jobb "fül" általában az időt, akkumulátor-jelzőt és Wi-Fi-t mutatja; a bal — a szolgáltatót és állapotot. Fekvő tájolásban az iOS fekete sávval takarja el a notch-ot a státuszsor teljes szélességében — a tartalom nem jelenik meg a kivágás zónájában.

Nem csak iPhone: a notch koncepciót sok Android gyártó átvette. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — mindegyik rendelkezett kivágással. Néhány gyártó tovább ment: "csepp" alakú kivágás (waterdrop notch), punch-hole kamera (lyuk a képernyőn), csúsztatható kamera (kihúzható modul). A modern Android zászlóshajók (Samsung Galaxy S23+, Google Pixel 8 Pro) punch-hole-t használnak — minimális lyukat a kamera számára a képernyő felső részén, széles kivágás nélkül.

Safe Area iOS-ben: safeAreaInsets

Safe Area — egy téglalap alakú terület a view-n belül, amely garantáltan nem fedett a rendszerfelület elemei által: notch, lekerekített képernyősarkok (corner radius), Home Indicator, tab bar és navigation bar. A Safe Area méreteit az UIView.safeAreaInsets tulajdonság — UIEdgeInsets a top, left, bottom, right értékekkel — adja vissza. Notch-al rendelkező iPhone esetén a felső margó = ~44 pt (portré) vagy ~0 pt (fekvő fekete sávval).

// A safeAreaInsets használata a tartalom pozicionálásához
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Area margók olvasása
        let safeArea = self.view.safeAreaInsets

        // Értékek naplózása hibakereséshez
        print("Felső inset: \(safeArea.top)")    // ~44 pt notch-al
        print("Alsó inset: \(safeArea.bottom)") // ~34 pt Home Indicator-al

        // Cím pozicionálása a Safe Area figyelembevételével
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Safe Area változások kezelése (forgatás, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Elrendezés újraszámítása
    }
}

Auto Layout és Safe Area: az Interface Builder-ben használja a "Safe Area"-t anchor célként a "Superview" helyett. Programozott elrendezéshez használja a safeAreaLayoutGuide-ot: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). Az iOS automatikusan frissíti a safeAreaInsets-t az eszköz elforgatásakor, Split View-ba váltáskor iPaden, billentyűzet megjelenítésekor/elrejtésekor és tájolásváltáskor. Az összes szabványos UIKit vezérlő (UINavigationController, UITabBarController) már figyelembe veszi a Safe Area-t. Az egyedi view-k és vezérlőknek explicit módon kell használniuk a safeAreaInsets-t.

Notch Androidban: DisplayCutout és WindowInsets

DisplayCutout — az Android SDK osztálya, amely az API 28-ban (Android 9.0) került hozzáadásra, és a képernyőn lévő kivágás területét írja le. A WindowInsets.displayCutout() segítségével érhető el. Az osztály visszaadja a boundingBoxList-et — a kivágás(oka)t leíró téglalapok listáját, valamint a safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimális margókat a tartalom biztonságos megjelenítéséhez. Az Android különböző kivágás konfigurációkat támogat: középső (mint iPhone), oldalsó (kamera a sarokban), dupla (két kamera), punch-hole.

// A felület adaptálása DisplayCutout-hoz Activity-ben
class NotchAwareActivity : AppCompatActivity() {

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

        // Tartalom megjelenítésének engedélyezése a kivágás zónájában (ha szükséges)
        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)

        // DisplayCutout lekérése WindowInsets segítségével
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Margó beállítása a felső tartalomhoz
            headerView.updatePadding(top = safeTop)
        }
    }
}

Megjelenítési módok (layoutInDisplayCutoutMode): ALWAYS — a tartalom megjelenhet a kivágás zónájában (teljes képernyős alkalmazások, videók, játékok esetén); NEVER — a tartalom soha nem fedi a kivágást, a rendszer margót ad hozzá; SHORT_EDGES — a tartalom csak a rövid oldalon jelenik meg a kivágás zónájában (portré alkalmazásoknál felül notch-al). Alapértelmezett mód — SHORT_EDGES (Android 12-től). Punch-hole kamera esetén a kivágás kisebb, és sok alkalmazás az ALWAYS-t használja a képernyő maximális kihasználásához.

A Notch evolúciója: iPhone X-től Dynamic Island-ig

iPhone X (2017) — az első Apple okostelefon notch-al. A kivágás a TrueDepth kamerát tartalmazta a Face ID számára — egy infravörös kamerából, pontprojektorból (Dot Projector) és megvilágítóból (Flood Illuminator) álló rendszert. A kivágás méretei: ~34 mm × 5 mm. Az iOS 11-ben az Apple bevezette a Safe Area-t az alkalmazások adaptálásához. A felhasználók két táborra szakadtak: egyesek elfogadták a notch-ot mint szükségszerűséget a Face ID számára, mások a "megcsonkított" képernyő miatt kritizálták.

iPhone 13 (2021) — az Apple 20%-kal csökkentette a notch-ot a hangszóró felső keretbe helyezésével. Ez volt az utolsó klasszikus notch. Az iPhone 14 és 14 Plus (2022) megtartotta a csökkentett notch-ot. Az iPhone 14 Pro és Pro Max bevezette a Dynamic Island-et — egy ellipszoid alakú kivágást, amely egyesíti a kamerát és a Face ID érzékelőket, dinamikusan változtatja alakját és rendszerértesítéseket (időzítő, zene, AirPods csatlakoztatás) jelenít meg. A Dynamic Island szoftverplatformmá vált saját API-val (ActivityKit, Live Activities).

Dynamic Island — nem csupán egy kivágás, hanem egy interaktív felületelem. AirPods csatlakoztatásakor a sziget kitágul, ikont és állapotot mutatva. Taxihívás (Uber) megjeleníti az érkezési időt. Az időzítő látható a szigetben az alkalmazás minimalizálásakor. A Dynamic Island iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max készülékeken érhető el. Safe Area a Dynamic Island számára: felső margó = 54 pt (10 pt több, mint a klasszikus notch).

Tervezési szabályok kivágással rendelkező felületekhez

Soha ne rejtse a tartalmat a notch mögé — használja a Safe Area-t vagy DisplayCutout-ot a margók automatikus kiszámításához. Ne állítson be rögzített margóértékeket (pl. 44 pt) — ezek eltérőek a különböző eszközökön és tájolásokban. Mindig a rendszer API-jait használja a Safe Area olvasásához: safeAreaInsets iOS-ben, windowInsets.displayCutout Androidban. Ez garantálja a helyes megjelenítést minden eszközön: iPhone SE (notch nélkül), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (notch nélkül, de Home Indicator-al).

Fekvő tájolás — különleges kockázati zóna. Notch-al rendelkező iPhone-on fekvő módban az iOS automatikusan fekete sávot ad hozzá a státuszsor teljes szélességében (a notch-tól balra és jobbra lévő tartalom nem jelenik meg). Ezt a rendszer a Safe Area inset = 0 top, de megnövelt left/right insets (~47 pt) segítségével teszi. Ne próbálja kikapcsolni ezt a viselkedést — az App Store elutasítja az alkalmazást, amely "tiltott" képernyőzónákat használ tartalomhoz fekvő módban. Teljes képernyős videóhoz használja az AVPlayerViewController-t, amely automatikusan a notch zónán kívülre helyezi a vezérlőket.

Háttér és státuszsor: ha egyedi háttérszínt használ, annak ki kell töltenie a teljes képernyőterületet, beleértve a notch mögötti zónát is. Ne rajzoljon tartalmat a státuszsor fölé — használja a Safe Area-t. Sötét mód esetén győződjön meg arról, hogy a státuszsor olvasható: állítsa be a preferredStatusBarStyle-t a háttér stílusának megfelelően (.default sötét szöveghez világos háttéren, .lightContent világos szöveghez sötét háttéren).

A Notch-hoz való adaptáció tesztelése

Szimulátorok és emulátorok: az Xcode szimulátorokat biztosít az összes notch-al rendelkező iPhone modellhez (iPhone X–14) és Dynamic Island-hez (iPhone 14 Pro–15). Az Android Studio emulátorokat biztosít különböző kivágás konfigurációkkal (Google Pixel 3 XL, egyedi emulátor cutout-tal). Teszteljen portré és fekvő tájolásban, billentyűzettel és anélkül, Split View-ban (iPad). Ellenőrizze, hogy minden tartalom olvasható és nem takart.

Valódi eszközök: a notch a szimulátoron és a valódi eszközön eltérhet. Például az iPhone 14 Pro szimulátor megjeleníti a Dynamic Island-et, de valódi interaktivitás (Live Activities) nélkül. Androidban a punch-hole kamera nem biztos, hogy pontosan emulálható. A legjobb módszer a valódi eszközökön való tesztelés. Minimális készlet: iPhone SE (notch nélkül), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android punch-hole-al, Android waterfall képernyővel (Samsung Edge).

Eszközök: iOS-hez használja az Xcode View Debugger-t a "Show Safe Area Insets" opcióval — vizuálisan megmutatja a Safe Area határait. Androidhoz — Layout Inspector az Android Studio-ban, amely a WindowInsets és DisplayCutout elemeket jeleníti meg az Attributes panelen. Az Accessibility Inspector is hasznos annak ellenőrzéséhez, hogy a Safe Area-n belüli összes elem elérhető-e a VoiceOver/TalkBack számára. Ne felejtse el az iPad-et notch nélkül, de Home Indicator-al (alsó margó ~21 pt) és lekerekített sarkokkal.