Safe Area — bu nədir, notch və StatusBar-dan girintilər

Safe Area nədir?

Safe Area — məzmunun aparat və proqram sistem elementləri: kamera kəsikliyi (notch), Dynamic Island, status zolağı (StatusBar), jest naviqasiya göstəricisi (Home Indicator), ekranın yuvarlaq küncləri və naviqasiya paneli tərəfindən örtülməyəcəyinə zəmanət verilən düzbucaqlı ekran sahəsidir. Safe Area-nın sərhədləri cihazın fırlanması, klaviaturanın çağırılması və ya Split View-in işə salınması zamanı dinamik olaraq dəyişir. Apple Human Interface Guidelines (2025) məlumatına görə, Safe Area-nı gözardı etmək dizayn səhvi hesab olunur və tətbiqin rəy zamanı rədd edilməsinə səbəb ola bilər.

Safe Area nə üçün lazımdır

Safe Area mobil ekosistemdə ekran parçalanması problemini həll edir. iPhone X-dan əvvəl bütün iPhone-lar eyni nisbətlərə malik düzbucaqlı ekrana sahib idi. Notch-un meydana çıxması ilə ekran variantlarının sayı 20+ — müxtəlif ölçülü kəsiklər, Dynamic Island, yuvarlaqlaşdırmalar, göstəricilər artdı. Safe Area proqramçını bu fərqlərdən abstraksiya edərək adaptiv girintilər üçün vahid API təmin edir. Apple Developer (2025) məlumatına görə, iOS kök view üçün Safe Area-nı avtomatik tətbiq edir, lakin UICollectionView və UIScrollView üçün əl ilə konfiqurasiya tələb olunur.

iOS-da Safe Area: SafeAreaLayoutGuide və SwiftUI

iOS-da Safe Area UIKit-də SafeAreaLayoutGuide və SwiftUI-də safeAreaInset modifikatoru vasitəsilə həyata keçirilir. SafeAreaLayoutGuide hər UIView-ə əlavə olunan və sistem elementlərindən azad düzbucaqlını təyin edən layout bələdçisidir. Interface Builder-da Safe Area mavi sahə kimi göstərilir. SwiftUI Safe Area-nı əksər konteynerlər üçün avtomatik tətbiq edir, lakin .ignoresSafeArea() vasitəsilə onu gözardı etməyə imkan 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),
])

SafeAreaLayoutGuide UIKit-də dörd anchor — top, bottom, leading, trailing — təyin edir ki, onlar avtomatik olaraq notch, StatusBar və Home Indicator-ı nəzərə alır. Bu yanaşma iOS 11-dən başlayaraq bütün iOS cihazlarında işləyir. SwiftUI-də eyni effekt NavigationStack və ya VStack daxilində məzmun modifikatoru vasitəsilə əldə edilir — SwiftUI avtomatik olaraq Safe Area Insets tətbiq edir.

// SwiftUI: safeAreaInset və ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Safe Area-da məzmun")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Ekranın alt zolağı")
        .padding()
        .background(.thinMaterial)
}

SwiftUI-də .ignoresSafeArea() fonun Safe Area-dan kənara çıxmasına imkan verir, .safeAreaInset(edge:) isə göstərilən tərəfdən Safe Area-nı azaldan xüsusi panel əlavə edir. Bu naviqasiya panelləri, alətlər panelləri və reklam bannerləri üçün standart nümunədir.

Android-də Safe Area: WindowInsets və System Bars

Android-də Safe Area WindowInsets (API 30+) və WindowInsetsCompat (AndroidX kitabxanası) vasitəsilə həyata keçirilir. WindowInsets Status Bar, Navigation Bar, IME (klaviatura) və sistem jestləri üçün girintilər təmin edir. Android 10-dan (API 29) başlayaraq, Google bütün sistem elementləri üçün vahid girinti dəsti əldə etmək üçün WindowInsetsCompat.getInsets() metodu ilə WindowInsetsCompat.Type.systemBars() tipindən istifadə etməyi tövsiyə edir.

