Safe Area — bu nima, notch va StatusBar dan chekinishlar

Safe Area nima?

Safe Area — kontentning apparat va dasturiy tizim elementlari: kamera kesigi (notch), Dynamic Island, holat satri (StatusBar), imo-ishora navigatsiya ko'rsatkichi (Home Indicator), ekranning yumaloq burchaklari va navigatsiya paneli bilan qoplanmasligi kafolatlanadigan to'rtburchak ekran maydonidir. Safe Area chegaralari qurilma aylantirilganda, klaviatura chaqirilganda yoki Split View ishga tushirilganda dinamik ravishda o'zgaradi. Apple Human Interface Guidelines (2025) ma'lumotlariga ko'ra, Safe Area ni e'tiborsiz qoldirish dizayn xatosi hisoblanadi va ilovani ko'rib chiqishda rad etilishiga olib kelishi mumkin.

Safe Area nima uchun kerak

Safe Area mobil ekotizimda ekranlarning parchalanishi muammosini hal qiladi. iPhone X dan oldin barcha iPhone'lar bir xil nisbatdagi to'rtburchak ekranga ega edi. Notch paydo bo'lishi bilan ekran variantlari soni 20+ — turli o'lchamdagi kesiklar, Dynamic Island, yumaloqlashlar, ko'rsatkichlar oshdi. Safe Area dasturchini bu farqlardan abstraksiyalab, adaptiv chekinishlar uchun yagona API taqdim etadi. Apple Developer (2025) ma'lumotlariga ko'ra, iOS ildiz view uchun Safe Area ni avtomatik qo'llaydi, ammo UICollectionView va UIScrollView uchun qo'lda sozlash talab qilinadi.

iOS da Safe Area: SafeAreaLayoutGuide va SwiftUI

iOS da Safe Area UIKit da SafeAreaLayoutGuide va SwiftUI da safeAreaInset modifikatori orqali amalga oshiriladi. SafeAreaLayoutGuide har bir UIView ga qo'shiladigan va tizim elementlaridan xoli to'rtburchakni belgilaydigan layout yo'riqnomasidir. Interface Builder da Safe Area ko'k maydon sifatida ko'rsatiladi. SwiftUI Safe Area ni aksariyat konteynerlar uchun avtomatik qo'llaydi, lekin .ignoresSafeArea() orqali uni e'tiborsiz qoldirishga imkon beradi.

// 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 da to'rtta anchor — top, bottom, leading, trailing — ni belgilaydi, ular avtomatik ravishda notch, StatusBar va Home Indicator ni hisobga oladi. Bu yondashuv iOS 11 dan boshlab barcha iOS qurilmalarida ishlaydi. SwiftUI da xuddi shu effekt NavigationStack yoki VStack ichidagi kontent modifikatori orqali erishiladi — SwiftUI avtomatik ravishda Safe Area Insets ni qo'llaydi.

// SwiftUI: safeAreaInset va ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Safe Area dagi kontent")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Ekranning pastki chizig'i")
        .padding()
        .background(.thinMaterial)
}

SwiftUI da .ignoresSafeArea() fonning Safe Area dan tashqariga chiqishiga imkon beradi, .safeAreaInset(edge:) esa belgilangan tomondan Safe Area ni kamaytiradigan maxsus panel qo'shadi. Bu navigatsiya panellari, asboblar paneli va reklama bannerlari uchun standart naqshdir.

Android da Safe Area: WindowInsets va System Bars

Android da Safe Area WindowInsets (API 30+) va WindowInsetsCompat (AndroidX kutubxonasi) orqali amalga oshiriladi. WindowInsets Status Bar, Navigation Bar, IME (klaviatura) va tizim imo-ishoralari uchun chekinishlarni taqdim etadi. Android 10 (API 29) dan boshlab, Google barcha tizim elementlari uchun yagona chekinishlar to'plamini olish uchun WindowInsetsCompat.getInsets() metodidan WindowInsetsCompat.Type.systemBars() tipi bilan foydalanishni tavsiya qiladi.

