Canvas în Xcode — ce este, editorul SwiftUI și lucrul cu previzualizarea

Ce este Canvas în Xcode?

Canvas — editorul de previzualizare încorporat în Xcode, introdus pentru prima dată în Xcode 11 împreună cu SwiftUI. Acesta se află în panoul din dreapta editorului, lângă cod, și afișează previzualizarea live a SwiftUI View curente. Canvas funcționează în timp real: fiecare modificare a codului se reflectă imediat în previzualizare fără recompilare manuală.

Arhitectural, Canvas este un proces separat (Preview Provider Extension) pe care Xcode îl lansează la deschiderea Canvas. Procesul încarcă PreviewProvider compilat, randăm rezultatul prin Metal și îl afișează în panoul editorului. Dacă PreviewProvider nu este implementat, Canvas afișează un mesaj generic „Preview paused — No preview provider found”.

Interfața Canvas

Interfața Canvas include un panou de instrumente cu selecție de dispozitiv, orientare, schemă de culori și scară. Butoanele Live Preview, Selectable și Embed In Diagram comută modurile de interacțiune. Canvas suportă split-view: se pot deschide mai multe Canvas pentru fișiere diferite în aceeași zonă de lucru.

Cum funcționează Canvas interactiv

Live Preview — capacitatea cheie a Canvas care face previzualizarea interactivă. În acest mod, Canvas randăm View într-un proces separat și transmite gesturile (atingere, glisare, derulare) înapoi în runtime-ul SwiftUI. Utilizatorul poate apăsa butoane, completa câmpuri de text și testa navigarea fără a porni simulatorul.

SwiftUI procesează gesturile în Canvas prin același sistem de evenimente ca pe un dispozitiv real. Diferența de performanță: Canvas folosește randare software prin Metal, în timp ce simulatorul folosește grafica gazdei. Aceasta înseamnă că animațiile complexe în Canvas pot funcționa mai lent sau pot diferi vizual.

Procesul de actualizare Canvas

Actualizarea Canvas are loc în trei etape. Mai întâi, Xcode detectează modificarea fișierului și compilează incremental doar PreviewProvider modificat. Apoi, noul modul binar este încărcat în procesul PreviewProviderExtension. În final, SwiftUI re-creează View și o randăm prin Metal. Întregul ciclu durează 0.5–2 secunde, în funcție de complexitatea View.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Atingeri \(count) ori") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

Interactivitatea: la pornirea Live Preview, butonul din Canvas funcționează ca unul real — contorul crește la fiecare apăsare, animația de apăsare este afișată. Aceasta permite testarea logicii butoanelor fără simulator.

Configurarea Canvas

Setările de bază Canvas sunt accesibile prin meniul Editor → Canvas sau prin butoanele de pe panoul de instrumente al Canvas. Opțiunile principale includ selecția dispozitivului, orientarea, tema întunecată și scara Dynamic Type. Pentru setări permanente, utilizați modificatorii PreviewProvider în cod.

Setări avansate includ: Auto Activate Preview — activarea automată a Canvas la deschiderea unui fișier SwiftUI; Live Preview — mod cu gesturi; Draw Live Edges — afișarea limitelor vizualizărilor; Show Preview Sizes — dimensiunea zonei de previzualizare. Xcode salvează aceste setări portabil în fișierele workspace/proiect.

Configurarea prin PreviewProvider

Configurarea programatică oferă un control mai precis asupra Canvas. Modificatorii aplicați în previews suprascriu setările panoului de instrumente și se salvează în cod — toți membrii echipei îi văd prin git.

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout cu .device afișează ecranul complet al dispozitivului, iar .sizeThatFits — o previzualizare compactă cu dimensiunea adaptată conținutului. Pentru widgeturi și componente mici, utilizați .sizeThatFits — economisește spațiu în editor.

Exemple de lucru cu Canvas

Exemplul 1: verificarea adaptivității. Utilizați ForEach cu mai multe dispozitive și scheme de culori pentru a vă asigura că interfața arată la fel de bine pe toate ecranele. Canvas actualizează toate previzualizările simultan, permițând observarea problemelor de layout înainte de a porni simulatorul.

Exemplul 2: previzualizare cu date. Pentru View care afișează conținut dinamic (liste, profiluri, carduri), creați mai multe instanțe cu date diferite în previews. Aceasta este mai rapid decât comutarea între ecrane în simulator și introducerea datelor.

Previzualizare cu diferite stări

Grupul de previzualizări prin Group sau ForEach permite afișarea tuturor stărilor unui component pe un singur panou. Pentru o listă, aceasta este deosebit de convenabilă: lista goală, încărcarea, eroarea și lista completă sunt vizibile simultan.

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas vs Simulator — comparație

Canvas și Simulator se completează reciproc, nu se înlocuiesc. Canvas este ideal pentru iterații rapide în dezvoltarea interfeței: editarea codului cu feedback imediat. Simulatorul este necesar pentru verificarea finală: performanță reală, gesturi personalizate, alerte de sistem și integrare cu funcții hardware (cameră, senzori).

Conform WWDC 2024, Apple poziționează Canvas ca instrument pentru dezvoltator în etapele incipiente, iar Simulatorul — pentru etapa de testare a integrării. 60% din timpul de dezvoltare UI este recomandat a fi petrecut în Canvas, 40% — verificat pe simulator sau dispozitiv.

Recomandare: proiectați în Canvas, testați pe simulator. Utilizați Live Preview pentru logica gesturilor butoanelor și navigare, dar efectuați verificarea finală a animațiilor, cererilor de rețea și funcțiilor hardware pe simulator sau pe un dispozitiv real.

Sfaturi pentru lucrul cu Canvas

Sfatul 1: utilizați modul Selectable. În modul Selectable (pictograma cursorului), puteți face clic pe orice element din previzualizare și vedea ierarhia, modificatorii și cadrul acestuia în inspector. Acest lucru este util pentru depanarea layout-ului: vedeți imediat padding, offset și dimensiunea elementului fără printuri.

Sfatul 2: Embed In Diagram. Canvas poate grupa elemente: selectați două sau mai multe View, apăsați Embed In Diagram — Canvas va crea VStack/HStack/ZStack și va rescrie codul automat. Aceasta accelerează crearea unei ierarhii complexe fără tastarea manuală a parantezelor.

Sfatul 3: curățarea cache-ului Canvas Preview. Dacă Canvas a încetat să se mai actualizeze, curățați Product → Preview Cache. Xcode va șterge binarele PreviewProvider stocate în cache și le va reconstrui de la zero. Aceasta rezolvă 90% din problemele cu Canvas blocat.

Optimizarea vitezei Canvas

Canvas lent este de obicei cauzat de un număr excesiv de previzualizări. Pentru View complexe, utilizați o singură previzualizare, nu un grup de 6–8. Dezactivați Live Preview pentru View fără gesturi — modul static randăm mai rapid. Asigurați-vă că PreviewProvider folosește mock-uri, nu cereri reale de rețea.

// Depanare rapidă: previzualizare minimă
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // mod compact
    }
}

previewLayout(.sizeThatFits) — cel mai rapid mod Canvas, deoarece se randăm doar conținutul View fără cadrul dispozitivului. Utilizați-l pentru lucrul zilnic, activați .device doar pentru verificarea finală.