Canvas у Xcode-у — шта је то, SwiftUI уређивач и рад са прегледом

Шта је Canvas у Xcode-у?

Canvas — уграђени уређивач за преглед Xcode-а, први пут представљен у Xcode 11 заједно са SwiftUI. Налази се у десном панелу уређивача поред кода и приказује преглед уживо тренутне SwiftUI View. Canvas ради у реалном времену: свака промена у коду се тренутно одражава у прегледу без ручног поновног компилирања.

Архитектурно, Canvas је посебан процес (Preview Provider Extension) који Xcode покреће при отварању Canvas-а. Процес учитава компилирани PreviewProvider, рендерује резултат кроз Metal и приказује га у панелу уређивача. Ако PreviewProvider није имплементиран, Canvas приказује поруку „Preview paused — No preview provider found”.

Интерфејс Canvas-а

Интерфејс Canvas-а укључује панел алата са избором уређаја, оријентације, шеме боја и размере. Дугмићи Live Preview, Selectable и Embed In Diagram прекључују режиме интеракције. Canvas подржава split-view: може се отворити више Canvas-а за различите датотеке у једној радној области.

Како ради интерактивни Canvas

Live Preview — кључна могућност Canvas-а која преглед чини интерактивним. У овом режиму, Canvas рендерује View у посебном процесу и прослеђује гесте (додир, превлачење, скроловање) назад у SwiftUI рантајм. Корисник може да притиска дугмиће, попуни поља за текст и тестира навигацију без покретања симулатора.

SwiftUI обрађује гесте у Canvas-у кроз исти систем догађаја као на реалном уређају. Разлика у перформанси: Canvas користи софтверско рендеровање кроз Metal, док симулатор користи хост графику. То значи да сложене анимације у Canvas-у могу радити спорије или се визуелно разликовати.

Процес ажурирања Canvas-а

Ажурирање Canvas-а одвија се у три корака. Прво, Xcode открива промену датотеке и инкрементално компилира само промењени PreviewProvider. Затим се нови бинарни модул учитава у процес PreviewProviderExtension. На крају, SwiftUI поново креира View и рендерује је кроз Metal. Цео циклус траје 0.5–2 секунде у зависности од сложености View-а.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Додирнуто \(count) пута") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

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

Интерактивност: након покретања Live Preview, дугме у Canvas-у ради као право — бројач се повећава при сваком притиску, анимација притиска се приказује. То омогућава тестирање логике дугмића без симулатора.

Подешавање Canvas-а

Основна подешавања Canvas-а су доступна кроз мени Editor → Canvas или путем дугмића на панелу алата Canvas-а. Основне опције укључују избор уређаја, оријентације, тамне теме и размере Dynamic Type. За стална подешавања користите PreviewProvider модификаторе у коду.

Напредна подешавања укључују: Auto Activate Preview — аутоматско укључивање Canvas-а при отварању SwiftUI датотеке; Live Preview — режим са гестовима; Draw Live Edges — приказ ивица прегледа; Show Preview Sizes — величина подручја прегледа. Xcode чува ова подешавања преносиво у датотекама workspace/пројекта.

Подешавање кроз PreviewProvider

Програмско подешавање пружа прецизнију контролу над Canvas-ом. Модификатори примењени у previews-у поништавају подешавања панела алата и чувају се у коду — сви чланови тима их виде кроз 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 са .device приказује пун екран уређаја, а .sizeThatFits — компактан преглед величине прилагођене садржају. За вићете и мале компоненте користите .sizeThatFits — то штеди простор у уређивачу.

Примери рада са Canvas-ом

Пример 1: провера прилагодљивости. Користите ForEach са више уређаја и шема боја да бисте били сигурни да интерфејс изгледа једнако добро на свим екранима. Canvas ажурира све прегледе истовремено, омогућујући уочавање проблема са layout-ом пре покретања симулатора.

Пример 2: преглед са подацима. За View који приказују динамички садржај (листе, профиле, картице), креирајте више инстанци са различитим подацима у previews-у. То је брже од пребацивања између екрана у симулатору и уношења података.

Преглед са различитим стањима

Група прегледа кроз Group или ForEach омогућава приказ свих стања компоненте на једном панелу. За листу је то посебно згодно: празна листа, учитавање, грешка и попуњена листа су видљиве истовремено.

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 наспрам Simulator — поређење

Canvas и Simulator се допуњују, а не замењују. Canvas је идеалан за брзу итерацију приликом израде интерфејса: уређивање кода са тренутним повратним информацијама. Simulator је потребан за коначну проверу: реалне перформансе, прилагођени гестови, системске алерте и интеграција са хардверским функцијама (камера, сензори).

Према WWDC 2024, Apple позиционира Canvas као алат за развојача у раним фазама, а Simulator за фазу интеграционог тестирања. 60% времена развоја UI препоручује се провести у Canvas-у, 40% — проверити на симулатору или уређају.

Препорука: израђујте у Canvas-у, тестирајте на симулатору. Користите Live Preview за логику гестова дугмића и навигацију, али коначну проверу анимација, мрежних захтева и хардверских функција обавите на симулатору или реалном уређају.

Савети за рад са Canvas-ом

Савет 1: користите Selectable режим. У Selectable режиму (иконица курсора) можете кликнути на било који елеменат прегледа и видети његову хијерархију, модификаторе и оквир у инспектору. То је корисно за отклањање layout-а: тренутно видите падинг, офсет и величину елемента без исписа.

Савет 2: Embed In Diagram. Canvas може да групише елементе: изаберите два или више View, кликните Embed In Diagram — Canvas ће креирати VStack/HStack/ZStack и аутоматски преправити код. То убрзава креирање сложене хијерархије без ручног укуцавања заграда.

Савет 3: чишћење Canvas Preview Cache-а. Ако Canvas престане да се ажурира, очистите Product → Preview Cache. Xcode ће избрисати кеширане PreviewProvider бинарне датотеке и изградити их из почетка. То решава 90% проблема са закаченим Canvas-ом.

Оптимизација брзине Canvas-а

Спор Canvas је обично изазван прекомерним бројем прегледа. За сложене View користите само један преглед, а не групу од 6–8. Искључите Live Preview за View без гестова — статички режим се рендерује брже. Осигурајте да PreviewProvider користи мокове, а не реалне мрежне захтеве.

// Брзо отклањање: минимални преглед
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // компактни режим
    }
}

previewLayout(.sizeThatFits) — најбржи режим Canvas-а, јер се рендерује само садржај View-а без оквира уређаја. Користите га за свакодневни рад, а .device укључите само за коначну проверу.