Canvas v Xcode — co to je, editor SwiftUI a práce s náhledem

Co je Canvas v Xcode?

Canvas — vestavěný editor náhledu Xcode, poprvé představený v Xcode 11 společně se SwiftUI. Nachází se v pravém panelu editoru vedle kódu a zobrazuje živý náhled aktuální SwiftUI View. Canvas pracuje v reálném čase: každá změna v kódu se okamžitě projeví v náhledu bez ručního překompilování.

Architektonicky je Canvas samostatný proces (Preview Provider Extension), který Xcode spouští při otevření Canvas. Proces načte zkompilovaný PreviewProvider, vykreslí výsledek přes Metal a zobrazí jej v panelu editoru. Pokud PreviewProvider není implementován, Canvas zobrazí zprávu „Preview paused — No preview provider found”.

Rozhraní Canvas

Rozhraní Canvas zahrnuje panel nástrojů s výběrem zařízení, orientace, barevného schématu a měřítka. Tlačítka Live Preview, Selectable a Embed In Diagram přepínají režimy interakce. Canvas podporuje split-view: lze otevřít více Canvas pro různé soubory v jedné pracovní oblasti.

Jak funguje interaktivní Canvas

Live Preview — klíčová možnost Canvas, která dělá náhled interaktivním. V tomto režimu Canvas vykresluje View v samostatném procesu a předává gesta (ťuknutí, přejetí, rolování) zpět do runtime SwiftUI. Uživatel může mačkat tlačítka, vyplňovat textová pole a testovat navigaci bez spuštění simulátoru.

SwiftUI zpracovává gesta v Canvas prostřednictvím stejného systému událostí jako na skutečném zařízení. Rozdíl ve výkonu: Canvas používá softwarové vykreslování přes Metal, zatímco simulátor používá hostitelskou grafiku. To znamená, že složité animace v Canvas mohou pracovat pomaleji nebo se vizuálně lišit.

Proces aktualizace Canvas

Aktualizace Canvas probíhá ve třech fázích. Nejprve Xcode detekuje změnu souboru a inkrementálně zkompiluje pouze změněný PreviewProvider. Poté se nový binární modul načte do procesu PreviewProviderExtension. Nakonec SwiftUI znovu vytvoří View a vykreslí ji přes Metal. Celý cyklus trvá 0.5–2 sekundy v závislosti na složitosti View.

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

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

Interaktivita: po spuštění Live Preview tlačítko v Canvas funguje jako skutečné — počítadlo se zvyšuje při každém stisknutí, animace stisknutí se zobrazuje. To umožňuje testovat logiku tlačítek bez simulátoru.

Nastavení Canvas

Základní nastavení Canvas jsou přístupná přes menu Editor → Canvas nebo pomocí tlačítek na panelu nástrojů samotného Canvas. Hlavní možnosti zahrnují výběr zařízení, orientace, tmavého režimu a měřítka Dynamic Type. Pro trvalá nastavení použijte modifikátory PreviewProvider v kódu.

Pokročilá nastavení zahrnují: Auto Activate Preview — automatické zapnutí Canvas při otevření SwiftUI souboru; Live Preview — režim s gesty; Draw Live Edges — zobrazení okrajů pohledu; Show Preview Sizes — velikost oblasti náhledu. Xcode ukládá tato nastavení přenosně v souborech workspace/projektu.

Nastavení přes PreviewProvider

Programové nastavení poskytuje přesnější kontrolu nad Canvas. Modifikátory aplikované v previews přepisují nastavení panelu nástrojů a ukládají se v kódu — všichni členové týmu je vidí přes 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 s .device zobrazuje celou obrazovku zařízení, a .sizeThatFits — kompaktní náhled s velikostí přizpůsobenou obsahu. Pro widgety a malé komponenty použijte .sizeThatFits — šetří místo v editoru.

Příklady práce s Canvas

Příklad 1: kontrola přizpůsobivosti. Použijte ForEach s několika zařízeními a barevnými schématy, abyste se ujistili, že rozhraní vypadá stejně dobře na všech obrazovkách. Canvas aktualizuje všechny náhledy současně, což umožňuje zaznamenat problémy s rozložením před spuštěním simulátoru.

Příklad 2: náhled s daty. Pro View zobrazující dynamický obsah (seznamy, profily, karty) vytvořte několik instancí s různými daty v previews. To je rychlejší než přepínání mezi obrazovkami v simulátoru a zadávání dat.

Náhled s různými stavy

Skupina náhledů přes Group nebo ForEach umožňuje zobrazit všechny stavy komponenty na jednom panelu. Pro seznam je to obzvláště výhodné: prázdný seznam, načítání, chyba a naplněný seznam jsou viditelné současně.

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 — srovnání

Canvas a Simulator se doplňují, nenahrazují. Canvas je ideální pro rychlou iteraci při tvorbě rozhraní: úprava kódu s okamžitou zpětnou vazbou. Simulator je nezbytný pro konečnou kontrolu: skutečný výkon, vlastní gesta, systémové alerty a integrace s hardwarovými funkcemi (kamera, senzory).

Podle WWDC 2024 Apple staví Canvas jako nástroj pro vývojáře v raných fázích a Simulator pro fázi integračního testování. 60% času vývoje UI se doporučuje strávit v Canvas, 40% — zkontrolovat na simulátoru nebo zařízení.

Doporučení: tvořte rozhraní v Canvas, testujte na simulatoru. Použijte Live Preview pro logiku gest tlačítek a navigace, ale konečnou kontrolu animací, síťových požadavků a hardwarových funkcí proveďte na simulátoru nebo skutečném zařízení.

Tipy pro práci s Canvas

Tip 1: používejte režim Selectable. V režimu Selectable (ikona kurzoru) můžete kliknout na libovolný prvek náhledu a vidět jeho hierarchii, modifikátory a rámec v inspektoru. To je užitečné pro ladění rozložení: okamžitě vidíte padding, offset a velikost prvku bez výpisů.

Tip 2: Embed In Diagram. Canvas umí seskupovat prvky: vyberte dvě nebo více View, klikněte Embed In Diagram — Canvas vytvoří VStack/HStack/ZStack a automaticky přepíše kód. To urychluje vytváření složité hierarchie bez ručního zadávání závorek.

Tip 3: čištění mezipaměti Canvas Preview. Pokud Canvas přestal aktualizovat, vyčistěte Product → Preview Cache. Xcode odstraní zazálohované binární soubory PreviewProvider a sestaví je znovu. To řeší 90% problémů se zaseknutým Canvas.

Optimalizace rychlosti Canvas

Pomalý Canvas je obvykle způsoben nadměrným počtem náhledů. Pro složité View použijte pouze jeden náhled, ne skupinu 6–8. Vypněte Live Preview pro View bez gest — statický režim renderuje rychleji. Ujistěte se, že PreviewProvider používá mocky, ne skutečné síťové požadavky.

// Rychlé ladění: minimální náhled
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // kompaktní režim
    }
}

previewLayout(.sizeThatFits) — nejrychlejší režim Canvas, protože se vykresluje pouze obsah View bez rámečku zařízení. Používejte jej pro každodenní práci, .device zapněte pouze pro konečnou kontrolu.