Notch — temeller, ekran kesintisine arayüz uyarlaması

Notch Nedir?

Notch (kesinti, çentik), akıllı telefon ekranının üst kısmında ön kameranın, ahize hoparlörünün, yakınlık ve ortam ışığı sensörlerinin ve iPhone X ve sonrası için kızılötesi Face ID kamerasının, nokta projektörünün ve aydınlatıcının (TrueDepth kamera sistemi) bulunduğu bir alandır. Notch, gerekli tüm sensörleri korurken kullanılabilir ekran alanını artırmak için tanıtıldı — üst çerçeve (bezel) yerine, ekran kesintinin etrafında yukarı doğru uzanır.

Boyutlar: standart iPhone notch'u yaklaşık ~34 mm genişliğinde (6,1 inç modeller için dikeyde ~209 pt) ve ~5 mm yüksekliğindedir (~30 pt). Notch'un yanlarında "kulaklar" bulunur — kesintinin sağında ve solunda küçük ekran bölümleri. Sağ "kulak" genellikle saati, pil göstergesini ve Wi-Fi'yı gösterir; sol kulak operatörü ve durumu gösterir. Manzara yönlendirmesinde iOS, durum çubuğunun tam genişliği boyunca siyah bir çubukla notch'u gizler — içerik kesinti alanında görüntülenmez.

Sadece iPhone değil: notch kavramı birçok Android üreticisi tarafından benimsendi. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — hepsinde kesinti vardı. Bazı üreticiler daha da ileri gitti: su damlası notch (waterdrop), punch-hole kamera (ekranda delik), sürgülü kamera (geri çekilebilir modül). Modern Android amiral gemileri (Samsung Galaxy S23+, Google Pixel 8 Pro) punch-hole kullanır — geniş bir kesinti olmadan ekranın üst kısmında kamera için minimum bir delik.

iOS'ta Safe Area: safeAreaInsets

Safe Area, bir görünüm içinde sistem arayüz öğeleri (notch, yuvarlak ekran köşeleri (corner radius), Home Indicator, sekme çubuğu (tab bar) ve gezinme çubuğu (navigation bar)) tarafından kapatılmayacağı garanti edilen dikdörtgen bir alandır. Safe Area boyutları, UIView.safeAreaInsets özelliği aracılığıyla döndürülür — top, left, bottom, right değerlerine sahip UIEdgeInsets. Notch'lu bir iPhone için, top inset = ~44 pt (dikey) veya ~0 pt (siyah çubuklu manzara).

// İçerik konumlandırma için safeAreaInsets kullanımı
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Area kenar boşluklarını okuma
        let safeArea = self.view.safeAreaInsets

        // Hata ayıklama için değerleri günlüğe kaydetme
        print("Top inset: \(safeArea.top)")    // ~44 pt notch ile
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt Home Indicator ile

        // Safe Area ile başlığı konumlandırma
        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 değişikliklerini işleme (dönüş, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Düzenin yeniden hesaplanması
    }
}

Auto Layout ve Safe Area: Interface Builder'da "Superview" yerine çapa hedefi olarak "Safe Area"yı kullanın. Programatik düzen için safeAreaLayoutGuide'u kullanın: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS, cihaz döndürme, iPad'de Split View'e geçme, klavyeyi gösterme/gizleme ve yön değişikliklerinde safeAreaInsets'i otomatik olarak günceller. Tüm standart UIKit denetleyicileri (UINavigationController, UITabBarController) zaten Safe Area'yı dikkate alır. Özel görünümler ve denetleyiciler açıkça safeAreaInsets kullanmalıdır.

Android'de Notch: DisplayCutout ve WindowInsets

DisplayCutout, API 28'de (Android 9.0) eklenen ve ekrandaki kesinti alanını tanımlayan bir Android SDK sınıfıdır. WindowInsets.displayCutout() aracılığıyla elde edilebilir. Sınıf, boundingBoxList — kesintiyi/kesintileri tanımlayan dikdörtgenler listesi ve safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — güvenli içerik görüntüleme için minimum kenar boşlukları döndürür. Android, çeşitli kesinti yapılandırmalarını destekler: merkezi (iPhone gibi), yan (köşede kamera), çift (iki kamera), punch-hole.

// Activity'de DisplayCutout için arayüz uyarlaması
class NotchAwareActivity : AppCompatActivity() {

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

        // Kesinti alanında içerik görüntülenmesine izin ver (gerekirse)
        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 aracılığıyla DisplayCutout alma
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Üst içerik için kenar boşluğu ayarlama
            headerView.updatePadding(top = safeTop)
        }
    }
}

