Canvas в Xcode — що це, редактор SwiftUI та робота з попереднім переглядом

Що таке Canvas в Xcode?

Canvas — вбудований редактор попереднього перегляду Xcode, вперше представлений в Xcode 11 разом зі SwiftUI. Він розташований у правій панелі редактора поруч із кодом і відображає live-попередній перегляд поточної 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 використовує software-рендеринг через 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("Tapped \(count) times") {
            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 issues до запуску симулятора.

Приклад 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 vs Симулятор — порівняння

Canvas і Симулятор доповнюють один одного, а не замінюють. Canvas ідеальний для швидкої ітерації при верстанні: редагування коду з негайним зворотним зв'язком. Симулятор необхідний для фінальної перевірки: реальна продуктивність, кастомні жести, системні алерти та інтеграція з апаратними функціями (камера, датчики).

За даними WWDC 2024, Apple позиціонує Canvas як інструмент для розробника на ранніх етапах, а Симулятор — для етапу інтеграційного тестування. 60% часу розробки UI рекомендується проводити в Canvas, 40% — перевіряти на симуляторі або пристрої.

Рекомендація: верстайте в Canvas, тестуйте на симуляторі. Використовуйте Live Preview для жестової логіки кнопок і навігації, але фінальну перевірку анімацій, мережевих запитів і hardware-функцій проводьте на симуляторі або реальному пристрої.

Поради щодо роботи з Canvas

Порада 1: використовуйте Selectable mode. У режимі Selectable (іконка курсора) можна клікнути на будь-який елемент попереднього перегляду та побачити його ієрархію, модифікатори та фрейм в інспекторі. Це корисно для відлагодження layout: ви миттєво бачите padding, offset і розмір елемента без принтів.

Порада 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 використовує моки, а не реальні мережеві запити.

// Quick debug: minimal preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) — найшвидший режим Canvas, оскільки рендериться лише вміст View без рамок пристрою. Використовуйте його для повсякденного верстання, вмикайте .device лише для фінальної перевірки.