PreviewProvider — bu nima, SwiftUI protokoli va Xcode-da sozlash

PreviewProvider nima?

PreviewProvider – Xcode Canvas-da oldindan ko‘rish mazmunini yaratish uchun shartnomani belgilaydigan SwiftUI protokoli. Protokol bitta majburiy xususiyatga ega: previews some View turida. previews tomonidan qaytarilgan har bir qiymat Canvas-da interaktiv oldindan ko‘rish sifatida ko‘rsatiladi. PreviewProvider meros olishni talab qilmaydi – extension-da statik tatbiq etish kifoya.

Arxitektura nuqtai nazaridan, PreviewProvider SwiftUI ish vaqti muhitining bir qismi emas – bu faqat ishlab chiqish vositasidir. Protokol @available(iOS 13.0, *) atributi bilan belgilangan va release yig‘ilishida kompilyatsiya qilinmaydi, chunki Xcode oldindan ko‘rish kodini production-dan chiqarib tashlash uchun shartli kompilyatsiyadan foydalanadi. Bu PreviewProvider ikkilik fayl hajmi va ilova ishlashiga ta'sir qilmasligini anglatadi.

previews protokoli

previews xususiyati – PreviewProvider-ning yagona talabi. Istalgan View-ni qaytarishi kerak: oddiy Text-dan Group va ForEach bilan murakkab ierarxiyagacha. Xcode qaytarilgan View-ni Canvas-da ko‘rsatadi, tizim sozlamalarini (mavzu, o‘lcham, shrift) qo‘llaydi.

import SwiftUI

struct GreetingView: View {
    let name: String
    
    var body: some View {
        Text("Salom, \(name)!")
            .padding()
    }
}

// PreviewProvider – statik tatbiq
struct GreetingView_Previews: PreviewProvider {
    static var previews: some View {
        GreetingView(name: "World")
    }
}

Nomlash konvensiyasi: Apple oldindan ko‘rish strukturasini {ViewName}_Previews deb nomlashni tavsiya qiladi. Bu kompilyator uchun majburiy talab emas, lekin o‘qish qulayligi va loyiha bo‘ylab navigatsiyani yaxshilaydi. Xcode yangi SwiftUI faylini yaratishda ushbu shablonni avtomatik ravishda qo‘yadi.

PreviewProvider qanday ishlaydi: protokol va previews metodi

Ish mexanizmi PreviewProvider statik yuborishga asoslangan: Xcode PreviewProvider bilan extension-ni faqat Debug konfiguratsiyasi uchun kompilyatsiya qiladi va Canvas qurilishi jarayonida previews-ni chaqiradi. Kod har safar o‘zgartirilganda, Xcode faqat o‘zgartirilgan PreviewProvider-larni qayta kompilyatsiya qiladi, bu esa deyarli bir zumda oldindan ko‘rish yangilanishini ta'minlaydi.

SwiftUI oldindan ko‘rishning simulyator yoki qurilmadagi yakuniy UI-ga aniq mos kelishini kafolatlamaydi – Canvas soddalashtirilgan renderlashdan foydalanadi. Kechikishli animatsiyalar noto‘g‘ri ko‘rsatilishi mumkin va ba'zi UIKit komponentlari (MapKit, WebView) qo‘shimcha sozlamasiz Canvas-da renderlanmaydi.

Group orqali bir nechta oldindan ko‘rishlar

Group bir View-ning bir nechta holatini bir vaqtning o‘zida ko‘rsatishga imkon beradi, bu turli konfiguratsiyalarni loyihalashda iteratsiyani tezlashtiradi. Group ichidagi har bir oldindan ko‘rish mustaqil ravishda renderlanadi.

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ButtonView(title: "Primary", style: .primary)
                .previewDisplayName("Primary")
            
            ButtonView(title: "Disabled", style: .primary)
                .disabled(true)
                .previewDisplayName("Disabled")
            
            ButtonView(title: "Secondary", style: .secondary)
                .previewDisplayName("Secondary")
        }
    }
}

previewDisplayName Canvas-da har bir oldindan ko‘rishga yorliq qo‘shadi, bu bir nechta holatlarni solishtirishda ayniqsa foydalidir. Group-dagi maksimal oldindan ko‘rishlar soni cheklanmagan, ammo 6–8 dan ko‘pi Canvas-ni sekinlashtiradi.

Xcode-da oldindan ko‘rishni sozlash

Xcode taqdim etadi oldindan ko‘rish ko‘rsatilishini sozlash uchun bir nechta modifikator. Asosiylari: previewDevice – ma'lum qurilmani emulyatsiya qiladi (iPhone 16 Pro, iPad Air, Apple Watch Ultra), previewLayout – o‘lchamni belgilaydi (device, fixed, sizeThatFits). Ushbu modifikatorlarning kombinatsiyasi oldindan ko‘rish muhiti ustidan to‘liq nazorat beradi.

previewDevice qurilma nomi bilan satrni qabul qiladi, masalan „iPhone 16 Pro" yoki „iPad Pro 13-inch (M4)". Mavjud qurilmalar ro‘yxati Xcode-da o‘rnatilgan simulyatorlarga bog‘liq. Qurilma topilmasa, Canvas xatosiz standart qurilmada oldindan ko‘rishni ko‘rsatadi.

Turli qurilmalar uchun oldindan ko‘rishlar

Keng tarqalgan amaliyot – moslashuvchanlikni tekshirish uchun bir View-ni bir vaqtning o‘zida bir nechta qurilmada ko‘rsatish. Buning uchun qurilma nomlari massivi bilan ForEach ishlatiladi.

