Notch — asoslar, interfeysni ekran kesigiga moslashtirish

Notch nima?

Notch (kesik, "qosh") — smartfon ekranining yuqori qismida old kamera, so'zlashuv dinamiki, yaqinlik va yorug'lik sensorlari, iPhone X va undan yangilari uchun esa Face ID infraqizil kamerasi, nuqta proyektori va yoritgich (TrueDepth camera tizimi) joylashgan maydondir. Notch barcha kerakli sensorlarni saqlab qolgan holda ekranning foydali maydonini oshirish uchun joriy qilingan — yuqori ramka (bezel) o'rniga displey kesik atrofida yuqoriga qarab kengayadi.

O'lchamlar: standart iPhone notchining kengligi ~34 mm (~6.1 dyuymli modellar uchun portret yo'nalishida ~209 pt) va balandligi ~5 mm (~30 pt). Notchning yonlarida "quloqlar" (ears) — kesikning o'ng va chap tomonidagi kichik ekran qismlari qoladi. O'ng "quloq" odatda soatni, batareya ko'rsatkichini va Wi-Fi ni ko'rsatadi; chap — operatorni va holatni. Landshaft yo'nalishida iOS notch ni status chizig'ining butun kengligi bo'ylab qora chiziq bilan yashiradi — kontent kesik zonasida ko'rsatilmaydi.

Faqat iPhone emas: notch kontseptsiyasini ko'plab Android ishlab chiqaruvchilari o'zlashtirdi. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — hammasida kesik bor edi. Ba'zi ishlab chiqaruvchilar uzoqroqqa bordi: "tomchi" kesik (waterdrop notch), punch-hole kamera (ekranda teshik), surilma kamera (chiqariladigan modul). Zamonaviy Android flagmanlari (Samsung Galaxy S23+, Google Pixel 8 Pro) keng kesiksiz, ekranning yuqori qismida kamera uchun minimal teshik bo'lgan punch-hole dan foydalanadi.

iOS da Safe Area: safeAreaInsets

Safe Area — bu view ichidagi to'rtburchak maydon bo'lib, u tizim interfeys elementlari: notch, ekranning yumaloq burchaklari (corner radius), Home Indicator, tab bar va navigation bar tomonidan yopilmasligi kafolatlangan. Safe Area ning o'lchamlari UIView.safeAreaInsets xususiyati — top, left, bottom, right qiymatlari bilan UIEdgeInsets orqali qaytariladi. Notch li iPhone uchun yuqori chekka bo'shliq = ~44 pt (portret) yoki ~0 pt (qora chiziqli landshaft).

// safeAreaInsets dan kontentni joylashtirish uchun foydalanish
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Area chekka bo'shliqlarini o'qish
        let safeArea = self.view.safeAreaInsets

        // Disk raskadrovka uchun qiymatlarni loglash
        print("Yuqori inset: \(safeArea.top)")    // ~44 pt notch bilan
        print("Pastki inset: \(safeArea.bottom)") // ~34 pt Home Indicator bilan

        // Safe Area ni hisobga olgan holda sarlavhani joylashtirish
        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 o'zgarishlarini boshqarish (aylanish, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Layout ni qayta hisoblash
    }
}

Auto Layout va Safe Area: Interface Builder da "Superview" o'rniga "Safe Area" dan anchor maqsadi sifatida foydalaning. Dasturiy layout uchun safeAreaLayoutGuide dan foydalaning: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS qurilmaning aylanishi, iPad da Split View ga o'tish, klaviaturaning ko'rsatilishi/yashirilishi va yo'nalish o'zgarishi paytida safeAreaInsets ni avtomatik yangilaydi. Barcha standart UIKit kontrollerlari (UINavigationController, UITabBarController) allaqachon Safe Area ni hisobga oladi. Maxsus view va kontrollerlar safeAreaInsets dan aniq foydalanishi kerak.

