Safe Area — nedir, notch ve StatusBar'dan boşluklar

Safe Area Nedir?

Safe Area, içeriğin donanım ve yazılım sistem öğeleri (kamera kesiği (notch), Dynamic Island, durum çubuğu (StatusBar), jest navigasyon göstergesi (Home Indicator), yuvarlak ekran köşeleri ve navigasyon çubuğu) tarafından kapatılmamasının garanti edildiği dikdörtgen bir ekran alanıdır. Safe Area'nın sınırları, cihaz döndürüldüğünde, klavye çağrıldığında veya Split View başlatıldığında dinamik olarak değişir. Apple Human Interface Guidelines (2025)'e göre, Safe Area'yı görmezden gelmek bir tasarım hatası olarak kabul edilir ve inceleme sırasında uygulamanın reddedilmesine yol açabilir.

Safe Area Neden Gereklidir

Safe Area, mobil ekosistemdeki ekran parçalanması sorununu çözer. iPhone X'ten önce tüm iPhone'lar aynı oranlara sahip dikdörtgen bir ekrana sahipti. Notch'ın ortaya çıkmasıyla ekran varyantlarının sayısı 20'nin üzerine çıktı — farklı notch boyutları, Dynamic Island, yuvarlak köşeler, göstergeler. Safe Area, uyarlanabilir boşluklar için birleşik bir API sağlayarak geliştiriciyi bu farklılıklardan soyutlar. Apple Developer (2025)'e göre iOS, kök görünüme otomatik olarak Safe Area uygular, ancak UICollectionView ve UIScrollView manuel yapılandırma gerektirir.

iOS'ta Safe Area: SafeAreaLayoutGuide ve SwiftUI

iOS'ta Safe Area, UIKit'te SafeAreaLayoutGuide ve SwiftUI'de safeAreaInset değiştiricisi aracılığıyla uygulanır. SafeAreaLayoutGuide, her UIView'e eklenen ve sistem öğelerinden arınmış dikdörtgeni tanımlayan bir düzen kılavuzudur. Interface Builder'da Safe Area mavi bir alan olarak görüntülenir. SwiftUI, çoğu kapsayıcı için Safe Area'yı otomatik olarak uygular, ancak .ignoresSafeArea() aracılığıyla yok sayılmasına izin verir.

// UIKit: SafeAreaLayoutGuide
let safeGuide = view.safeAreaLayoutGuide
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    button.topAnchor.constraint(
        equalTo: safeGuide.topAnchor),
    button.leadingAnchor.constraint(
        equalTo: safeGuide.leadingAnchor),
    button.trailingAnchor.constraint(
        equalTo: safeGuide.trailingAnchor),
])

UIKit'te SafeAreaLayoutGuide, dört bağlantı noktası (üst, alt, başlangıç, bitiş) tanımlar ve bunlar otomatik olarak notch, StatusBar ve Home Indicator'ı hesaba katar. Bu yaklaşım, iOS 11'den itibaren tüm iOS cihazlarında çalışır. SwiftUI'de aynı etki, NavigationStack veya VStack içindeki içerik değiştiricisi aracılığıyla elde edilir — SwiftUI otomatik olarak Safe Area Insets uygular.

// SwiftUI: safeAreaInset ve ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Safe Area'daki içerik")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Ekranın altındaki çubuk")
        .padding()
        .background(.thinMaterial)
}

SwiftUI'de .ignoresSafeArea(), arka planın Safe Area'nın ötesine uzanmasına izin verirken, .safeAreaInset(edge:) belirtilen tarafta Safe Area'yı azaltan özel bir panel ekler. Bu, navigasyon çubukları, araç çubukları ve reklam banner'ları için standart bir desendir.

Android'de Safe Area: WindowInsets ve System Bars

Android'de Safe Area, WindowInsets (API 30+) ve WindowInsetsCompat (AndroidX kitaplığı) aracılığıyla uygulanır. WindowInsets, Status Bar, Navigation Bar, IME (klavye) ve sistem hareketleri için boşluklar sağlar. Android 10'dan (API 29) itibaren Google, tüm sistem öğeleri için birleşik bir boşluk seti elde etmek üzere WindowInsetsCompat.getInsets()'i WindowInsetsCompat.Type.systemBars() ile kullanmanızı önerir.

