Notch — основе, адаптација интерфејса за изрез екрана

Шта је Notch?

Notch (изрез, "оборица") — област у горњем делу екрана паметног телефона где су смештени предња камера, говорни звучник, сензори приближавања и осветљења, а за iPhone X и новије — инфрацрвена камера Face ID, пројектор тачака и осветљење (TrueDepth camera систем). Notch је уведен да би се повећала корисна површина екрана уз задржавање свих потребних сензора — уместо горњег оквира (bezel) дисплеј се шири нагоре око изреза.

Димензије: стандардни notch iPhone-а има ширину ~34 mm (~209 pt у портрет оријентацији за моделе од 6.1 инча) и висину ~5 mm (~30 pt). Са страна notch-а остају "уши" (ears) — мали делови екрана десно и лево од изреза. Десно "уво" обично показује време, индикатор батерије и Wi-Fi; лево — оператера и статус. У пејзажној оријентацији iOS скрива notch црном траком целом ширином статус бара — садржај се не приказује у зони изреза.

Није само iPhone: концепт notch-а су преузели многи произвођачи Android-а. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — сви су имали изрез. Неки произвођачи су отишли даље: "капљичасти" изрез (waterdrop notch), punch-hole камера (отвор у екрану), клизна камера (извлачећи модул). Савремени Android флагмански модели (Samsung Galaxy S23+, Google Pixel 8 Pro) користе punch-hole — минимални отвор за камеру у горњем делу екрана, без широког изреза.

Safe Area у iOS-у: safeAreaInsets

Safe Area — је правоугаона област унутар view-а која гарантовано није прекривена системским елементима интерфејса: notch, заобљеним угловима екрана (corner radius), Home Indicator-ом, траком картица (tab bar) и навигационом траком (navigation bar). Величине Safe Area се враћају кроз својство UIView.safeAreaInsets — UIEdgeInsets са вредностима top, left, bottom, right. За iPhone са notch-ом горњи одстојник = ~44 pt (портрет) или ~0 pt (пејзаж са црном траком).

// Коришћење safeAreaInsets за позиционирање садржаја
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Читање одстојника Safe Area
        let safeArea = self.view.safeAreaInsets

        // Логирање вредности за отклањање грешака
        print("Горњи одстојник: \(safeArea.top)")    // ~44 pt са notch-ом
        print("Доњи одстојник: \(safeArea.bottom)") // ~34 pt са Home Indicator-ом

        // Позиционирање наслова у односу на 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
        )
    }

    // Обрада промена Safe Area (ротација, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Поновно израчунавање layout-а
    }
}

Auto Layout и Safe Area: у Interface Builder-у користите "Safe Area" као anchor циљ уместо "Superview". За програмски layout користите safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS аутоматски ажурира safeAreaInsets при ротацији уређаја, преласку у Split View на iPad-у, приказивању/сакривању тастатуре и промени оријентације. Сви стандардни UIKit контролери (UINavigationController, UITabBarController) већ узимају у обзир Safe Area. Прилагођени прегледи и контролери морају експлицитно користити safeAreaInsets.

Notch у Android-у: DisplayCutout и WindowInsets

DisplayCutout — класа Android SDK, додата у API 28 (Android 9.0), која описује област изреза на екрану. Може се добити кроз WindowInsets.displayCutout(). Класа враћа boundingBoxList — листу правоугаоника који описују изрез(е) и safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — минималне одстојнике за безбедно приказивање садржаја. Android подржава различите конфигурације изреза: централни (као iPhone), бочни (камера у углу), двоструки (две камере), punch-hole.

// Адаптација интерфејса за DisplayCutout у Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Дозвољавамо приказ садржаја у зони изреза (ако је потребно)
        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-а кроз WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Постављамо одстојник за горњи садржај
            headerView.updatePadding(top = safeTop)
        }
    }
}

Режими приказивања (layoutInDisplayCutoutMode): ALWAYS — садржај се може приказивати у зони изреза (за full-screen апликације, видео, игре); NEVER — садржај никада не прекрива изрез, систем додаје одстојник; SHORT_EDGES — садржај се приказује у зони изреза само на краткој страни (за портрет апликације са notch-ом горе). Стандардни режим — SHORT_EDGES (од Android 12). За punch-hole камеру изрез је мањи и многе апликације користе ALWAYS за максимално коришћење екрана.

Еволуција Notch-а: од iPhone X до Dynamic Island-а