// 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 nümunədə WindowInsets bütün sistem panelləri üçün girintilər qaytarır — yuxarıda Status Bar, aşağıda Navigation Bar. setOnApplyWindowInsetsListener hər dəfə insets dəyişdikdə (fırlanma, klaviaturanın çağırılması) çağırılır. systemBars() metodu status bar, naviqasiya bar və fərdiləşdirmə barını bir dəstdə birləşdirir, bu da kodu sadələşdirir.

Android-də Edge-to-Edge

Android 15-dən başlayaraq, Google yeni API-ni hədəfləyən bütün tətbiqlər üçün edge-to-edge tələb edir. Bu o deməkdir ki, tətbiq sistem panellərinin altında çəkilir, Safe Area isə handleWindowInsets və ya WindowInsetController vasitəsilə tətbiq edilir. Android Developer Blog (2025) məlumatına görə, tətbiqlərin 68%-i artıq edge-to-edge-ə keçib, bu da böyük ekranlı cihazlarda vizual qavrayışı yaxşılaşdırır.

Safe Area, Padding və Insets: fərq nədir

Safe Area, Padding və Insets — əlaqəli, lakin fərqli anlayışlardır. Safe Area sistem elementlərindən azad olmağı zəmanət edilən ekran sahəsidir. Padding elementin daxili sərhədlərindən olan girintidir. Insets Safe Area API-si tərəfindən qaytarılan xüsusi ədədi girinti dəyərləridir. Apple Tech Notes (2025) məlumatına görə, Safe Area və Padding-in qarışdırılması tətbiq mağazalarında adaptivlik problemlərinin 40%-nə səbəb olur.

Safe Area-nın kodla tətbiq nümunələri

Tipik ssenariləri nəzərdən keçirək: notch ilə üfüqi oriyentasiya üçün UIKit-də Safe Area, xüsusi panel ilə SwiftUI-də Safe Area, Android Compose-da Safe Area. iOS UIKit üçün nümunə — Dynamic Island olan iPhone-da kolleksiyanın Safe Area daxilində yerləşdirilməsi. Jetpack Compose üçün nümunə — Material 3-də WindowInsets-dən istifadə.

// Jetpack Compose: Safe Area-dan girintilər
@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-da məzmun")
        }
    }
}

Jetpack Compose-da Scaffold contentWindowInsets parametri vasitəsilə WindowInsets-i avtomatik nəzərə alır. InnerPadding content-ə ötürülür və daxili elementlərə tətbiq edilir. padding(innerPadding) modifikatoru olan Column mətnin sistem panellərinin altına düşməyəcəyinə zəmanət verir.

Safe Area ilə işləyərkən tipik səhvlər

Apple-ın App Store Review (2025) təhlilinə görə, beş ən çox rast gəlinən səhv: üfüqi oriyentasiyada Safe Area-nı gözardı etmək, SafeAreaLayoutGuide əvəzinə sərt girintilərdən istifadə etmək, UIScrollView-də Safe Area-nın səhv işlənməsi, modal təqdimatlarda unudulmuş girintilər və Dynamic Island üçün adaptasiyanın olmaması. Sərt girintilər (yuxarıdan hardcoded 20px) — ən geniş yayılmış səhv: iPhone 14 Pro-da bu 20px 59px-ə çevrilir və məzmun kəsilir.

• Üfüqi oriyentasiyanı gözardı etmək — üfüqi oriyentasiyada Safe Area fərqli girintilərə malikdir: Home Indicator sağ tərəfə keçir, yuxarı girinti isə azalır.
• Sərt girintilər — 20px və ya 44px dəyərləri yalnız kəsiksiz köhnə iPhone-lar üçün uyğundur. Müasir cihazlarda girintilər 2-3 dəfə fərqlənir.
• ScrollView və Safe Area — UIScrollView-də contentInsetAdjustmentBehavior .always olaraq təyin edilməlidir, əks halda məzmun sistem panelləri altında gizlənəcək.