Canvas az Xcode-ban — mi ez, SwiftUI-szerkesztő és munka az előnézettel

Mi az a Canvas az Xcode-ban?

Canvas — az Xcode beépített előnézet-szerkesztője, amely először az Xcode 11-ben jelent meg a SwiftUI-val együtt. A szerkesztő jobb oldali panelén található a kód mellett, és élő előnézetet jelenít meg az aktuális SwiftUI View-ról. A Canvas valós időben működik: minden kódváltozás azonnal megjelenik az előnézetben kézi újrafordítás nélkül.

Architekturálisan a Canvas egy különálló folyamat (Preview Provider Extension), amelyet az Xcode indít a Canvas megnyitásakor. A folyamat betölti a lefordított PreviewProvidert, a Metal segítségével rendereli az eredményt, és megjeleníti a szerkesztő panelén. Ha a PreviewProvider nincs implementálva, a Canvas a „Preview paused — No preview provider found” üzenetet jeleníti meg.

A Canvas interfésze

A Canvas interfésze tartalmaz egy eszköztárat eszközválasztással, tájolással, színsémával és méretaránnyal. A Live Preview, Selectable és Embed In Diagram gombok váltják az interakciós módokat. A Canvas támogatja a split-view-t: több Canvas nyitható meg különböző fájlokhoz ugyanabban a munkaterületben.

Hogyan működik az interaktív Canvas

Live Preview — a Canvas kulcsfontosságú képessége, amely interaktívvá teszi az előnézetet. Ebben a módban a Canvas egy különálló folyamatban rendereli a View-t és továbbítja a gesztusokat (érintés, húzás, görgetés) a SwiftUI futási környezetébe. A felhasználó megnyomhat gombokat, kitölthet szöveges mezőket és tesztelheti a navigációt a szimulátor elindítása nélkül.

A SwiftUI ugyanazon eseményrendszeren keresztül dolgozza fel a gesztusokat a Canvas-ban, mint egy valódi eszközön. A teljesítménykülönbség: a Canvas szoftveres renderelést használ a Metal segítségével, míg a szimulátor a host grafikát használja. Ez azt jelenti, hogy az összetett animációk a Canvas-ban lassabban működhetnek vagy vizuálisan eltérőek lehetnek.

A Canvas frissítési folyamata

A Canvas frissítése három lépésben történik. Először az Xcode érzékeli a fájlváltozást és csak a módosított PreviewProvidert fordítja le inkrementálisan. Ezután az új bináris modul betöltődik a PreviewProviderExtension folyamatba. Végül a SwiftUI újra létrehozza a View-t és a Metal segítségével rendereli. A teljes ciklus 0.5–2 másodpercig tart a View összetettségétől függően.

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

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

Interaktivitás: a Live Preview elindításakor a Canvas-ban lévő gomb úgy működik, mint egy valódi — a számláló minden megnyomáskor nő, a nyomás animációja megjelenik. Ez lehetővé teszi a gomb logikájának tesztelését szimulátor nélkül.

A Canvas beállítása

Az alapbeállítások a Canvas-ban az Editor → Canvas menün vagy a Canvas eszköztárának gombjain keresztül érhetők el. A fő opciók közé tartozik az eszköz kiválasztása, tájolás, sötét mód és Dynamic Type méret. Állandó beállításokhoz használja a PreviewProvider módosítókat a kódban.

A fejlett beállítások közé tartozik: Auto Activate Preview — a Canvas automatikus bekapcsolása SwiftUI fájl megnyitásakor; Live Preview — mód gesztusokkal; Draw Live Edges — a nézetek határainak megjelenítése; Show Preview Sizes — az előnézeti terület mérete. Az Xcode ezeket a beállításokat hordozható módon menti a workspace/projekt fájlokban.

Beállítás a PreviewProvider segítségével

A programozott beállítás pontosabb vezérlést biztosít a Canvas felett. A previews-ban alkalmazott módosítók felülírják az eszköztár beállításait és a kódban tárolódnak — a csapat összes tagja látja őket a git-en keresztül.

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

