Notch — noțiuni de bază, adaptarea interfeței la decupajul ecranului

Ce este Notch?

Notch (decupaj, "sprânceană") — zona din partea superioară a ecranului smartphone-ului unde sunt amplasate camera frontală, difuzorul de convorbire, senzorii de proximitate și lumină, iar pentru iPhone X și mai noi — camera infraroșu Face ID, proiectorul de puncte și iluminatorul (sistemul TrueDepth camera). Notch a fost introdus pentru a crește suprafața utilă a ecranului păstrând în același timp toți senzorii necesari — în locul ramelor superioare (bezel), display-ul se extinde în sus în jurul decupajului.

Dimensiuni: notch-ul standard iPhone are lățimea de ~34 mm (~209 pt în orientare portret pentru modelele de 6.1 inci) și înălțimea de ~5 mm (~30 pt). Pe lângă notch rămân "urechi" (ears) — mici porțiuni de ecran în dreapta și stânga decupajului. "Urechea" dreaptă arată de obicei ora, indicatorul bateriei și Wi-Fi; cea stângă — operatorul și starea. În orientare peisaj, iOS ascunde notch-ul cu o bară neagră pe toată lățimea barei de stare — conținutul nu se afișează în zona decupajului.

Nu doar iPhone: conceptul de notch a fost adoptat de mulți producători Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — toate aveau decupaj. Unii producători au mers mai departe: decupaj "în picătură" (waterdrop notch), cameră punch-hole (orificiu în ecran), cameră glisantă (modul culisant). Flagship-urile moderne Android (Samsung Galaxy S23+, Google Pixel 8 Pro) folosesc punch-hole — un orificiu minim pentru cameră în partea superioară a ecranului, fără un decupaj larg.

Safe Area în iOS: safeAreaInsets

Safe Area — este o zonă dreptunghiulară în interiorul view-ului care este garantat neacoperită de elementele sistemului de interfață: notch, colțurile rotunjite ale ecranului (corner radius), Home Indicator, bara de file (tab bar) și bara de navigare (navigation bar). Dimensiunile Safe Area sunt returnate prin proprietatea UIView.safeAreaInsets — UIEdgeInsets cu valorile top, left, bottom, right. Pentru iPhone cu notch, marginea superioară = ~44 pt (portret) sau ~0 pt (peisaj cu bară neagră).

// Utilizarea safeAreaInsets pentru poziționarea conținutului
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Citirea marginilor Safe Area
        let safeArea = self.view.safeAreaInsets

        // Logarea valorilor pentru depanare
        print("Marginea superioară: \(safeArea.top)")    // ~44 pt cu notch
        print("Marginea inferioară: \(safeArea.bottom)") // ~34 pt cu Home Indicator

        // Poziționarea titlului ținând cont de 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
        )
    }

    // Gestionarea modificărilor Safe Area (rotire, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Recalculare layout
    }
}

Auto Layout și Safe Area: în Interface Builder, utilizați "Safe Area" ca țintă anchor în loc de "Superview". Pentru layout programatic, utilizați safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS actualizează automat safeAreaInsets la rotirea dispozitivului, trecerea în Split View pe iPad, afișarea/ascunderea tastaturii și schimbarea orientării. Toate controlerele standard UIKit (UINavigationController, UITabBarController) iau deja în considerare Safe Area. View-urile și controlerele personalizate trebuie să folosească explicit safeAreaInsets.

Notch în Android: DisplayCutout și WindowInsets

DisplayCutout — clasa Android SDK, adăugată în API 28 (Android 9.0), care descrie zona de decupaj pe ecran. Se poate obține prin WindowInsets.displayCutout(). Clasa returnează boundingBoxList — o listă de dreptunghiuri care descriu decupajul(urile) și safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — marginile minime pentru afișarea sigură a conținutului. Android suportă diverse configurații de decupaj: central (ca iPhone), lateral (cameră în colț), dublu (două camere), punch-hole.

// Adaptarea interfeței la DisplayCutout în Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Permitem afișarea conținutului în zona decupajului (dacă este necesar)
        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)

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

            // Setăm marginea pentru conținutul superior
            headerView.updatePadding(top = safeTop)
        }
    }
}

Moduri de afișare (layoutInDisplayCutoutMode): ALWAYS — conținutul poate fi afișat în zona de decupaj (pentru aplicații full-screen, video, jocuri); NEVER — conținutul nu acoperă niciodată decupajul, sistemul adaugă margini; SHORT_EDGES — conținutul este afișat în zona de decupaj doar pe latura scurtă (pentru aplicații portret cu notch sus). Modul standard — SHORT_EDGES (începând cu Android 12). Pentru camera punch-hole, decupajul este mai mic și multe aplicații folosesc ALWAYS pentru utilizarea maximă a ecranului.

