Notch — mga batayan, pag-angkop ng interface sa ginupit ng screen

Ano ang Notch?

Notch (ginupit, "kilay") — ang lugar sa itaas na bahagi ng screen ng smartphone kung saan nakalagay ang front camera, speaker ng tawag, proximity at light sensors, at para sa iPhone X at mas bago — ang infrared camera ng Face ID, dot projector, at illuminator (TrueDepth camera system). Ipinakilala ang notch upang mapataas ang kapaki-pakinabang na lugar ng screen habang pinapanatili ang lahat ng kinakailangang sensor — sa halip na itaas na bezel, lumalawak ang display pataas sa paligid ng ginupit.

Mga sukat: ang karaniwang notch ng iPhone ay may lapad na ~34 mm (~209 pt sa portrait orientation para sa 6.1-inch models) at taas na ~5 mm (~30 pt). Sa mga gilid ng notch ay may "mga tainga" (ears) — maliliit na bahagi ng screen sa kanan at kaliwa ng ginupit. Ang kanang "tainga" ay karaniwang nagpapakita ng oras, indicator ng baterya, at Wi-Fi; ang kaliwa — operator at status. Sa landscape orientation, itinago ng iOS ang notch gamit ang itim na bar sa buong lapad ng status bar — hindi ipinapakita ang content sa zone ng ginupit.

Hindi lang iPhone: ang konsepto ng notch ay ginamit ng maraming manufacturer ng Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — lahat ay may ginupit. Ang ilang manufacturer ay nagtuloy pa: "tulad ng patak" na ginupit (waterdrop notch), punch-hole camera (butas sa screen), slider camera (nauurong module). Ang mga modernong Android flagship (Samsung Galaxy S23+, Google Pixel 8 Pro) ay gumagamit ng punch-hole — isang minimal na butas para sa camera sa itaas na bahagi ng screen, walang malawak na ginupit.

Safe Area sa iOS: safeAreaInsets

Safe Area — ay isang parihabang lugar sa loob ng view na garantadong hindi natatakpan ng mga system interface element: notch, bilugang sulok ng screen (corner radius), Home Indicator, tab bar, at navigation bar. Ang mga sukat ng Safe Area ay ibinabalik sa pamamagitan ng property na UIView.safeAreaInsets — UIEdgeInsets na may mga value na top, left, bottom, right. Para sa iPhone na may notch, ang itaas na margin = ~44 pt (portrait) o ~0 pt (landscape na may itim na bar).

// Paggamit ng safeAreaInsets para sa pagpoposisyon ng content
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Pagbasa ng Safe Area margin
        let safeArea = self.view.safeAreaInsets

        // Pag-log ng mga value para sa debugging
        print("Itaas na inset: \(safeArea.top)")    // ~44 pt na may notch
        print("Ibaba na inset: \(safeArea.bottom)") // ~34 pt na may Home Indicator

        // Pagpoposisyon ng pamagat na isinasaalang-alang ang 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
        )
    }

    // Pamamahala ng mga pagbabago sa Safe Area (pag-ikot, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Muling pagkalkula ng layout
    }
}

Auto Layout at Safe Area: sa Interface Builder, gamitin ang "Safe Area" bilang anchor target sa halip na "Superview". Para sa programmatic layout, gamitin ang safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). Awtomatikong ina-update ng iOS ang safeAreaInsets sa pag-ikot ng device, paglipat sa Split View sa iPad, pagpapakita/pagtatago ng keyboard, at pagbabago ng orientation. Lahat ng standard UIKit controllers (UINavigationController, UITabBarController) ay isinasaalang-alang na ang Safe Area. Ang mga custom na view at controller ay dapat na tahasang gumamit ng safeAreaInsets.

Notch sa Android: DisplayCutout at WindowInsets

DisplayCutout — ang klase ng Android SDK, idinagdag sa API 28 (Android 9.0), na naglalarawan ng lugar ng ginupit sa screen. Maaari itong makuha sa pamamagitan ng WindowInsets.displayCutout(). Ang klase ay nagbabalik ng boundingBoxList — listahan ng mga parihaba na naglalarawan ng (mga) ginupit, at safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — mga minimal na margin para sa ligtas na pagpapakita ng content. Sinusuportahan ng Android ang iba't ibang configuration ng ginupit: gitna (tulad ng iPhone), gilid (kamera sa sulok), doble (dalawang kamera), punch-hole.

// Pag-angkop ng interface sa DisplayCutout sa Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Pinapayagan ang pagpapakita ng content sa zone ng ginupit (kung kinakailangan)
        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)

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

            // Pagtatakda ng margin para sa itaas na content
            headerView.updatePadding(top = safeTop)
        }
    }
}

Mga mode ng pagpapakita (layoutInDisplayCutoutMode): ALWAYS — ang content ay maaaring ipakita sa zone ng ginupit (para sa full-screen apps, video, laro); NEVER — hindi kailanman natatakpan ng content ang ginupit, nagdadagdag ng margin ang system; SHORT_EDGES — ang content ay ipinapakita sa zone ng ginupit lamang sa maikling gilid (para sa portrait apps na may notch sa itaas). Standard mode — SHORT_EDGES (mula Android 12). Para sa punch-hole camera, mas maliit ang ginupit at maraming app ang gumagamit ng ALWAYS para sa maximum na paggamit ng screen.

Ebolusyon ng Notch: mula iPhone X hanggang Dynamic Island

