Published on

SwiftUI-da Safe Area — qanday ishlatish va e'tiborsiz qoldirish

Authors

Bu videoda biz Safe Area — ya'ni xavfsiz maydon haqida gaplashamiz. Kodni yozayotganda biz doim muhim kontentni — tugmalar, matnlar, foydalanuvchi ko'rishi va bosishi kerak bo'lgan narsalarni — safe area ichida saqlaymiz. SwiftUI-da bu ishlashni tushunib olsangiz, aslida juda qulay.

Safe Area nima?

Apple-ning Human Interface Guidelines — ya'ni inson interfeysi bo'yicha ko'rsatmalar hujjatida safe area haqida batafsil ma'lumot bor. Bu hujjat Apple-ning dasturchilar uchun yaratgan resursi bo'lib, ilovalarni qanday ishlatish kerakligi haqida ko'plab tavsiyalar beradi.

Asosiy qoida oddiy: ilovangiz turli qurilmalarda — iPhone, iPad, kichik yoki katta ekranlar, landscape yoki portrait rejimda — to'g'ri ko'rinishi kerak.

Safe area — bu Apple ko'rsatmalariga ko'ra muhim kontent joylashtirilishi kerak bo'lgan maydon. Agar kontent safe area tashqarisida joylashsa, u ba'zi qurilmalarda qisilib yoki kesilishi mumkin. Har bir qurilmada safe area o'lchami har xil — iPhone va iPad-da ham farq qiladi.

Asosiy qoida:

  • Foydalanuvchi ko'rishi, o'qishi yoki bosishi kerak bo'lgan kontent → safe area ichida saqlang
  • Fon rangi yoki fon rasmi → safe area-ni e'tiborsiz qoldirishingiz mumkin

SwiftUI-da safe area avtomatik ishlaydi

SwiftUI-da barcha kontent avtomatik ravishda safe area ichida qoladi. Bu Apple-ning qulaylik uchun qo'shgan himoya mexanizmi.

struct SafeAreaBootcamp: View {
    var body: some View {
        Text("Salom dunyo")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.red)
        // maxHeight: .infinity bo'lsa ham, kontent safe area bilan chegaralanadi
        // Qizil fon ekranning chekkasiga yetmaydi — bu to'g'ri va kutilgan xatti-harakat
    }
}

Safe Area-ni e'tiborsiz qoldirish — eski usul (deprecated)

// ⚠️ ESKI USUL — iOS 14.3 dan keyin deprecated (eskirgan)
Text("Salom dunyo")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)
    .edgesIgnoringSafeArea(.all)  // barcha tomonlarda e'tiborsiz qoldirish

// Faqat yuqorini e'tiborsiz qoldirish
.edgesIgnoringSafeArea(.top)

// Faqat pastni e'tiborsiz qoldirish
.edgesIgnoringSafeArea(.bottom)

Bu usul hali ham ishlaydi, lekin iOS 14.3 dan keyin Apple uni eskirgan deb e'lon qildi.

Safe Area-ni e'tiborsiz qoldirish — yangi usul (tavsiya etiladi)

// ✅ YANGI USUL — iOS 14+ da ishlaydi
Text("Salom dunyo")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)
    .ignoresSafeArea()              // barcha tomonlarda (parametrsiz)

// Faqat yuqorini e'tiborsiz qoldirish
.ignoresSafeArea(edges: .top)

// Faqat pastni e'tiborsiz qoldirish
.ignoresSafeArea(edges: .bottom)

Ikkalasi bir xil natija beradi, lekin .ignoresSafeArea() — yangi va tavsiya etilgan usul.

Noto'g'ri amaliyot — kontentni safe area tashqarisida qoldirish

Ko'plab yangi dasturchilar quyidagi xatoga yo'l qo'yadi:

// ❌ NOTO'G'RI — kontent safe area tashqarisida
VStack {
    Text("Salom dunyo")
    Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)