Evoluția Notch: de la iPhone X la Dynamic Island

iPhone X (2017) — primul smartphone Apple cu notch. Decupajul conținea camera TrueDepth pentru Face ID — un sistem format din cameră infraroșu, proiector de puncte (Dot Projector) și iluminator (Flood Illuminator). Dimensiunile decupajului: ~34 mm × 5 mm. În iOS 11, Apple a introdus Safe Area pentru adaptarea aplicațiilor. Utilizatorii s-au împărțit: unii au acceptat notch-ul ca necesitate pentru Face ID, alții l-au criticat pentru ecranul "tăiat".

iPhone 13 (2021) — Apple a redus notch-ul cu 20% prin mutarea difuzorului spre rama superioară a ecranului. Acesta a fost ultimul notch clasic. iPhone 14 și 14 Plus (2022) au păstrat notch-ul redus. iPhone 14 Pro și Pro Max au introdus Dynamic Island — un decupaj elipsoidal care combină camera și senzorii Face ID, își schimbă dinamic forma și afișează notificări de sistem (timer, muzică, conectare AirPods). Dynamic Island a devenit o platformă software cu API propriu (ActivityKit, Live Activities).

Dynamic Island — nu doar un decupaj, ci un element interactiv de interfață. La conectarea AirPods, insula se extinde arătând pictograma și starea. Comanda unui taxi (Uber) afișează timpul de sosire. Timer-ul este vizibil în insulă la minimizarea aplicației. Dynamic Island este disponibil pe iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area pentru Dynamic Island: marginea superioară = 54 pt (cu 10 pt mai mult decât notch-ul clasic).

Reguli de design pentru interfețe cu decupaj

Nu ascundeți niciodată conținutul în spatele notch-ului — utilizați Safe Area sau DisplayCutout pentru calculul automat al marginilor. Nu setați valori fixe ale marginilor (de exemplu, 44 pt) — acestea diferă pe diferite dispozitive și în diferite orientări. Folosiți întotdeauna API-urile de sistem pentru citirea Safe Area: safeAreaInsets în iOS, windowInsets.displayCutout în Android. Aceasta garantează afișarea corectă pe toate dispozitivele: iPhone SE (fără notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (fără notch, dar cu Home Indicator).

Orientarea peisaj — o zonă de risc specială. Pe iPhone cu notch în peisaj, iOS adaugă automat o bară neagră pe toată lățimea barei de stare (conținutul în stânga și dreapta notch-ului nu se afișează). Acest lucru se face prin Safe Area inset = 0 top, dar cu left/right insets mărite (~47 pt). Nu încercați să dezactivați acest comportament — App Store va respinge aplicația care folosește zone "interzise" ale ecranului pentru conținut în peisaj. Pentru video full-screen, utilizați AVPlayerViewController, care plasează automat comenzile în afara zonei notch-ului.

Fundalul și bara de stare: dacă utilizați o culoare de fundal personalizată, aceasta trebuie să umple întreaga zonă a ecranului, inclusiv zona din spatele notch-ului. Nu desenați conținut peste bara de stare — utilizați Safe Area. Pentru modul întunecat, asigurați-vă că bara de stare este lizibilă: setați preferredStatusBarStyle în funcție de stilul fundalului (.default pentru text întunecat pe fundal deschis, .lightContent pentru text deschis pe fundal întunecat).

Testarea adaptării la Notch

Simulatoare și emulatoare: Xcode oferă simulatoare pentru toate modelele iPhone cu notch (iPhone X–14) și Dynamic Island (iPhone 14 Pro–15). Android Studio oferă emulatoare cu diverse configurații de decupaje (Google Pixel 3 XL, emulator personalizat cu cutout). Testați în orientare portret și peisaj, cu și fără tastatură, în Split View (iPad). Verificați că tot conținutul este lizibil și neacoperit.

Dispozitive reale: notch-ul pe simulator și pe un dispozitiv real poate diferi. De exemplu, simulatorul iPhone 14 Pro arată Dynamic Island, dar fără interactivitatea reală (Live Activities). În Android, camera punch-hole poate să nu fie emulată exact. Cea mai bună metodă este testarea pe dispozitive reale. Setul minim: iPhone SE (fără notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android cu punch-hole, Android cu ecran waterfall (Samsung Edge).

Instrumente: pentru iOS, utilizați Xcode View Debugger cu opțiunea "Show Safe Area Insets" — va arăta vizual limitele Safe Area. Pentru Android — Layout Inspector în Android Studio, care afișează WindowInsets și DisplayCutout în panoul Attributes. De asemenea, Accessibility Inspector este util pentru a verifica că toate elementele din Safe Area sunt accesibile pentru VoiceOver/TalkBack. Nu uitați de iPad fără notch, dar cu Home Indicator (marginea inferioară ~21 pt) și colțuri rotunjite.