// Android: WindowInsets (Kotlin)
class MainActivity : AppCompatActivity() {
    override fun onCreate(
        savedInstanceState: Bundle?
    ) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ViewCompat.setOnApplyWindowInsetsListener(
            findViewById(R.id.main_content)
        ) { view, insets ->
            val systemBars = insets.getInsets(
                WindowInsetsCompat.Type.systemBars()
            )
            view.setPadding(
                systemBars.left,
                systemBars.top,
                systemBars.right,
                systemBars.bottom
            )
            ViewCompat.ON_APPLY_WINDOW_INSETS_LISTENER
        }
    }
}

Bu örnekte WindowInsets, tüm sistem çubukları (üstte Status Bar, altta Navigation Bar) için boşlukları döndürür. setOnApplyWindowInsetsListener, boşluklar her değiştiğinde (döndürme, klavye çağrısı) çağrılır. systemBars() yöntemi, durum çubuğu, navigasyon çubuğu ve özelleştirme çubuğunu tek bir sette birleştirerek kodu basitleştirir.

Android'de Edge-to-Edge

Android 15'ten itibaren Google, yeni API'yi hedefleyen tüm uygulamalar için edge-to-edge görüntüleme gerektirir. Bu, uygulamanın sistem çubuklarının altına çizildiği ve Safe Area'nın handleWindowInsets veya WindowInsetController aracılığıyla uygulandığı anlamına gelir. Android Developer Blog (2025)'e göre, uygulamaların %68'i halihazırda edge-to-edge'e geçmiş olup büyük ekranlı cihazlarda görsel algıyı iyileştirmektedir.

Safe Area, Padding ve Insets: Fark Nedir

Safe Area, Padding ve Insets ilişkili ancak farklı kavramlardır. Safe Area, sistem öğelerinden arınmış olması garanti edilen ekran alanıdır. Padding, bir öğenin kenarlarından iç boşluğudur. Insets, Safe Area API'si tarafından döndürülen belirli sayısal uzaklık değerleridir. Apple Tech Notes (2025)'e göre, Safe Area ve Padding arasındaki karışıklık, uygulama mağazalarındaki uyarlanabilirlik sorunlarının %40'ının nedenidir.

Kodlu Safe Area Uygulama Örnekleri

Tipik senaryoları inceleyelim: Notch ile yatay yönlendirme için UIKit'te Safe Area, Özel panel ile SwiftUI'de Safe Area, Android Compose'da Safe Area. iOS UIKit için örnek — Dynamic Island'lı bir iPhone'da Safe Area içinde koleksiyon yerleştirme. Jetpack Compose için örnek — Material 3'te WindowInsets kullanma.

// Jetpack Compose: Safe Area boşlukları
@OptIn(ExperimentalMaterial3Api::class)
fun SafeAreaScreen() {
    val systemBars = with(
        LocalDensity.current
    ) {
        val insets = WindowInsets
            .systemBars
            .getAsPaddingValues()
        PaddingValues(
            top = insets.calculateTopPadding(),
            bottom = insets.calculateBottomPadding()
        )
    }
    Scaffold(
        contentWindowInsets = WindowInsets(
            top = systemBars.computeTopPadding(),
            bottom = systemBars.computeBottomPadding()
        )
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
        ) {
            Text("Safe Area'daki içerik")
        }
    }
}

Jetpack Compose'da Scaffold, contentWindowInsets parametresi aracılığıyla otomatik olarak WindowInsets'i hesaba katar. InnerPadding, içeriğe iletilir ve iç öğelere uygulanır. padding(innerPadding) değiştiricisine sahip Column, metnin sistem çubuklarının altına düşmemesini garanti eder.

Safe Area ile Çalışırken Yapılan Yaygın Hatalar

Apple'ın (2025) App Store Review analizine göre en yaygın beş hata: yatay yönlendirmede Safe Area'yı görmezden gelmek, SafeAreaLayoutGuide yerine sabit kodlu boşluklar kullanmak, UIScrollView'de Safe Area'yı yanlış işlemek, modal sunumlarda boşlukları unutmak ve Dynamic Island için uyarlama eksikliği. Sabit kodlu boşluklar (üstte 20px sabit) en yaygın hatadır: iPhone 14 Pro'da bu 20px 59px olur ve içerik kesilir.

• Yatay yönü görmezden gelme — yatay yönlendirmede Safe Area'nın farklı boşlukları vardır: Home Indicator sağ tarafa kayar ve üst boşluk azalır.
• Sabit kodlu boşluklar — 20px veya 44px değerleri yalnızca notch'sız eski iPhone'larda çalışır. Modern cihazlarda boşluklar 2-3 kat farklılık gösterir.
• ScrollView ve Safe Area — UIScrollView'deki contentInsetAdjustmentBehavior .always olarak ayarlanmalıdır, aksi takdirde içerik sistem çubuklarının altında gizlenir.