.ignoresSafeArea()
// Matn ekranning eng yuqorisiga suriladi — foydalanuvchi uni ko'rmasligi mumkin

Ba'zilar buni tuzatish uchun qo'lda padding qo'shishga urinadi:

// ❌ NOTO'G'RI — bu ham yaxshi emas
.padding(.top, 50)
// Muammo: har bir qurilmada safe area o'lchami har xil
// Shuning uchun qo'lda padding yozish ishonchli emas

To'g'ri usul 1 — ZStack bilan fon qatlami

Eng to'g'ri yondashuv — kontentni safe area ichida saqlab, faqat fon qatlamini e'tiborsiz qoldirish:

// ✅ TO'G'RI — ZStack usuli
ZStack {
    // Fon qatlami — safe area-ni e'tiborsiz qoldiradi
    Color.blue
        .ignoresSafeArea()

    // Old qatlam — kontent safe area ichida qoladi
    VStack {
        Text("Salom dunyo")
        Spacer()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)
    // Bu yerda ignoresSafeArea YO'Q — kontent himoyalangan
}

To'g'ri usul 2 — background modifikatori (eng qulay)

ZStack-dan ham qulay usul bor — background modifikatoriga .ignoresSafeArea() qo'shish:

// ✅ ENG QULAY USUL — background modifikatori
ScrollView {
    VStack {
        Text("Sarlavha")
            .font(.largeTitle)
            .frame(maxWidth: .infinity, alignment: .leading)

        ForEach(0..<10) { index in
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.white)
                .frame(height: 150)
                .shadow(radius: 10)
                .padding(20)
        }
    }
}
.background(
    Color.blue
        .ignoresSafeArea()  // faqat fon safe area-ni e'tiborsiz qoldiradi
)
// ScrollView o'zi safe area ichida qoladi
// Fon rangi esa ekranning chekkalariga yetadi

Bu usulda:

  • ScrollView safe area ichida boshlanadi — kontent to'g'ri ko'rinadi
  • Fon rangi (Color.blue) esa ekranning barcha chekkalariga yetadi
  • Scroll qilganda kontent tabiiy ko'rinadi

ScrollView — safe area bilan aqlli ishlaydi

SwiftUI-dagi ScrollView aslida juda aqlli — u avtomatik ravishda to'g'ri xatti-harakatni tanlaydi:

ScrollView {
    // ... kontent ...
}
.background(Color.red)
// ScrollView safe area ichida boshlanadi
// Lekin scroll qilganda kontent ekranning yuqorisiga tabiiy chiqadi
// Bu SwiftUI-ning o'zi amalga oshiradigan aqlli xatti-harakat

Yangi va eski usul taqqoslab

// iOS 14.3 DAN OLDIN — eski usul (hali ishlaydi, lekin eskirgan)
.edgesIgnoringSafeArea(.all)
.edgesIgnoringSafeArea(.top)
.edgesIgnoringSafeArea(.bottom)

// iOS 14.3 DAN KEYIN — yangi tavsiya etilgan usul
.ignoresSafeArea()               // barcha tomonlar
.ignoresSafeArea(edges: .top)    // faqat yuqori
.ignoresSafeArea(edges: .bottom) // faqat past

Xulosa — asosiy qoidalar

Kontent turiSafe Area bilan nima qilish kerak
Matnlar, tugmalar, ro'yxatlarDoim ichida saqlash
Fon ranglari, fon rasmlariE'tiborsiz qoldirishingiz mumkin

Fon rangini safe area-dan tashqariga chiqarish uchun eng qulay usul — background modifikatoriga .ignoresSafeArea() qo'shish. ZStack usuli ham to'g'ri, lekin biroz murakkabroq. Qo'lda padding yozish esa umuman tavsiya etilmaydi — chunki har bir qurilmada safe area o'lchami har xil.

Rahmat, men Nick, bu Swiftful Thinking va keyingi videoda ko'rishguncha!

Buy mea coffee