Xcode'da Canvas — nedir, SwiftUI düzenleyicisi ve önizlemelerle çalışma

Xcode'da Canvas nedir?

Canvas, Xcode'da yerleşik bir önizleme düzenleyicisidir ve ilk olarak SwiftUI ile birlikte Xcode 11'de tanıtılmıştır. Kodun yanında düzenleyicinin sağ panelinde bulunur ve geçerli SwiftUI View'in canlı önizlemesini görüntüler. Canvas gerçek zamanlı çalışır: koddaki her değişiklik, manuel yeniden derleme olmadan anında önizlemeye yansır.

Mimari olarak Canvas, Xcode'un Canvas'ı açarken başlattığı ayrı bir süreçtir (Preview Provider Extension). Süreç, derlenmiş PreviewProvider'ı yükler, sonucu Metal aracılığıyla işler ve düzenleyici panelinde görüntüler. PreviewProvider uygulanmazsa Canvas, “Preview paused — No preview provider found” yer tutucusunu gösterir.

Canvas arayüzü

Canvas arayüzü, cihaz seçimi, yönlendirme, renk şeması ve ölçek seçeneklerini içeren bir araç çubuğu içerir. Live Preview, Selectable ve Embed In Diagram düğmeleri etkileşim modlarını değiştirir. Canvas bölünmüş görünümü destekler: aynı çalışma alanında farklı dosyalar için birden çok Canvas açabilirsiniz.

Etkileşimli Canvas nasıl çalışır

Live Preview, önizlemeleri etkileşimli hale getiren Canvas'ın temel özelliğidir. Bu modda Canvas, View'i ayrı bir süreçte işler ve jestleri (dokunma, kaydırma, sürükleme) SwiftUI çalışma zamanına geri iletir. Kullanıcı, simülatörü başlatmadan düğmelere basabilir, metin alanlarını doldurabilir ve gezinmeyi test edebilir.

SwiftUI, Canvas'taki jestleri gerçek bir cihazdakiyle aynı olay sistemi aracılığıyla işler. Fark performanstadır: Canvas, Metal aracılığıyla yazılım oluşturma kullanırken, simülatör ana bilgisayar grafiklerini kullanır. Bu, Canvas'taki karmaşık animasyonların daha yavaş çalışabileceği veya görsel olarak farklı görünebileceği anlamına gelir.

Canvas güncelleme süreci

Canvas güncellemesi üç aşamada gerçekleşir. İlk olarak Xcode, dosya değişikliğini algılar ve yalnızca değiştirilen PreviewProvider'ı artımlı olarak derler. Ardından yeni ikili modül, PreviewProviderExtension sürecine yüklenir. Son olarak SwiftUI, View'i yeniden oluşturur ve Metal aracılığıyla işler. Tüm döngü, View'in karmaşıklığına bağlı olarak 0,5–2 saniye sürer.

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()
    }
}

Etkileşim: Live Preview çalışırken Canvas'taki düğme gerçek bir düğme gibi çalışır — her dokunmada sayaç artar ve basma animasyonu görüntülenir. Bu, simülatör olmadan düğme mantığını test etmeye olanak tanır.

Canvas kurulumu

Canvas'in temel ayarları, Editor → Canvas menüsü veya Canvas araç çubuğu düğmeleri aracılığıyla kullanılabilir. Ana seçenekler arasında cihaz seçimi, yönlendirme, karanlık tema ve Dynamic Type ölçeği bulunur. Kalıcı ayarlar için kodda PreviewProvider değiştiricilerini kullanın.

Gelişmiş ayarlar şunları içerir: Auto Activate Preview — SwiftUI dosyası açılırken otomatik Canvas etkinleştirme; Live Preview — jest modu; Draw Live Edges — görünüm sınırlarını gösterme; Show Preview Sizes — önizleme alanı boyutu. Xcode bu ayarları çalışma alanı/proje dosyalarında taşınabilir şekilde saklar.

PreviewProvider aracılığıyla yapılandırma