iPhone X (2017) — први Apple паметни телефон са notch-ом. Изрез је садржао TrueDepth камеру за Face ID — систем од инфрацрвене камере, пројектора тачака (Dot Projector) и осветљења (Flood Illuminator). Димензије изреза: ~34 mm × 5 mm. У iOS 11 Apple је представио Safe Area за адаптацију апликација. Корисници су се поделили: једни су прихватили notch као нужност за Face ID, други су га критиковали због "скраћеног" екрана.

iPhone 13 (2021) — Apple је смањио notch за 20% померањем звучника ка горњем оквиру екрана. Ово је био последњи класични notch. iPhone 14 и 14 Plus (2022) задржали су смањени notch. iPhone 14 Pro и Pro Max представили су Dynamic Island — елипсоидни изрез који обједињује камеру и Face ID сензоре, динамички мења облик и приказује системска обавештења (тајмер, музика, повезивање AirPods-а). Dynamic Island је постао софтверска платформа са сопственим API-јем (ActivityKit, Live Activities).

Dynamic Island — није само изрез, већ интерактивни елемент интерфејса. При повезивању AirPods-а, острво се шири приказујући икону и статус. Позив таксија (Uber) приказује време доласка. Тајмер је видљив у острву при минимизацији апликације. Dynamic Island је доступан на iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area за Dynamic Island: горњи одстојник = 54 pt (10 pt више од класичног notch-а).

Design правила за интерфејсе са изрезом

Никада не сакривајте садржај иза notch-а — користите Safe Area или DisplayCutout за аутоматско израчунавање одстојника. Немојте постављати фиксне вредности одстојника (нпр. 44 pt) — оне се разликују на различитим уређајима и у различитим оријентацијама. Увек користите системске API-је за читање Safe Area: safeAreaInsets у iOS-у, windowInsets.displayCutout у Android-у. Ово гарантује коректан приказ на свим уређајима: iPhone SE (без notch-а), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (без notch-а, али са Home Indicator-ом).

Пејзажна оријентација — посебна зона ризика. На iPhone-у са notch-ом у пејзажу iOS аутоматски додаје црну траку целом ширином статус бара (садржај лево и десно од notch-а се не приказује). Ово се ради системским Safe Area inset = 0 top, али увећаним left/right insets (~47 pt). Не покушавајте да искључите ово понашање — App Store ће одбити апликацију која користи "забрањене" зоне екрана за садржај у пејзажу. За full-screen видео користите AVPlayerViewController, који аутоматски распоређује контроле ван зоне notch-а.

Позадина и статус бар: ако користите прилагођену боју позадине, она треба да испуњава целу област екрана, укључујући зону иза notch-а. Не цртајте садржај преко статус бара — користите Safe Area. За тамни режим уверите се да је статус бар читљив: подесите preferredStatusBarStyle према стилу ваше позадине (.default за тамни текст на светлој позадини, .lightContent за светли текст на тамној позадини).

Тестирање адаптације за Notch

Симулатори и емулатори: Xcode пружа симулаторе свих модела iPhone-а са notch-ом (iPhone X–14) и Dynamic Island-ом (iPhone 14 Pro–15). Android Studio пружа емулаторе са различитим конфигурацијама изреза (Google Pixel 3 XL, прилагођени емулатор са cutout-ом). Тестирајте у портретној и пејзажној оријентацији, са тастатуром и без ње, у Split View-у (iPad). Проверите да је сав садржај читљив и непокривен.

Реални уређаји: notch на симулатору и на реалном уређају може се разликовати. На пример, симулатор iPhone 14 Pro приказује Dynamic Island, али без реалне интерактивности (Live Activities). За Android punch-hole камера можда неће бити прецизно емулована. Најбољи начин је тестирање на реалним уређајима. Минимални сет: iPhone SE (без notch-а), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android са punch-hole-ом, Android са waterfall екраном (Samsung Edge).

Алати: за iOS користите Xcode View Debugger са опцијом "Show Safe Area Insets" — визуелно ће показати границе Safe Area. За Android — Layout Inspector у Android Studio, који приказује WindowInsets и DisplayCutout на панелу Attributes. Такође је користан Accessibility Inspector за проверу да су сви елементи унутар Safe Area доступни за VoiceOver/TalkBack. Не заборавите на iPad без notch-а, али са Home Indicator-ом (доњи одстојник ~21 pt) и заобљеним угловима.