A previewLayout .device-dal az eszköz teljes képernyőjét, a .sizeThatFits pedig egy kompakt előnézetet jelenít meg a tartalomhoz igazított mérettel. Widgetek és kis komponensek számára használja a .sizeThatFits-t — ez helyet takarít a szerkesztőben.

Példák a Canvas használatára

1. példa: adaptivitás ellenőrzése. Használja a ForEach-t több eszközzel és színsémával, hogy megbizonyosodjon arról, hogy a felület minden képernyőn egyformán jól néz ki. A Canvas minden előnézetet egyszerre frissít, lehetővé téve az elrendezési problémák észlelését a szimulátor elindítása előtt.

2. példa: előnézet adatokkal. A dinamikus tartalmat megjelenítő View-k (listák, profilok, kártyák) esetében hozzon létre több példányt különböző adatokkal a previews-ban. Ez gyorsabb, mint a képernyők váltogatása a szimulátorban és az adatok bevitele.

Előnézet különböző állapotokkal

Az előnézetek csoportja a Group vagy ForEach segítségével lehetővé teszi egy komponens összes állapotának megjelenítését egy panelen. Listák esetében ez különösen kényelmes: az ürres lista, betöltés, hiba és feltöltött lista egyszerre látható.

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 — összehasonlítás

A Canvas és a Simulator kiegészítik egymást, nem helyettesítik. A Canvas ideális a gyors iterációhoz a felület tervezésekor: kódszerkesztés azonnali visszajelzéssel. A Simulator a végső ellenőrzéshez szükséges: valódi teljesítmény, egyéni gesztusok, rendszerriasztások és hardverfunkciókkal (kamera, érzékelők) való integráció.

A WWDC 2024 szerint az Apple a Canvas-t a korai szakaszban lévő fejlesztői eszközként, a Simulatort pedig az integrációs tesztelés szakaszához pozicionálja. Az UI fejlesztési idő 60%-át a Canvas-ban, 40%-át pedig szimulátoron vagy eszközön történő ellenőrzésre ajánlott tölteni.

Javaslat: tervezzen a Canvas-ban, teszteljen a Simulator-ban. Használja a Live Preview-t a gombok és navigáció gesztuslogikájához, de az animációk, hálózati kérések és hardverfunkciók végső ellenőrzését végezze szimulátoron vagy valódi eszközön.

Tippek a Canvas használatához

1. tipp: használja a Selectable módot. Selectable módban (kurzor ikon) rákattinthat bármely elemre az előnézetben és láthatja annak hierarchiáját, módosítóit és keretét az inspektorban. Ez hasznos az elrendezés hibakereséséhez: azonnal látja a paddinget, offsetet és elem méretét kiiratás nélkül.

2. tipp: Embed In Diagram. A Canvas képes elemeket csoportosítani: válasszon ki két vagy több View-t, kattintson az Embed In Diagram-ra — a Canvas létrehoz egy VStack/HStack/ZStack-et és automatikusan átírja a kódot. Ez felgyorsítja az összetett hierarchia létrehozását kézi zárójelezés nélkül.

3. tipp: a Canvas Preview Cache ürítése. Ha a Canvas leállt a frissüléssel, ürítse ki a Product → Preview Cache-t. Az Xcode törli a gyorsítótárolt PreviewProvider bináris fájlokat és újraépíti azokat a semmiből. Ez megoldja a lefagyott Canvas problémáinak 90%-át.

A Canvas sebességének optimalizálása

Lassú Canvas általában túl sok előnézet miatt van. Összetett View-k esetében csak egy előnézetet használjon, ne 6–8 darabot. Kapcsolja ki a Live Preview-t a gesztusok nélküli View-knél — a statikus mód gyorsabban renderel. Győződjön meg arról, hogy a PreviewProvider mock-okat használ, nem valódi hálózati kéréseket.

// Gyors hibakeresés: minimális előnézet
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // kompakt mód
    }
}

A previewLayout(.sizeThatFits) — a leggyorsabb Canvas mód, mert csak a View tartalma renderelődik eszközkeret nélkül. Használja napi munkához, a .device módot csak végső ellenőrzéshez kapcsolja be.