Notch — əsaslar, interfeysin ekran kəsikinə uyğunlaşdırılması

Notch nədir?

Notch (kəsik, "çəki") — smartfon ekranının yuxarı hissəsində ön kameranın, danışıq dinamikinin, yaxınlıq və işıqlandırma sensorlarının, iPhone X və daha yeni modellər üçün isə Face ID infraqırmızı kamerasının, nöqtə proyektorunun və işıqlandırıcının (TrueDepth kamera sistemi) yerləşdiyi sahədir. Notch bütün lazımi sensorları qoruyaraq istifadəyə yararlı ekran sahəsini artırmaq üçün tətbiq edilmişdir — yuxarı çərçivə (bezel) əvəzinə displey kəsik ətrafında yuxarıya doğru genişlənir.

Ölçülər: standart iPhone notch-inin eni ~34 mm (~6.1 düymlük modellər üçün portret oriyentasiyada ~209 pt) və hündürlüyü ~5 mm (~30 pt)-dir. Notch-in yanlarında "qulaqlar" (ears) — kəsikin sağında və solunda kiçik ekran hissələri qalır. Sağ "qulaq" adətən saatı, batareya göstəricisini və Wi-Fi-ı göstərir; sol — operatoru və statusu. Üfüqi oriyentasiyada iOS notch-i status zolağının bütün eni boyunca qara zolaqla gizlədir — məzmun kəsik zonasında göstərilmir.

Yalnız iPhone deyil: notch konsepsiyasını bir çox Android istehsalçısı mənimsədi. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — hamısında kəsik var idi. Bəzi istehsalçılar daha da irəli getdilər: "damcı" kəsik (waterdrop notch), punch-hole kamera (ekranda deşik), sürgülü kamera (çıxarılan modul). Müasir Android flaqmanları (Samsung Galaxy S23+, Google Pixel 8 Pro) geniş kəsik olmadan, ekranın yuxarı hissəsində kamera üçün minimal deşik olan punch-hole istifadə edir.

iOS-da Safe Area: safeAreaInsets

Safe Area — görünüş daxilində sistem interfeys elementləri (notch, yuvarlaq ekran küncləri (corner radius), Home Indicator, tab bar və navigation bar) tərəfindən örtülməyən düzbucaqlı sahədir. Safe Area-nın ölçüləri UIView.safeAreaInsets xassəsi — top, left, bottom, right dəyərləri olan UIEdgeInsets vasitəsilə qaytarılır. Notch-li iPhone üçün yuxarı kənar boşluq = ~44 pt (portret) və ya ~0 pt (qara zolaqlı üfüqi).

// safeAreaInsets-in məzmunun yerləşdirilməsi üçün istifadəsi
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Area kənar boşluqlarının oxunması
        let safeArea = self.view.safeAreaInsets

        // Debug üçün dəyərlərin loglanması
        print("Yuxarı inset: \(safeArea.top)")    // ~44 pt notch ilə
        print("Aşağı inset: \(safeArea.bottom)") // ~34 pt Home Indicator ilə

        // Safe Area nəzərə alınmaqla başlığın yerləşdirilməsi
        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 dəyişikliklərinin idarə edilməsi (fırlanma, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Layout-un yenidən hesablanması
    }
}

Auto Layout və Safe Area: Interface Builder-də "Superview" əvəzinə anchor hədəfi olaraq "Safe Area"-dan istifadə edin. Proqram layoutu üçün safeAreaLayoutGuide-dən istifadə edin: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS cihazın fırlanması, iPad-də Split View-ə keçid, klaviaturanın göstərilməsi/gizlənməsi və oriyentasiya dəyişikliyi zamanı safeAreaInsets-i avtomatik yeniləyir. Bütün standart UIKit kontrollerləri (UINavigationController, UITabBarController) artıq Safe Area-nı nəzərə alır. Xüsusi görünüşlər və kontrollerlər safeAreaInsets-dən açıq şəkildə istifadə etməlidir.

Android-də Notch: DisplayCutout və WindowInsets

DisplayCutout — API 28-də (Android 9.0) əlavə edilmiş, ekrandakı kəsik sahəsini təsvir edən Android SDK sinifidir. Onu WindowInsets.displayCutout() vasitəsilə əldə etmək olar. Sinif boundingBoxList — kəsik(lər)i təsvir edən düzbucaqlılar siyahısı və safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — məzmunun təhlükəsiz göstərilməsi üçün minimal kənar boşluqları qaytarır. Android müxtəlif kəsik konfiqurasiyalarını dəstəkləyir: mərkəzi (iPhone kimi), yan (küncdə kamera), qoşa (iki kamera), punch-hole.

// Activity-də DisplayCutout altında interfeysin uyğunlaşdırılması
class NotchAwareActivity : AppCompatActivity() {

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

        // Kəsik zonasında məzmunun göstərilməsinə icazə veririk (lazım olduqda)
        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)

        // WindowInsets vasitəsilə DisplayCutout-un əldə edilməsi
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Yuxarı məzmun üçün kənar boşluq təyin edirik
            headerView.updatePadding(top = safeTop)
        }
    }
}

Göstərmə rejimləri (layoutInDisplayCutoutMode): ALWAYS — məzmun kəsik zonasında göstərilə bilər (tam ekran tətbiqləri, video, oyunlar üçün); NEVER — məzmun heç vaxt kəsiyi örtmür, sistem kənar boşluq əlavə edir; SHORT_EDGES — məzmun yalnız qısa tərəfdə kəsik zonasında göstərilir (yuxarıda notch olan portret tətbiqləri üçün). Standart rejim — SHORT_EDGES (Android 12-dən etibarən). Punch-hole kamera üçün kəsik daha kiçikdir və bir çox tətbiq ekrandan maksimum istifadə üçün ALWAYS istifadə edir.

