Notch — základy, přizpůsobení rozhraní výřezu obrazovky

Co je Notch?

Notch (výřez, "obočí") — oblast v horní části obrazovky smartphonu, kde je umístěna přední kamera, sluchátkový reproduktor, senzory přiblížení a osvětlení a pro iPhone X a novější — infračervená kamera Face ID, projektor bodů a osvětlení (systém TrueDepth camera). Notch byl zaveden pro zvětšení užitečné plochy obrazovky při zachování všech potřebných senzorů — místo horního rámečku (bezel) se displej rozšiřuje nahoru kolem výřezu.

Rozměry: standardní notch iPhone má šířku ~34 mm (~209 pt v portrétní orientaci pro 6.1palcové modely) a výšku ~5 mm (~30 pt). Po stranách notche zůstávají "uši" (ears) — malé části obrazovky napravo a nalevo od výřezu. Pravé "ucho" obvykle zobrazuje čas, indikátor baterie a Wi-Fi; levé — operátora a stav. V krajinné orientaci iOS skrývá notch černým pruhem přes celou šířku stavového řádku — obsah se v zóně výřezu nezobrazuje.

Nejen iPhone: koncept notche převzalo mnoho výrobců Androidu. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — všechny měly výřez. Někteří výrobci šli dále: "kapkovitý" výřez (waterdrop notch), punch-hole kamera (otvor v obrazovce), vysouvací kamera (výsuvný modul). Moderní androidí vlajkové lodě (Samsung Galaxy S23+, Google Pixel 8 Pro) používají punch-hole — minimální otvor pro kameru v horní části obrazovky, bez širokého výřezu.

Safe Area v iOS: safeAreaInsets

Safe Area — je obdélníková oblast uvnitř view, která je zaručeně nepřekrytá systémovými prvky rozhraní: notchem, zaoblenými rohy obrazovky (corner radius), Home Indicatorem, panelem karet (tab bar) a navigačním panelem (navigation bar). Velikosti Safe Area se vracejí prostřednictvím vlastnosti UIView.safeAreaInsets — UIEdgeInsets s hodnotami top, left, bottom, right. Pro iPhone s notchem je horní odsazení = ~44 pt (portrét) nebo ~0 pt (krajina s černým pruhem).

// Použití safeAreaInsets pro pozicování obsahu
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Čtení odsazení Safe Area
        let safeArea = self.view.safeAreaInsets

        // Logování hodnot pro ladění
        print("Horní odsazení: \(safeArea.top)")    // ~44 pt s notchem
        print("Dolní odsazení: \(safeArea.bottom)") // ~34 pt s Home Indicatorem

        // Pozicování nadpisu s ohledem na 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
        )
    }

    // Zpracování změn Safe Area (otočení, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Přepočet rozvržení
    }
}

Auto Layout a Safe Area: v Interface Builderu používejte "Safe Area" jako cíl anchor místo "Superview". Pro programové rozvržení použijte safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS automaticky aktualizuje safeAreaInsets při otočení zařízení, přechodu do Split View na iPadu, zobrazení/skrytí klávesnice a změně orientace. Všechny standardní UIKit kontroléry (UINavigationController, UITabBarController) již Safe Area zohledňují. Vlastní view a kontroléry musí explicitně používat safeAreaInsets.

Notch v Androidu: DisplayCutout a WindowInsets

DisplayCutout — třída Android SDK, přidaná v API 28 (Android 9.0), která popisuje oblast výřezu na obrazovce. Lze ji získat pomocí WindowInsets.displayCutout(). Třída vrací boundingBoxList — seznam obdélníků popisujících výřez(y) a safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimální odsazení pro bezpečné zobrazení obsahu. Android podporuje různé konfigurace výřezů: centrální (jako iPhone), boční (kamera v rohu), dvojitý (dvě kamery), punch-hole.

// Přizpůsobení rozhraní pro DisplayCutout v Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Povolujeme zobrazení obsahu v zóně výřezu (pokud je třeba)
        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)

        // Získání DisplayCutout přes WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Nastavení odsazení pro horní obsah
            headerView.updatePadding(top = safeTop)
        }
    }
}

Režimy zobrazení (layoutInDisplayCutoutMode): ALWAYS — obsah se může zobrazovat v zóně výřezu (pro full-screen aplikace, video, hry); NEVER — obsah nikdy nepřekrývá výřez, systém přidá odsazení; SHORT_EDGES — obsah se zobrazuje v zóně výřezu pouze na krátké straně (pro portrétní aplikace s notchem nahoře). Standardní režim — SHORT_EDGES (od Androidu 12). Pro punch-hole kameru je výřez menší a mnoho aplikací používá ALWAYS pro maximální využití obrazovky.