// 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 misolda WindowInsets barcha tizim panellari uchun chekinishlarni qaytaradi — yuqorida Status Bar, pastda Navigation Bar. setOnApplyWindowInsetsListener har safar insets o'zgarganda (aylantirish, klaviatura chaqiruvi) chaqiriladi. systemBars() metodi holat satri, navigatsiya paneli va sozlash panelini bitta to'plamda birlashtiradi, bu kodni soddalashtiradi.

Android da Edge-to-Edge

Android 15 dan boshlab, Google yangi API ni nishonga olgan barcha ilovalar uchun edge-to-edge ni talab qiladi. Bu ilova tizim panellari ostida chiziladi va Safe Area handleWindowInsets yoki WindowInsetController orqali qo'llaniladi. Android Developer Blog (2025) ma'lumotlariga ko'ra, ilovalarning 68% allaqachon edge-to-edge ga o'tgan, bu katta ekranli qurilmalarda vizual idrokni yaxshilaydi.

Safe Area, Padding va Insets: farq nima

Safe Area, Padding va Insets — bog'liq, ammo turli tushunchalar. Safe Area tizim elementlaridan xoli bo'lishi kafolatlangan ekran maydonidir. Padding elementning o'z chegaralaridan ichki chekinishidir. Insets Safe Area API si tomonidan qaytariladigan aniq raqamli chekinish qiymatlaridir. Apple Tech Notes (2025) ma'lumotlariga ko'ra, Safe Area va Padding ni aralashtirish ilovalar do'konlarida moslashuvchanlik muammolarining 40% ga sabab bo'ladi.

Safe Area ni kod bilan amalga oshirish misollari

Odatiy stsenariylarni ko'rib chiqamiz: notch bilan gorizontal orientatsiya uchun UIKit da Safe Area, maxsus panel bilan SwiftUI da Safe Area, Android Compose da Safe Area. iOS UIKit uchun misol — Dynamic Island li iPhone da kolleksiyani Safe Area ichiga joylashtirish. Jetpack Compose uchun misol — Material 3 da WindowInsets dan foydalanish.

// Jetpack Compose: Safe Area dan chekinishlar
@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 dagi kontent")
        }
    }
}

Jetpack Compose da Scaffold contentWindowInsets parametri orqali WindowInsets ni avtomatik hisobga oladi. InnerPadding content ga uzatiladi va ichki elementlarga qo'llaniladi. padding(innerPadding) modifikatorli Column matnning tizim panellari ostiga tushmasligini kafolatlaydi.

Safe Area bilan ishlashda odatiy xatolar

Apple ning App Store Review (2025) tahliliga ko'ra, beshta eng keng tarqalgan xato: gorizontal orientatsiyada Safe Area ni e'tiborsiz qoldirish, SafeAreaLayoutGuide o'rniga qattiq kodlangan chekinishlardan foydalanish, UIScrollView da Safe Area ni noto'g'ri ishlash, modal taqdimotlarda unutilgan chekinishlar va Dynamic Island uchun moslashuvning yo'qligi. Qattiq kodlangan chekinishlar (yuqoridan hardcoded 20px) — eng keng tarqalgan xato: iPhone 14 Pro da bu 20px 59px ga aylanadi va kontent kesiladi.

• Gorizontal orientatsiyani e'tiborsiz qoldirish — gorizontal orientatsiyada Safe Area boshqa chekinishlarga ega: Home Indicator o'ng tomonga siljiydi va yuqori chekinish kamayadi.
• Qattiq kodlangan chekinishlar — 20px yoki 44px qiymatlari faqat kesiksiz eski iPhone lar uchun mos keladi. Zamonaviy qurilmalarda chekinishlar 2-3 marta farq qiladi.
• ScrollView va Safe Area — UIScrollView da contentInsetAdjustmentBehavior .always ga o'rnatilishi kerak, aks holda kontent tizim panellari ostida yashirinadi.