Notch-in təkamülü: iPhone X-dən Dynamic Island-ə qədər

iPhone X (2017) — notch-li ilk Apple smartfonu. Kəsik Face ID üçün TrueDepth kamerasını — infraqırmızı kamera, nöqtə proyektoru (Dot Projector) və işıqlandırıcıdan (Flood Illuminator) ibarət sistemi ehtiva edirdi. Kəsik ölçüləri: ~34 mm × 5 mm. iOS 11-də Apple tətbiqlərin uyğunlaşdırılması üçün Safe Area-nı təqdim etdi. İstifadəçilər iki yerə bölündü: bəziləri notch-i Face ID üçün zərurət kimi qəbul etdi, digərləri "kəsilmiş" ekrana görə tənqid etdi.

iPhone 13 (2021) — Apple dinamiki ekranın yuxarı çərçivəsinə sürüşdürməklə notch-i 20% azaltdı. Bu son klassik notch idi. iPhone 14 və 14 Plus (2022) azaldılmış notch-i qorudu. iPhone 14 Pro və Pro Max kameranı və Face ID sensorlarını birləşdirən, dinamik olaraq formasını dəyişən və sistem bildirişlərini (taymer, musiqi, AirPods qoşulması) göstərən ellipsformalı kəsik — Dynamic Island-i təqdim etdi. Dynamic Island öz API-si (ActivityKit, Live Activities) olan proqram platformasına çevrildi.

Dynamic Island — sadəcə kəsik deyil, interaktiv interfeys elementidir. AirPods qoşulduqda ada genişlənərək ikona və statusu göstərir. Taksi çağırışı (Uber) gəliş vaxtını göstərir. Taymer tətbiq kiçildildikdə adada görünür. Dynamic Island iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max modellərində mövcuddur. Dynamic Island üçün Safe Area: yuxarı kənar boşluq = 54 pt (klassik notch-dən 10 pt çox).

Kəsikli interfeyslər üçün dizayn qaydaları

Məzmunu heç vaxt notch-in arxasında gizlətməyin — kənar boşluqların avtomatik hesablanması üçün Safe Area və ya DisplayCutout istifadə edin. Sabit kənar boşluq dəyərləri təyin etməyin (məsələn, 44 pt) — onlar müxtəlif cihazlarda və müxtəlif oriyentasiyalarda fərqlənir. Safe Area-nı oxumaq üçün həmişə sistem API-lərindən istifadə edin: iOS-da safeAreaInsets, Android-də windowInsets.displayCutout. Bu, bütün cihazlarda düzgün göstərilməni təmin edir: iPhone SE (notch yoxdur), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (notch yoxdur, lakin Home Indicator ilə).

Üfüqi oriyentasiya — xüsusi risk zonası. Notch-li iPhone-da üfüqi rejimdə iOS avtomatik olaraq status zolağının bütün eni boyunca qara zolaq əlavə edir (notch-in solunda və sağında məzmun göstərilmir). Bu, sistem Safe Area inset = 0 top, lakin artırılmış left/right insets (~47 pt) ilə edilir. Bu davranışı söndürməyə çalışmayın — App Store üfüqi rejimdə məzmun üçün "qadağan" ekran zonalarından istifadə edən tətbiqi rədd edəcək. Tam ekran video üçün idarəetmə elementlərini notch zonasından kənarda avtomatik yerləşdirən AVPlayerViewController istifadə edin.

Fon və status zolağı: xüsusi fon rəngi istifadə edirsinizsə, o, notch arxasındakı zona da daxil olmaqla bütün ekran sahəsini doldurmalıdır. Status zolağının üzərində məzmun çəkməyin — Safe Area istifadə edin. Qaranlıq rejim üçün status zolağının oxunaqlı olduğundan əmin olun: preferredStatusBarStyle-i fon üslubunuza uyğun təyin edin (.default açıq fonda qaranlıq mətn üçün, .lightContent qaranlıq fonda açıq mətn üçün).

Notch-ə uyğunlaşmanın test edilməsi

Simulyatorlar və emulyatorlar: Xcode notch-li (iPhone X–14) və Dynamic Island-li (iPhone 14 Pro–15) bütün iPhone modellərinin simulyatorlarını təqdim edir. Android Studio müxtəlif kəsik konfiqurasiyaları olan emulyatorlar (Google Pixel 3 XL, cutout ilə xüsusi emulyator) təqdim edir. Portret və üfüqi oriyentasiyada, klaviatura ilə və klaviatura olmadan, Split View-də (iPad) test edin. Bütün məzmunun oxunaqlı və örtülməmiş olduğunu yoxlayın.

Real cihazlar: simulyatorda və real cihazda notch fərqli ola bilər. Məsələn, iPhone 14 Pro simulyatoru Dynamic Island-i göstərir, lakin real interaktivlik (Live Activities) olmadan. Android-də punch-hole kamera dəqiq emulyasiya olunmaya bilər. Ən yaxşı üsul real cihazlarda test etməkdir. Minimum dəst: iPhone SE (notch yoxdur), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), punch-hole-li Android, suallı ekranlı Android (Samsung Edge).

Alətlər: iOS üçün "Show Safe Area Insets" seçimi ilə Xcode View Debugger istifadə edin — Safe Area sərhədlərini vizual olaraq göstərəcək. Android üçün — Attributes panelində WindowInsets və DisplayCutout göstərən Android Studio Layout Inspector. Həmçinin Safe Area daxilində bütün elementlərin VoiceOver/TalkBack üçün əlçatan olduğunu yoxlamaq üçün Accessibility Inspector faydalıdır. Notch-siz, lakin Home Indicator (aşağı kənar boşluq ~21 pt) və yuvarlaq küncləri olan iPad-i unutmayın.