Görüntüleme modları (layoutInDisplayCutoutMode): ALWAYS — içerik kesinti alanında görüntülenebilir (tam ekran uygulamalar, video, oyunlar için); NEVER — içerik kesintiyi asla örtmez, sistem kenar boşlukları ekler; SHORT_EDGES — içerik yalnızca kısa kenarda kesinti alanında görüntülenir (üst notch'lı dikey uygulamalar için). Varsayılan mod SHORT_EDGES'tir (Android 12'den itibaren). Punch-hole kameralar için kesinti daha küçüktür ve birçok uygulama ekran kullanımını en üst düzeye çıkarmak için ALWAYS kullanır.

Notch'in Evrimi: iPhone X'ten Dynamic Island'a

iPhone X (2017) — notch'lı ilk Apple akıllı telefonu. Kesinti, Face ID için TrueDepth kamerasını (kızılötesi kamera, nokta projektörü ve aydınlatıcıdan oluşan bir sistem) içeriyordu. Kesinti boyutları: ~34 mm × 5 mm. iOS 11'de Apple, uygulama uyarlaması için Safe Area'yı tanıttı. Kullanıcılar ikiye bölündü: bazıları notch'u Face ID için gerekli olarak kabul etti, diğerleri ise "kesilmiş" ekran için eleştirdi.

iPhone 13 (2021) — Apple, hoparlörü üst çerçeveye taşıyarak notch'u %20 küçülttü. Bu son klasik notch'tu. iPhone 14 ve 14 Plus (2022) küçültülmüş notch'u korudu. iPhone 14 Pro ve Pro Max, Dynamic Island'ı tanıttı — kamerayı ve Face ID sensörlerini birleştiren, dinamik olarak şekil değiştiren ve sistem bildirimlerini (zamanlayıcı, müzik, AirPods bağlantısı) görüntüleyen elipsoid bir kesinti. Dynamic Island, kendi API'si (ActivityKit, Live Activities) ile bir yazılım platformu haline geldi.

Dynamic Island sadece bir kesinti değil, etkileşimli bir arayüz öğesidir. AirPods bağlarken ada genişleyerek bir simge ve durum gösterir. Taksi çağırmak (Uber) varış süresini görüntüler. Uygulama küçültülürken adada bir zamanlayıcı 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'ta mevcuttur. Dynamic Island için Safe Area: top inset = 54 pt (klasik notch'tan 10 pt daha büyük).

Kesintili Arayüzler İçin Tasarım Kuralları

Notch'un arkasına asla içerik gizlemeyin — otomatik kenar boşluğu hesaplaması için Safe Area veya DisplayCutout kullanın. Sabit kenar boşluğu değerleri (rnk. 44 pt) ayarlamayın — bunlar farklı cihazlarda ve yönlendirmelerde farklılık gösterir. Safe Area'yı okumak için her zaman sistem API'lerini kullanın: iOS'ta safeAreaInsets, Android'de windowInsets.displayCutout. Bu, tüm cihazlarda doğru görüntülemeyi garanti eder: iPhone SE (notch'suz), iPhone 14 Pro (notch'lu), iPhone 15 (Dynamic Island), iPad (notch'suz, ancak Home Indicator'lı).

Manzara yönlendirmesi — özel bir risk alanı. Manzarada notch'lu bir iPhone'da iOS, durum çubuğunun tam genişliği boyunca otomatik olarak siyah bir çubuk ekler (içerik notch'un solunda ve sağında görüntülenmez). Bu, Safe Area inset = 0 top, ancak artırılmış sol/sağ insets (~47 pt) ile yapılır. Bu davranışı devre dışı bırakmaya çalışmayın — App Store, manzarada içerik için ekranın "yasak" alanlarını kullanan bir uygulamayı reddeder. Tam ekran video için, kontrolleri otomatik olarak notch alanının dışına yerleştiren AVPlayerViewController'ı kullanın.

Arka plan ve durum çubuğu: özel bir arka plan rengi kullanıyorsanız, notch'un arkasındaki alan da dahil olmak üzere tüm ekran alanını doldurmalıdır. Durum çubuğunun üzerine içerik çizmeyin — Safe Area kullanın. Karanlık mod için durum çubuğunun okunabilir olduğundan emin olun: arka plan stilinize uyacak şekilde preferredStatusBarStyle'ı ayarlayın (açık arka planda koyu metin için .default, koyu arka planda açık metin için .lightContent).

Notch Uyarlamasını Test Etme

Simülatörler ve emülatörler: Xcode, notch'lu tüm iPhone modellerinin (iPhone X–14) ve Dynamic Island'ın (iPhone 14 Pro–15) simülatörlerini sağlar. Android Studio, çeşitli kesinti yapılandırmalarına (Google Pixel 3 XL, cutout'lu özel emülatör) sahip emülatörler sağlar. Dikey ve manzara yönlendirmesinde, klavyeli ve klavyesiz, Split View'de (iPad) test edin. Tüm içeriğin okunabilir ve kapalı olmadığını doğrulayın.

Gerçek cihazlar: simülatördeki ve gerçek cihazdaki notch farklı olabilir. Örneğin, iPhone 14 Pro simülatörü Dynamic Island'ı gösterir, ancak gerçek etkileşim (Live Activities) olmadan. Android için bir punch-hole kamera tam olarak emüle edilmeyebilir. En iyi yöntem gerçek cihazlarda test etmektir. Minimum set: iPhone SE (notch'suz), iPhone 14 (notch'lu), iPhone 15 Pro (Dynamic Island), punch-hole'lu Android, şelale ekranlı Android (Samsung Edge).

Araçlar: iOS için, "Show Safe Area Insets" seçeneğiyle Xcode View Debugger'ı kullanın — Safe Area sınırlarını görsel olarak gösterir. Android için — Android Studio'da Attributes panelinde WindowInsets ve DisplayCutout'u görüntüleyen Layout Inspector. Ayrıca Safe Area içindeki tüm öğelerin VoiceOver/TalkBack tarafından erişilebilir olduğunu doğrulamak için Accessibility Inspector da kullanışlıdır. Notch'suz ancak Home Indicator (alt kenar boşluğu ~21 pt) ve yuvarlak köşeleri olan iPad'i unutmayın.