Android da Notch: DisplayCutout va WindowInsets

DisplayCutout — API 28 (Android 9.0) da qo'shilgan, ekrandagi kesik maydonini tavsiflovchi Android SDK sinfidir. Uni WindowInsets.displayCutout() orqali olish mumkin. Sinf boundingBoxList — kesik(lar)ni tavsiflovchi to'rtburchaklar ro'yxati va safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — kontentni xavfsiz ko'rsatish uchun minimal chekka bo'shliqlarni qaytaradi. Android turli kesik konfiguratsiyalarini qo'llab-quvvatlaydi: markaziy (iPhone kabi), yon (burchakda kamera), qo'sh (ikki kamera), punch-hole.

// Activity da DisplayCutout ostida interfeysni moslashtirish
class NotchAwareActivity : AppCompatActivity() {

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

        // Kesik zonasida kontentni ko'rsatishga ruxsat beramiz (agar kerak bo'lsa)
        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 orqali DisplayCutout ni olish
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Yuqori kontent uchun chekka bo'shliq o'rnatamiz
            headerView.updatePadding(top = safeTop)
        }
    }
}

Ko'rsatish rejimlari (layoutInDisplayCutoutMode): ALWAYS — kontent kesik zonasida ko'rsatilishi mumkin (to'liq ekran ilovalari, video, o'yinlar uchun); NEVER — kontent hech qachon kesikni yopmaydi, tizim chekka bo'shliq qo'shadi; SHORT_EDGES — kontent faqat qisqa tomonda kesik zonasida ko'rsatiladi (yuqorida notch li portret ilovalari uchun). Standart rejim — SHORT_EDGES (Android 12 dan boshlab). Punch-hole kamera uchun kesik kichikroq va ko'plab ilovalar ekrandan maksimal foydalanish uchun ALWAYS dan foydalanadi.

Notch evolyutsiyasi: iPhone X dan Dynamic Island gacha

iPhone X (2017) — notch li birinchi Apple smartfoni. Kesik Face ID uchun TrueDepth kamerasi — infraqizil kamera, nuqta proyektori (Dot Projector) va yoritgichdan (Flood Illuminator) iborat tizimni o'z ichiga olgan. Kesik o'lchamlari: ~34 mm × 5 mm. iOS 11 da Apple ilovalarni moslashtirish uchun Safe Area ni taqdim etdi. Foydalanuvchilar ikkiga bo'lindi: ba'zilar notch ni Face ID uchun zarurat sifatida qabul qildi, boshqalar "kesilgan" ekran uchun tanqid qildi.

iPhone 13 (2021) — Apple dinamikni ekranning yuqori ramkasiga siljitish orqali notch ni 20% ga qisqartirdi. Bu oxirgi klassik notch edi. iPhone 14 va 14 Plus (2022) qisqartirilgan notch ni saqlab qoldi. iPhone 14 Pro va Pro Max kamerani va Face ID sensorlarini birlashtirgan, dinamik ravishda shaklini o'zgartiradigan va tizim bildirishnomalarini (taymer, musiqa, AirPods ulanishi) ko'rsatadigan ellips shaklidagi kesik — Dynamic Island ni taqdim etdi. Dynamic Island o'z API si (ActivityKit, Live Activities) bilan dasturiy platformaga aylandi.