iPhone X (2017) — ang unang smartphone ng Apple na may notch. Naglalaman ang ginupit ng TrueDepth camera para sa Face ID — isang sistema na binubuo ng infrared camera, dot projector (Dot Projector), at illuminator (Flood Illuminator). Mga sukat ng ginupit: ~34 mm × 5 mm. Sa iOS 11, ipinakilala ng Apple ang Safe Area para sa adaptasyon ng mga app. Nahati ang mga user: ang iba ay tinanggap ang notch bilang pangangailangan para sa Face ID, ang iba naman ay binatikos ito dahil sa "pinutol" na screen.

iPhone 13 (2021) — Binawasan ng Apple ang notch ng 20% sa pamamagitan ng paglipat ng speaker sa itaas na bezel ng screen. Ito ang huling klasikong notch. Ang iPhone 14 at 14 Plus (2022) ay nagpanatili ng pinababang notch. Ipinakilala ng iPhone 14 Pro at Pro Max ang Dynamic Island — isang ellipsoid na ginupit na pinagsasama ang camera at Face ID sensors, na dynamic na nagbabago ng hugis at nagpapakita ng mga system notification (timer, musika, pagkonekta ng AirPods). Naging software platform ang Dynamic Island na may sariling API (ActivityKit, Live Activities).

Dynamic Island — hindi lang isang ginupit, kundi isang interactive na elemento ng interface. Kapag nagkokonekta ng AirPods, lumalawak ang isla na nagpapakita ng icon at status. Ang pagtawag ng taxi (Uber) ay nagpapakita ng oras ng pagdating. Ang timer ay nakikita sa isla kapag pinaliit ang app. Ang Dynamic Island ay available sa iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area para sa Dynamic Island: itaas na margin = 54 pt (10 pt higit sa klasikong notch).

Mga panuntunan sa disenyo para sa mga interface na may ginupit

Huwag kailanman itago ang content sa likod ng notch — gamitin ang Safe Area o DisplayCutout para sa awtomatikong pagkalkula ng mga margin. Huwag magtakda ng mga fixed margin value (hal. 44 pt) — nag-iiba ang mga ito sa iba't ibang device at orientation. Palaging gamitin ang system API para sa pagbabasa ng Safe Area: safeAreaInsets sa iOS, windowInsets.displayCutout sa Android. Ginagarantiya nito ang tamang pagpapakita sa lahat ng device: iPhone SE (walang notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (walang notch, ngunit may Home Indicator).

Landscape orientation — isang espesyal na risk zone. Sa iPhone na may notch sa landscape, awtomatikong nagdaragdag ang iOS ng itim na bar sa buong lapad ng status bar (hindi ipinapakita ang content sa kaliwa at kanan ng notch). Ginagawa ito sa pamamagitan ng system Safe Area inset = 0 top, ngunit may pinalaking left/right insets (~47 pt). Huwag subukang i-disable ang behavior na ito — tatanggihan ng App Store ang app na gumagamit ng "bawal" na screen zone para sa content sa landscape. Para sa full-screen na video, gamitin ang AVPlayerViewController, na awtomatikong naglalagay ng mga kontrol sa labas ng notch zone.

Background at status bar: kung gumagamit ka ng custom na kulay ng background, dapat nitong punan ang buong lugar ng screen, kasama ang zone sa likod ng notch. Huwag gumuhit ng content sa ibabaw ng status bar — gamitin ang Safe Area. Para sa dark mode, tiyaking nababasa ang status bar: itakda ang preferredStatusBarStyle ayon sa estilo ng iyong background (.default para sa dark text sa light background, .lightContent para sa light text sa dark background).

Pagsubok ng adaptasyon sa Notch

Simulator at emulator: Ang Xcode ay nagbibigay ng mga simulator ng lahat ng modelo ng iPhone na may notch (iPhone X–14) at Dynamic Island (iPhone 14 Pro–15). Ang Android Studio ay nagbibigay ng mga emulator na may iba't ibang configuration ng ginupit (Google Pixel 3 XL, custom emulator na may cutout). Subukan sa portrait at landscape orientation, may at walang keyboard, sa Split View (iPad). Suriin na ang lahat ng content ay nababasa at hindi natatakpan.

Tunay na device: ang notch sa simulator at sa tunay na device ay maaaring magkaiba. Halimbawa, ang simulator ng iPhone 14 Pro ay nagpapakita ng Dynamic Island, ngunit walang tunay na interaktiviti (Live Activities). Sa Android, ang punch-hole camera ay maaaring hindi tumpak na ma-emulate. Ang pinakamahusay na paraan ay ang pagsubok sa mga tunay na device. Minimal set: iPhone SE (walang notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android na may punch-hole, Android na may waterfall screen (Samsung Edge).

Mga tool: para sa iOS, gamitin ang Xcode View Debugger na may opsyon na "Show Safe Area Insets" — biswal na magpapakita ng mga hangganan ng Safe Area. Para sa Android — Layout Inspector sa Android Studio, na nagpapakita ng WindowInsets at DisplayCutout sa Attributes panel. Ang Accessibility Inspector ay kapaki-pakinabang din para suriin na ang lahat ng elemento sa loob ng Safe Area ay accessible para sa VoiceOver/TalkBack. Huwag kalimutan ang iPad na walang notch, ngunit may Home Indicator (ibaba margin ~21 pt) at bilugang sulok.