Programlı yapılandırma, Canvas üzerinde daha hassas kontrol sağlar. Önizlemelerde uygulanan değiştiriciler, araç çubuğu ayarlarını geçersiz kılar ve kodda kaydedilir — tüm ekip üyeleri bunları git aracılığıyla görür.

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 ile tam cihaz ekranını gösterirken, .sizeThatFits içeriğe göre boyutlandırılmış kompakt bir önizleme gösterir. Widget'lar ve küçük bileşenler için .sizeThatFits kullanın — düzenleyicide yer kazandırır.

Canvas ile çalışma örnekleri

Örnek 1: uyarlanabilirlik testi. Arayüzün tüm ekranlarda iyi göründüğünden emin olmak için birden çok cihaz ve renk şemasıyla ForEach kullanın. Canvas, tüm önizlemeleri aynı anda güncelleyerek simülatörü başlatmadan önce düzen sorunlarını tespit etmenizi sağlar.

Örnek 2: verilerle önizleme. Dinamik içerik (listeler, profiller, kartlar) görüntüleyen View'ler için önizlemelerde farklı verilerle birden çok örnek oluşturun. Bu, simülatörde ekranlar arasında geçiş yapıp veri girmekten daha hızlıdır.

Farklı durumlarla önizleme

Önizleme grubu, Group veya ForEach aracılığıyla tüm bileşen durumlarını tek bir panelde görüntülemenizi sağlar. Listeler için bu özellikle kullanışlıdır: boş liste, yükleniyor, hata ve dolu liste aynı anda görünür.

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 ve Simülatör — karşılaştırma

Canvas ve Simülatör birbirini tamamlar, yerine geçmez. Canvas, düzen sırasında hızlı yineleme için idealdir: anında geri bildirimle kodu düzenleyin. Simülatör, son doğrulama için gereklidir: gerçek performans, özel jestler, sistem uyarıları ve donanım özellikleriyle (kamera, sensörler) entegrasyon.

WWDC 2024'e göre Apple, Canvas'ı erken geliştirme aşaması için bir araç, Simülatör'ü ise entegrasyon testi için konumlandırıyor. UI geliştirme süresinin %60'ının Canvas'ta, %40'ının ise simülatör veya cihazda test edilerek geçirilmesi önerilir.

Öneri: Canvas'ta tasarlayın, simülatörde test edin. Düğmeler ve gezinme için jest mantığında Live Preview kullanın, ancak animasyonların, ağ isteklerinin ve donanım işlevlerinin son testlerini simülatör veya gerçek bir cihazda yapın.

Canvas ile çalışma ipuçları

İpucu 1: seçilebilir modu kullanın. Seçilebilir modda (imleç simgesi), önizlemedeki herhangi bir öğeye tıklayarak hiyerarşisini, değiştiricilerini ve çerçevesini denetçide görebilirsiniz. Bu, düzen hata ayıklaması için kullanışlıdır: yazdırmadan anında dolgu, ofset ve öğe boyutunu görürsünüz.

İpucu 2: Embed In Diagram. Canvas, öğeleri gruplayabilir: iki veya daha fazla View seçin, Embed In Diagram'a tıklayın — Canvas, VStack/HStack/ZStack oluşturacak ve kodu otomatik olarak yeniden yapılandıracaktır. Bu, manuel olarak parantez yazmadan karmaşık hiyerarşi oluşturmayı hızlandırır.

İpucu 3: Canvas önizleme önbelleğini temizleyin. Canvas güncellemeyi durdurursa, Product → Preview Cache'i temizleyin. Xcode, önbelleğe alınmış PreviewProvider ikili dosyalarını silecek ve sıfırdan yeniden oluşturacaktır. Bu, Canvas donma sorunlarının %90'ını çözer.

Canvas hızını optimize etme

Yavaş Canvas genellikle aşırı sayıda önizlemeden kaynaklanır. Karmaşık View'ler için 6–8'lik bir grup yerine yalnızca bir önizleme kullanın. Jest olmayan View'ler için Live Preview'ı kapatın — statik mod daha hızlı işlenir. PreviewProvider'ın gerçek ağ istekleri yerine sahte veri kullandığından emin olun.

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

previewLayout(.sizeThatFits), Canvas'ın en hızlı modudur çünkü cihaz kenarlıkları olmadan yalnızca View içeriğini işler. Günlük düzen çalışmaları için bunu kullanın, .device'ı yalnızca son kontroller için etkinleştirin.