Dynamic Island — shunchaki kesik emas, balki interaktiv interfeys elementidir. AirPods ulanganda orol kengayib, ikonka va holatni ko'rsatadi. Taksi chaqiruvi (Uber) kelish vaqtini ko'rsatadi. Taymer ilova minimallashtirilganda orolda ko'rinadi. Dynamic Island iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max modellarida mavjud. Dynamic Island uchun Safe Area: yuqori chekka bo'shliq = 54 pt (klassik notch dan 10 pt ko'p).

Kesikli interfeyslar uchun dizayn qoidalari

Kontentni hech qachon notch orqasiga yashirmang — chekka bo'shliqlarni avtomatik hisoblash uchun Safe Area yoki DisplayCutout dan foydalaning. Ruxsat etilgan chekka bo'shliq qiymatlarini (masalan, 44 pt) o'rnatmang — ular turli qurilmalarda va turli yo'nalishlarda farqlanadi. Safe Area ni o'qish uchun doimo tizim API laridan foydalaning: iOS da safeAreaInsets, Android da windowInsets.displayCutout. Bu barcha qurilmalarda to'g'ri ko'rsatilishni kafolatlaydi: iPhone SE (notch yo'q), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (notch yo'q, lekin Home Indicator bilan).

Landshaft yo'nalishi — alohida xavf zonasi. Notch li iPhone da landshaftda iOS avtomatik ravishda status chizig'ining butun kengligi bo'ylab qora chiziq qo'shadi (notch ning chap va o'ng tomonidagi kontent ko'rsatilmaydi). Bu tizim tomonidan Safe Area inset = 0 top, lekin oshirilgan left/right insets (~47 pt) bilan amalga oshiriladi. Ushbu xatti-harakatni o'chirishga urinmang — App Store landshaftda kontent uchun "taqiqlangan" ekran zonalaridan foydalanadigan ilovani rad etadi. To'liq ekran video uchun boshqaruv elementlarini notch zonasidan tashqarida avtomatik joylashtiradigan AVPlayerViewController dan foydalaning.

Fon va status chizig'i: agar maxsus fon rangidan foydalansangiz, u notch orqasidagi zonani ham o'z ichiga olgan holda butun ekran maydonini to'ldirishi kerak. Status chizig'i ustida kontent chizmang — Safe Area dan foydalaning. Qorong'i rejim uchun status chizig'i o'qilishi mumkinligiga ishonch hosil qiling: preferredStatusBarStyle ni fon uslubingizga mos qilib o'rnating (.default ochiq fonda qorong'i matn uchun, .lightContent qorong'i fonda ochiq matn uchun).

Notch ga moslashtirishni test qilish

Simulyatorlar va emulyatorlar: Xcode notch li (iPhone X–14) va Dynamic Island li (iPhone 14 Pro–15) barcha iPhone modellarining simulyatorlarini taqdim etadi. Android Studio turli kesik konfiguratsiyalari bo'lgan emulyatorlar (Google Pixel 3 XL, cutout bilan maxsus emulyator) taqdim etadi. Portret va landshaft yo'nalishida, klaviatura bilan va klaviatura siz, Split View (iPad) da test qiling. Barcha kontentning o'qilishi mumkin va yopilmaganligini tekshiring.

Haqiqiy qurilmalar: simulyatorda va haqiqiy qurilmada notch farq qilishi mumkin. Masalan, iPhone 14 Pro simulyatori Dynamic Island ni ko'rsatadi, lekin haqiqiy interaktivlik (Live Activities) siz. Android da punch-hole kamera aniq emulyatsiya qilinmasligi mumkin. Eng yaxshi usul — haqiqiy qurilmalarda test qilish. Minimal to'plam: iPhone SE (notch yo'q), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), punch-hole li Android, waterfall ekranli Android (Samsung Edge).

Asboblar: iOS uchun "Show Safe Area Insets" opsiyasi bilan Xcode View Debugger dan foydalaning — Safe Area chegaralarini vizual ravishda ko'rsatadi. Android uchun — Attributes panelida WindowInsets va DisplayCutout ni ko'rsatadigan Android Studio Layout Inspector. Shuningdek, Safe Area ichidagi barcha elementlarning VoiceOver/TalkBack uchun mavjudligini tekshirish uchun Accessibility Inspector foydalidir. Notch siz, lekin Home Indicator (pastki chekka bo'shliq ~21 pt) va yumaloq burchaklari bo'lgan iPad ni unutmang.