PreviewProvider – wat is het, SwiftUI-protocol en configuratie in Xcode

Wat is PreviewProvider?

PreviewProvider – het SwiftUI-protocol dat het contract definieert voor het maken van voorbeeldinhoud in Xcode Canvas. Het protocol bevat één verplichte eigenschap: previews van het type some View. Elke waarde die door previews wordt geretourneerd, wordt in Canvas weergegeven als een interactief voorbeeld. PreviewProvider vereist geen overerving – een statische implementatie in een extension is voldoende.

Architectonisch maakt PreviewProvider geen deel uit van de SwiftUI-runtime – het is uitsluitend een ontwikkeltool. Het protocol is gemarkeerd met het @available(iOS 13.0, *)-attribuut en wordt niet gecompileerd in de release-build, omdat Xcode conditionele compilatie gebruikt om voorbeeldcode uit productie uit te sluiten. Dit betekent dat PreviewProvider geen invloed heeft op de binaire grootte en prestaties van de applicatie.

Protocol previews

Eigenschap previews – de enige vereiste van PreviewProvider. Het moet elke View retourneren: van een eenvoudige Text tot een complexe hiërarchie met Group en ForEach. Xcode rendert de geretourneerde View in Canvas, waarbij systeeminstellingen (thema, grootte, lettertype) worden toegepast.

import SwiftUI

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

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

Naamgevingsconventie: Apple raadt aan om de voorbeeldstructuur {ViewName}_Previews te noemen. Dit is geen verplichte vereiste van de compiler, maar verbetert de leesbaarheid en navigatie door het project. Xcode vult dit sjabloon automatisch in bij het maken van een nieuw SwiftUI-bestand.

Hoe werkt PreviewProvider: protocol en methode previews

Werkingsmechanisme van PreviewProvider is gebaseerd op statische dispatch: Xcode compileert de extension met PreviewProvider alleen voor de Debug-configuratie en roept previews aan tijdens het bouwen van Canvas. Elke keer dat de code verandert, hercompileert Xcode alleen de gewijzigde PreviewProviders, wat een bijna directe voorbeeldupdate garandeert.

SwiftUI garandeert geen exacte overeenkomst van het voorbeeld met de uiteindelijke UI op de simulator of het apparaat – Canvas gebruikt vereenvoudigde rendering. Animaties met vertragingen kunnen onjuist worden weergegeven en sommige UIKit-componenten (MapKit, WebView) worden niet in Canvas gerenderd zonder extra configuratie.

Meerdere voorbeelden via Group

Group maakt het mogelijk meerdere toestanden van één View tegelijkertijd weer te geven, wat de iteratie bij het ontwerpen van verschillende configuraties versnelt. Elk voorbeeld binnen de Group wordt onafhankelijk gerenderd.

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 voegt een label toe aan elk voorbeeld in Canvas, wat vooral handig is bij het vergelijken van meerdere toestanden. Het maximale aantal voorbeelden in Group is niet beperkt, maar meer dan 6–8 vertraagt Canvas.

Configuratie van het voorbeeld in Xcode

Xcode biedt verschillende modifiers voor het configureren van de voorbeeldweergave. De belangrijkste: previewDevice – emuleert een specifiek apparaat (iPhone 16 Pro, iPad Air, Apple Watch Ultra), previewLayout – stelt de grootte in (device, fixed, sizeThatFits). Combinatie van deze modifiers geeft volledige controle over de voorbeeldomgeving.

previewDevice ontvangt een string met de apparaatnaam, bijvoorbeeld „iPhone 16 Pro" of „iPad Pro 13-inch (M4)". De lijst met beschikbare apparaten hangt af van de geïnstalleerde simulatoren in Xcode. Als het apparaat niet wordt gevonden, geeft Canvas het voorbeeld weer op het standaardapparaat zonder foutmelding.

Voorbeelden voor verschillende apparaten

Veelgebruikte praktijk – één View op meerdere apparaten tegelijk weergeven om de responsiviteit te controleren. Hiervoor wordt ForEach met een array van apparaatnamen gebruikt.

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

Voorbeelden van PreviewProvider

Praktische voorbeelden tonen verschillende gebruiksscenario's van PreviewProvider: van eenvoudig voorbeeld tot complexe configuraties met live gegevens en UIKit-compatibiliteit.

Voorbeeld met mockgegevens

Mockgegevens – het standaardpatroon voor voorbeeld wanneer een View een model accepteert. In plaats van de echte API worden testgegevens ingevoegd, wat visuele controle van de UI-status mogelijk maakt zonder de applicatie te starten.

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-voorbeeld via UIViewRepresentable

UIKit-compatibiliteit – PreviewProvider werkt ook met UIKit-componenten die zijn verpakt in UIViewRepresentable. Dit maakt het mogelijk bestaande UIKit-weergaven in SwiftUI Canvas te bekijken zonder migratie van het hele project.

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

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

PreviewProvider en SwiftUI Canvas

Canvas – is de visuele editor van Xcode die het resultaat van PreviewProvider in realtime rendert. Zonder implementatie van PreviewProvider blijft Canvas leeg. Canvas en PreviewProvider werken samen: PreviewProvider bepaalt wat wordt getoond, Canvas – waar en hoe.

Het is belangrijk te begrijpen: Canvas – is de uitvoeringsomgeving van het voorbeeld, geen alternatief voor PreviewProvider. Zelfs als de ontwikkelaar Canvas niet opent, kan PreviewProvider worden gebruikt voor snelle codecontrole via het voorbeeld dat verschijnt bij hoveren op het Canvas-pictogram. Volgens WWDC 2024 beveelt Apple het schrijven van PreviewProvider voor elke View aan als ontwikkelingsstandaard, vergelijkbaar met het schrijven van unittesten.

Aanbeveling: schrijf PreviewProvider voor elke openbare View in het project. Dit versnelt de onboarding van nieuwe ontwikkelaars, vereenvoudigt code reviews en maakt snelle visuele controle van wijzigingen mogelijk zonder het hele project te bouwen.

Veelvoorkomende problemen met PreviewProvider

Probleem 1: Voorbeeld wordt niet bijgewerkt. Als Canvas codewijzigingen niet weerspiegelt, is de oorzaak meestal de DerivedData-cache. Maak DerivedData schoon via Product → Clean Build Folder (⇧⌘K) of door handmatig de map ~/Library/Developer/Xcode/DerivedData te verwijderen. Na het schonen bouwt Canvas het voorbeeld opnieuw op.

Probleem 2: PreviewProvider ziet @StateObject niet. PreviewProvider maakt een statische instantie van de View, dus afhankelijkheden die injectie vereisen (ViewModels, services) moeten via de initialisator of @StateObject met een standaardwaarde worden doorgegeven. Gebruik mock-objecten in plaats van echte services in het voorbeeld.

Probleem 3: Animaties werken niet in Canvas. Canvas ondersteunt niet alle SwiftUI-animaties – vooral die afhankelijk zijn van tijd (withAnimation met vertraging, .spring). Start de applicatie op de simulator om animaties te controleren. Canvas is geschikt voor statische layoutcontrole.

PreviewProvider met afhankelijkheden repareren

Afhankelijkheidsinjectie – de beste manier om PreviewProvider te laten werken met complexe ViewModels. Maak een aparte ViewModel-instantie met testgegevens en geef deze door aan de initialisator van de View.

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-extensies: maak een extension voor ViewModel die statische .mock-instanties levert. Dit houdt testgegevens dicht bij de ViewModel en maakt PreviewProvider leesbaar.