PreviewProvider – bu nədir, SwiftUI protokolu və Xcode-da konfiqurasiya

PreviewProvider nədir?

PreviewProvider – Xcode Canvas-da ön izləmə məzmunu yaratmaq üçün müqaviləni təyin edən SwiftUI protokoludur. Protokol bir məcburi xassəyə malikdir: previews some View tipində. previews tərəfindən qaytarılan hər bir dəyər Canvas-da interaktiv ön izləmə kimi göstərilir. PreviewProvider miras tələb etmir – extension-da statik tətbiq kifayətdir.

Memarlıq baxımından PreviewProvider SwiftUI icra mühitinin bir hissəsi deyil – bu yalnız tərtibat alətidir. Protokol @available(iOS 13.0, *) atributu ilə işarələnmişdir və release quruluşunda tərtib edilmir, çünki Xcode ön izləmə kodunu production-dan xaric etmək üçün şərti tərtibdən istifadə edir. Bu o deməkdir ki, PreviewProvider ikili faylın ölçüsünə və tətbiqin performansına təsir etmir.

previews protokolu

previews xassəsi – PreviewProvider-ın yeganə tələbidir. İstənilən View-i qaytarmalıdır: sadə Text-dən Group və ForEach ilə mürəkkəb iyerarxiyaya qədər. Xcode qaytarılan View-i Canvas-da göstərir, sistem parametrlərini (tema, ölçü, şrift) tətbiq edir.

import SwiftUI

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

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

Adlandırma konvensiyası: Apple ön izləmə strukturunu {ViewName}_Previews adlandırmağı tövsiyə edir. Bu kompilyator üçün məcburi tələb deyil, lakin oxunaqlılığı və layihə üzrə naviqasiyanı yaxşılaşdırır. Xcode yeni SwiftUI faylı yaradarkən bu şablonu avtomatik tətbiq edir.

PreviewProvider necə işləyir: protokol və previews metodu

İş mexanizmi PreviewProvider statik göndərməyə əsaslanır: Xcode PreviewProvider ilə extension-ı yalnız Debug konfiqurasiyası üçün tərtib edir və Canvas qurulması zamanı previews-i çağırır. Kod hər dəfə dəyişdirildikdə, Xcode yalnız dəyişdirilmiş PreviewProvider-ı yenidən tərtib edir ki, bu da demək olar ki, ani ön izləmə yenilənməsini təmin edir.

SwiftUI ön izləmənin simulyator və ya cihazdakı son UI-ə dəqiq uyğunluğuna zəmanət vermir – Canvas sadələşdirilmiş göstərmədən istifadə edir. Gecikməli animasiyalar düzgün göstərilməyə bilər və bəzi UIKit komponentləri (MapKit, WebView) əlavə konfiqurasiya olmadan Canvas-da göstərilmir.

Group vasitəsilə çoxsaylı ön izləmələr

Group bir View-in bir neçə vəziyyətini eyni anda göstərməyə imkan verir ki, bu da müxtəlif konfiqurasiyaların dizaynı zamanı iterasiyanı sürətləndirir. Group daxilində hər bir ön izləmə müstəqil göstərilir.

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 hər bir ön izləməyə etiket əlavə edir ki, bu da çoxsaylı vəziyyətləri müqayisə edərkən xüsusilə faydalıdır. Group-da maksimum ön izləmə sayı məhdud deyil, lakin 6–8-dən çoxu Canvas-ı yavaşladır.

Xcode-da ön izləmənin konfiqurasiyası

Xcode təmin edir ön izləmənin göstərilməsini konfiqurasiya etmək üçün bir neçə modifier. Əsas olanlar: previewDevice – müəyyən cihazı emulyasiya edir (iPhone 16 Pro, iPad Air, Apple Watch Ultra), previewLayout – ölçüsü təyin edir (device, fixed, sizeThatFits). Bu modifierlərin kombinasiyası ön izləmə mühiti üzərində tam nəzarət verir.

previewDevice cihaz adı ilə sətir qəbul edir, məsələn „iPhone 16 Pro" və ya „iPad Pro 13-inch (M4)". Mövcud cihazların siyahısı Xcode-da quraşdırılmış simulyatorlardan asılıdır. Cihaz tapılmazsa, Canvas xəta vermədən ön izləməni standart cihazda göstərir.