struct AdaptiveView_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE (3rd generation)", "iPhone 16 Pro Max", "iPad Pro 13-inch (M4)"], id: \.self) { device in
            AdaptiveView()
                .previewDevice(.previewDevice(device))
                .previewDisplayName(device)
        }
    }
}

PreviewProvider misollari

Amaliy misollar PreviewProvider-dan foydalanishning turli stsenariylarini ko‘rsatadi: oddiy oldindan ko‘rishdan tortib jonli ma'lumotlar va UIKit mosligi bilan murakkab konfiguratsiyalargacha.

Mock ma'lumotlar bilan oldindan ko‘rish

Mock ma'lumotlari – View modelni qabul qilganda oldindan ko‘rish uchun standart naqsh. Haqiqiy API o‘rniga test ma'lumotlari qo‘yiladi, bu ilovani ishga tushirmasdan UI holatini vizual tekshirish imkonini beradi.

struct UserProfileView: View {
    let user: User
    
    var body: some View {
        VStack {
            AsyncImage(url: user.avatarURL)
                .clipShape(Circle())
            Text(user.name)
                .font(.title)
            Text(user.bio)
                .font(.body)
                .foregroundColor(.secondary)
        }
    }
}

struct UserProfileView_Previews: PreviewProvider {
    static var previews: some View {
        UserProfileView(user: .mock)
            .previewDisplayName("Profile")
        
        UserProfileView(user: .mockLongName)
            .previewDisplayName("Long Name")
    }
}

UIViewRepresentable orqali UIKit oldindan ko‘rish

UIKit mosligi – PreviewProvider UIViewRepresentable-ga o‘ralgan UIKit komponentlari bilan ham ishlaydi. Bu butun loyihani migratsiya qilmasdan mavjud UIKit ko‘rinishlarini SwiftUI Canvas-da oldindan ko‘rish imkonini beradi.

struct MapViewRepresentable: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView()
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // Xaritani sozlash
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapViewRepresentable()
    }
}

PreviewProvider va SwiftUI Canvas

Canvas – PreviewProvider natijasini real vaqtda ko‘rsatadigan Xcode vizual muharriri. PreviewProvider tatbiq qilinmasa, Canvas bo‘sh qoladi. Canvas va PreviewProvider birgalikda ishlaydi: PreviewProvider nimani ko‘rsatishni, Canvas esa qayerda va qanday ko‘rsatishni belgilaydi.

Tushunish muhim: Canvas – oldindan ko‘rishni bajarish muhiti, PreviewProvider-ning alternativi emas. Dasturchi Canvas-ni ochmasa ham, PreviewProvider Canvas belgisiga sichqoncha bilan bosilganda paydo bo‘ladigan oldindan ko‘rish orqali kodni tez tekshirish uchun ishlatilishi mumkin. WWDC 2024 ma'lumotlariga ko‘ra, Apple har bir View uchun PreviewProvider yozishni unit testlar yozishga o‘xshash rivojlanish standarti sifatida tavsiya qiladi.

Tavsiya: loyihadagi har bir umumiy View uchun PreviewProvider yozing. Bu yangi dasturchilarni ishga tushirishni tezlashtiradi, code review-ni soddalashtiradi va butun loyihani qurmasdan vizual o‘zgarishlarni tez tekshirish imkonini beradi.

PreviewProvider bilan odatiy muammolar

Muammo 1: Oldindan ko‘rish yangilanmaydi. Agar Canvas kod o‘zgarishlarini aks ettirmasa, sabab ko‘pincha DerivedData keshi. DerivedData-ni Product → Clean Build Folder (⇧⌘K) orqali yoki ~/Library/Developer/Xcode/DerivedData papkasini qo‘lda o‘chirib tozalang. Tozalashdan so‘ng Canvas oldindan ko‘rishni qaytadan quradi.

Muammo 2: PreviewProvider @StateObject-ni ko‘rmaydi. PreviewProvider View-ning statik nusxasini yaratadi, shuning uchun inyeksiya talab qiladigan bog‘liqliklar (ViewModel, xizmatlar) init orqali yoki @StateObject bilan standart qiymat bilan uzatilishi kerak. Oldindan ko‘rishda haqiqiy xizmatlar o‘rniga mock obyektlardan foydalaning.

Muammo 3: Animatsiyalar Canvas-da ishlamaydi. Canvas SwiftUI-ning barcha animatsiyalarini qo‘llab-quvvatlamaydi – ayniqsa vaqtga bog‘liq bo‘lganlarni (withAnimation kechikish bilan, .spring). Animatsiyalarni tekshirish uchun ilovani simulyatorda ishga tushiring. Canvas statik layout tekshiruvi uchun mos keladi.

Bog‘liqliklari bo‘lgan PreviewProvider-ni tuzatish

Bog‘liqliklarni inyeksiya qilish – PreviewProvider-ni murakkab ViewModel bilan ishlashining eng yaxshi usuli. Test ma'lumotlari bilan alohida ViewModel nusxasini yarating va uni View-ning init-iga uzating.

struct DashboardView: View {
    @StateObject var viewModel: DashboardViewModel
    
    var body: some View {
        List(viewModel.items) { item in
            Text(item.title)
        }
    }
}

struct DashboardView_Previews: PreviewProvider {
    static var previews: some View {
        DashboardView(viewModel: DashboardViewModel.mock)
    }
}

Mock kengaytmalari: statik .mock nusxalarini taqdim etadigan ViewModel uchun extension yarating. Bu test ma'lumotlarini ViewModel yonida saqlaydi va PreviewProvider-ni o‘qishli qiladi.