PreviewProvider — vad är det, SwiftUI-protokoll och konfiguration i Xcode

Vad är PreviewProvider?

PreviewProvider — SwiftUI-protokollet som definierar kontraktet för att skapa förhandsvisningsinnehåll i Xcode Canvas. Protokollet innehåller en obligatorisk egenskap: previews av typen some View. Varje värde som returneras av previews visas i Canvas som en interaktiv förhandsvisning. PreviewProvider kräver inte arv — en statisk implementering i en extension räcker.

Arkitektoniskt sett är PreviewProvider inte en del av SwiftUI-runtime — det är uteslutande ett utvecklingsverktyg. Protokollet är markerat med attributet @available(iOS 13.0, *) och kompileras inte i release-bygget, eftersom Xcode använder villkorlig kompilering för att exkludera förhandsvizningskod från produktion. Detta innebär att PreviewProvider inte påverkar binärstorleken och applikationens prestanda.

Protokollet previews

Egenskapen previews — det enda kravet i PreviewProvider. Måste returnera vilken View som helst: från en enkel Text till en komplex hierarki med Group och ForEach. Xcode renderar den returnerade View i Canvas och tillämpar systeminställningar (tema, storlek, teckensnitt).

import SwiftUI

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

// PreviewProvider — statisk implementering
struct GreetingView_Previews: PreviewProvider {
    static var previews: some View {
        GreetingView(name: "World")
    }
}

Namnkonvention: Apple rekommenderar att förhandsvisningsstrukturen heter {ViewName}_Previews. Detta är inte ett obligatoriskt kompilatorkrav, men förbättrar läsbarheten och navigeringen i projektet. Xcode ersätter automatiskt denna mall när en ny SwiftUI-fil skapas.

Hur fungerar PreviewProvider: protokoll och metoden previews

Verkningsmekanism PreviewProvider är baserad på statisk dispatch: Xcode kompilerar extensionen med PreviewProvider endast för Debug-konfigurationen och anropar previews under byggprocessen av Canvas. Varje gång koden ändras kompilerar Xcode endast de ändrade PreviewProvider, vilket säkerställer nästan omedelbar uppdatering av förhandsvisningen.

SwiftUI garanterar inte exakt överensstämmelse mellan förhandsvisningen och det slutliga UI på simulatorn eller enheten — Canvas använder förenklad rendering. Animationer med fördröjningar kan visas felaktigt, och vissa UIKit-komponenter (MapKit, WebView) renderas inte i Canvas utan ytterligare konfiguration.

Flera förhandsvisningar via Group

Group gör det möjligt att visa flera tillstånd av en View samtidigt, vilket snabbar upp iterationen vid design av olika konfigurationer. Varje förhandsvisning inom Group renderas oberoende.

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 lägger till en etikett till varje förhandsvisning i Canvas, vilket är särskilt användbart när man jämför flera tillstånd. Det maximala antalet förhandsvisningar i Group är inte begränsat, men fler än 6–8 saktar ner Canvas.

Konfiguration av förhandsvisning i Xcode

Xcode tillhandahåller flera modifierare för att konfigurera visningen av förhandsvisningen. De viktigaste: previewDevice — emulerar en specifik enhet (iPhone 16 Pro, iPad Air, Apple Watch Ultra), previewLayout — ställer in storlek (device, fixed, sizeThatFits). Kombinationen av dessa modifierare ger full kontroll över förhandsvisningsmiljön.

previewDevice tar emot en sträng med enhetsnamnet, till exempel “iPhone 16 Pro” eller “iPad Pro 13-inch (M4)”. Listan över tillgängliga enheter beror på installerade simulatorer i Xcode. Om enheten inte hittas visar Canvas förhandsvisningen på standardenheten utan fel.

Förhandsvisningar för olika enheter

Vanlig praxis — att visa en View på flera enheter samtidigt för att kontrollera anpassningsförmågan. För detta används ForEach med en array av enhetsnamn.

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)
        }
    }
}

Exempel på PreviewProvider

Praktiska exempel visar olika användningsscenarier för PreviewProvider: från enkel förhandsvisning till komplexa konfigurationer med livedata och UIKit-kompatibilitet.

Förhandsvisning med mockdata

Mockdata — standardmönstret för förhandsvisning när en View tar emot en modell. Istället för verkligt API ersätts testdata, vilket möjliggör visuell kontroll av UI-status utan att starta applikationen.

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")
    }
}

UIKit-förhandsvisning via UIViewRepresentable

UIKit-kompatibilitet — PreviewProvider fungerar även med UIKit-komponenter inslagna i UIViewRepresentable. Detta gör det möjligt att förhandsvisa befintliga UIKit-vyer i SwiftUI Canvas utan att migrera hela projektet.

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

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

PreviewProvider och SwiftUI Canvas

Canvas — är Xcodes visuella redigerare som renderar resultatet av PreviewProvider i realtid. Utan implementering av PreviewProvider förblir Canvas tom. Canvas och PreviewProvider arbetar tillsammans: PreviewProvider bestämmer vad som ska visas, Canvas — var och hur.

Det är viktigt att förstå: Canvas — är körmiljön för förhandsvisningen, inte ett alternativ till PreviewProvider. Även om utvecklaren inte öppnar Canvas kan PreviewProvider användas för snabb kodkontroll via förhandsvisningen som visas när man hovrar över Canvas-ikonen. Enligt WWDC 2024 rekommenderar Apple att skriva PreviewProvider för varje View som utvecklingsstandard, liknande att skriva enhetstester.

Rekommendation: skriv PreviewProvider för varje offentlig View i projektet. Det snabbar upp introduktionen av nya utvecklare, förenklar kodgranskning och möjliggör snabb kontroll av visuella ändringar utan att bygga hela projektet.

Vanliga problem med PreviewProvider

Problem 1: Förhandsvisningen uppdateras inte. Om Canvas inte speglar kodändringar är orsaken oftast DerivedData-cachen. Rensa DerivedData via Product → Clean Build Folder (⇧⌘K) eller genom att manuellt ta bort mappen ~/Library/Developer/Xcode/DerivedData. Efter rensningen bygger Canvas om förhandsvisningen från början.

Problem 2: PreviewProvider ser inte @StateObject. PreviewProvider skapar en statisk instans av View, därför måste beroenden som kräver injicering (ViewModel, tjänster) skickas via initieraren eller @StateObject med standardvärde. Använd mock-objekt istället för riktiga tjänster i förhandsvisningen.

Problem 3: Animationer fungerar inte i Canvas. Canvas stödjer inte alla SwiftUI-animationer — särskilt de som är tidsberoende (withAnimation med fördröjning, .spring). För att kontrollera animationer, kör applikationen på simulatorn. Canvas är lämpligt för statisk layoutkontroll.

Reparera PreviewProvider med beroenden

Beroendeinjektion — det bästa sättet att få PreviewProvider att fungera med komplexa ViewModel. Skapa en separat ViewModel-instans med testdata och skicka den till Viewns initierare.

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-förlängningar: skapa en extension för ViewModel som tillhandahåller statiska .mock-instanser. Detta håller testdata nära ViewModel och gör PreviewProvider läsbar.