Müxtəlif cihazlar üçün ön izləmələr

Ümumi təcrübə – bir View-i eyni anda bir neçə cihazda göstərmək, cavabdehliliyi yoxlamaq üçün. Bunun üçün cihaz adları massivi ilə ForEach istifadə olunur.

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 nümunələri

Praktik nümunələr PreviewProvider-dan istifadənin müxtəlif ssenarilərini göstərir: sadə ön izləmədən canlı məlumatlar və UIKit uyğunluğu ilə mürəkkəb konfiqurasiyalara qədər.

Mock məlumatları ilə ön izləmə

Mock məlumatları – View model qəbul etdikdə ön izləmə üçün standart nümunədir. Həqiqi API əvəzinə test məlumatları təqdim olunur ki, bu da tətbiqi işə salmadan UI vəziyyətini vizual yoxlamağa imkan verir.

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 vasitəsilə UIKit ön izləməsi

UIKit uyğunluğu – PreviewProvider UIViewRepresentable-ə bükülmüş UIKit komponentləri ilə də işləyir. Bu, bütün layihəni miqrasiya etmədən mövcud UIKit görünüşlərinə SwiftUI Canvas-da ön izləmə etməyə imkan verir.

struct MapViewRepresentable: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView()
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // Xəritəni konfiqurasiya et
    }
}

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

PreviewProvider və SwiftUI Canvas

Canvas – PreviewProvider-ın nəticəsini real vaxtda göstərən Xcode vizual redaktorudur. PreviewProvider tətbiq olunmadan Canvas boş qalır. Canvas və PreviewProvider birlikdə işləyir: PreviewProvider nə göstəriləcəyini, Canvas isə harada və necə göstəriləcəyini təyin edir.

Anlamaq vacibdir: Canvas – ön izləmə icra mühitidir, PreviewProvider-ın alternativi deyil. Tərtibatçı Canvas-ı açmasa belə, PreviewProvider Canvas ikonasına hover edərək kodu tez yoxlamaq üçün istifadə oluna bilər. WWDC 2024 məlumatına görə, Apple hər View üçün PreviewProvider yazmağı unit testlər yazmağa bənzər bir inkişaf standartı kimi tövsiyə edir.

Tövsiyə: layihədəki hər bir ictimai View üçün PreviewProvider yazın. Bu, yeni tərtibatçıların onboardingini sürətləndirir, code review-i sadələşdirir və bütün layihəni qurmadan vizual dəyişiklikləri tez yoxlamağa imkan verir.

PreviewProvider ilə tipik problemlər

Problem 1: Ön izləmə yenilənmir. Canvas kod dəyişikliklərini əks etdirmirsə, səbəb çox güman DerivedData keşidir. DerivedData-nı Product → Clean Build Folder (⇧⌘K) vasitəsilə və ya ~/Library/Developer/Xcode/DerivedData qovluğunu əl ilə silərək təmizləyin. Təmizlədikdən sonra Canvas ön izləməni yenidən qurur.

Problem 2: PreviewProvider @StateObject-i görmür. PreviewProvider View-in statik nümunəsini yaradır, buna görə də inyeksiya tələb edən asılılıqlar (ViewModel, xidmətlər) init vasitəsilə və ya @StateObject ilə standart dəyərlə ötürülməlidir. Ön izləmədə real xidmətlər əvəzinə mock obyektlərdən istifadə edin.

Problem 3: Animasiyalar Canvas-da işləmir. Canvas SwiftUI-nin bütün animasiyalarını dəstəkləmir – xüsusən zamandan asılı olanları (withAnimation gecikmə ilə, .spring). Animasiyaları yoxlamaq üçün tətbiqi simulyatorda işə salın. Canvas statik layout yoxlaması üçün uyğundur.

Asılılıqları olan PreviewProvider-ın düzəldilməsi

Asılılıqların inyeksiyası – PreviewProvider-ı mürəkkəb ViewModel ilə işlək etməyin ən yaxşı yolu. Test məlumatları ilə ayrıca ViewModel nümunəsi yaradın və onu View-in initinə ötürün.

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 genişləndirmələri: statik .mock nümunələri təqdim edən ViewModel üçün extension yaradın. Bu, test məlumatlarını ViewModel-in yanında saxlayır və PreviewProvider-ı oxunaqlı edir.