Evoluce Notche: od iPhone X k Dynamic Island

iPhone X (2017) — první smartphone Apple s notchem. Výřez obsahoval TrueDepth kameru pro Face ID — systém skládající se z infračervené kamery, projektoru bodů (Dot Projector) a osvětlení (Flood Illuminator). Rozměry výřezu: ~34 mm × 5 mm. V iOS 11 Apple představil Safe Area pro přizpůsobení aplikací. Uživatelé se rozdělili: někteří přijali notch jako nezbytnost pro Face ID, jiní jej kritizovali za "oříznutou" obrazovku.

iPhone 13 (2021) — Apple zmenšil notch o 20 % posunutím reproduktoru k hornímu rámečku obrazovky. To byl poslední klasický notch. iPhone 14 a 14 Plus (2022) si zachovaly zmenšený notch. iPhone 14 Pro a Pro Max představily Dynamic Island — elipsoidní výřez spojující kameru a senzory Face ID, který dynamicky mění tvar a zobrazuje systémová oznámení (časovač, hudba, připojení AirPods). Dynamic Island se stal softwarovou platformou s vlastním API (ActivityKit, Live Activities).

Dynamic Island — není jen výřez, ale interaktivní prvek rozhraní. Při připojení AirPods se ostrov rozšíří a zobrazí ikonu a stav. Volání taxíku (Uber) zobrazí čas příjezdu. Časovač je viditelný v ostrově při minimalizaci aplikace. Dynamic Island je k dispozici na iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area pro Dynamic Island: horní odsazení = 54 pt (o 10 pt více než klasický notch).

Designová pravidla pro rozhraní s výřezem

Nikdy neschovávejte obsah za notch — používejte Safe Area nebo DisplayCutout pro automatický výpočet odsazení. Nestavte pevné hodnoty odsazení (např. 44 pt) — liší se na různých zařízeních a v různých orientacích. Vždy používejte systémová API pro čtení Safe Area: safeAreaInsets v iOS, windowInsets.displayCutout v Androidu. To zaručuje správné zobrazení na všech zařízeních: iPhone SE (bez notche), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (bez notche, ale s Home Indicatorem).

Krajinná orientace — zvláštní riziková zóna. Na iPhonu s notchem v krajinné orientaci iOS automaticky přidá černý pruh přes celou šířku stavového řádku (obsah nalevo a napravo od notche se nezobrazuje). To se děje systémovým Safe Area inset = 0 top, ale zvýšenými left/right insets (~47 pt). Nepokoušejte se toto chování vypnout — App Store odmítne aplikaci používající "zakázané" zóny obrazovky pro obsah v krajině. Pro full-screen video používejte AVPlayerViewController, který automaticky umísťuje ovládací prvky mimo zónu notche.

Pozadí a stavový řádek: pokud používáte vlastní barvu pozadí, měla by vyplňovat celou oblast obrazovky, včetně zóny za notchem. Nekreslete obsah přes stavový řádek — používejte Safe Area. Pro tmavý režim se ujistěte, že je stavový řádek čitelný: nastavte preferredStatusBarStyle podle stylu vašeho pozadí (.default pro tmavý text na světlém pozadí, .lightContent pro světlý text na tmavém pozadí).

Testování přizpůsobení Notchi

Simulátory a emulátory: Xcode poskytuje simulátory všech modelů iPhone s notchem (iPhone X–14) a Dynamic Island (iPhone 14 Pro–15). Android Studio poskytuje emulátory s různými konfiguracemi výřezů (Google Pixel 3 XL, vlastní emulátor s cutout). Testujte v portrétní a krajinné orientaci, s klávesnicí i bez, v Split View (iPad). Zkontrolujte, že je veškerý obsah čitelný a nepokrytý.

Reálná zařízení: notch na simulátoru a na reálném zařízení se může lišit. Například simulátor iPhone 14 Pro zobrazuje Dynamic Island, ale bez skutečné interaktivity (Live Activities). V Androidu nemusí být punch-hole kamera přesně emulována. Nejlepším způsobem je testování na reálných zařízeních. Minimální sada: iPhone SE (bez notche), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android s punch-hole, Android s waterfall obrazovkou (Samsung Edge).

Nástroje: pro iOS používejte Xcode View Debugger s volbou "Show Safe Area Insets" — vizuálně ukáže hranice Safe Area. Pro Android — Layout Inspector v Android Studio, který zobrazuje WindowInsets a DisplayCutout na panelu Attributes. Také Accessibility Inspector je užitečný pro kontrolu, že všechny prvky uvnitř Safe Area jsou přístupné pro VoiceOver/TalkBack. Nezapomeňte na iPad bez notche, ale s Home Indicatorem (spodní odsazení ~21 pt) a zaoblenými rohy.