Xcode में Canvas — यह क्या है, SwiftUI एडिटर और प्रीव्यू के साथ काम करना

Xcode में Canvas क्या है?

Canvas Xcode में एक अंतर्निहित प्रीव्यू एडिटर है, जिसे पहली बार SwiftUI के साथ Xcode 11 में पेश किया गया था। यह कोड के बगल में एडिटर के दाएँ पैनल में स्थित है और वर्तमान 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 स्प्लिट-व्यू का समर्थन करता है: आप एक ही कार्यक्षेत्र में विभिन्न फ़ाइलों के लिए कई Canvas खोल सकते हैं।

इंटरैक्टिव Canvas कैसे काम करता है

Live Preview Canvas की मुख्य विशेषता है जो प्रीव्यू को इंटरैक्टिव बनाती है। इस मोड में, Canvas View को एक अलग प्रक्रिया में रेंडर करता है और जेस्चर (टैप, स्वाइप, स्क्रॉल) को SwiftUI रनटाइम में वापस भेजता है। उपयोगकर्ता सिम्युलेटर चलाए बिना बटन दबा सकता है, टेक्स्ट फ़ील्ड भर सकता है और नेविगेशन का परीक्षण कर सकता है।

SwiftUI Canvas में जेस्चर को उसी इवेंट सिस्टम के माध्यम से संसाधित करता है जो वास्तविक डिवाइस पर होता है। प्रदर्शन में अंतर है: Canvas Metal के माध्यम से सॉफ़्टवेयर रेंडरिंग का उपयोग करता है, जबकि सिम्युलेटर होस्ट ग्राफिक्स का उपयोग करता है। इसका मतलब है कि Canvas में जटिल एनिमेशन धीमे चल सकते हैं या देखने में भिन्न हो सकते हैं।

Canvas अपडेट प्रक्रिया

Canvas अपडेट तीन चरणों में होता है। पहले, Xcode फ़ाइल परिवर्तन का पता लगाता है और केवल बदले गए PreviewProvider को इंक्रीमेंटली संकलित करता है। फिर नया बाइनरी मॉड्यूल PreviewProviderExtension प्रक्रिया में लोड होता है। अंत में, SwiftUI View को पुनः बनाता है और Metal के माध्यम से रेंडर करता है। पूरा चक्र View की जटिलता के आधार पर 0.5–2 सेकंड लेता है।

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 — SwiftUI फ़ाइल खोलने पर स्वचालित Canvas सक्रियण; Live Preview — जेस्चर मोड; Draw Live Edges — व्यू सीमाएँ दिखाना; Show Preview Sizes — प्रीव्यू क्षेत्र का आकार। Xcode इन सेटिंग्स को वर्कस्पेस/प्रोजेक्ट फ़ाइलों में पोर्टेबल तरीके से संग्रहीत करता है।

PreviewProvider के माध्यम से कॉन्फ़िगरेशन

प्रोग्रामेटिक कॉन्फ़िगरेशन Canvas पर अधिक सटीक नियंत्रण देता है। प्रीव्यू में लागू किए गए मॉडिफायर टूलबार सेटिंग्स को ओवरराइड करते हैं और कोड में सहेजे जाते हैं — सभी टीम सदस्य उन्हें 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 सभी प्रीव्यू को एक साथ अपडेट करता है, जिससे सिम्युलेटर चलाने से पहले लेआउट समस्याओं का पता लगाया जा सकता है।

उदाहरण 2: डेटा के साथ प्रीव्यू। गतिशील सामग्री (सूचियाँ, प्रोफ़ाइल, कार्ड) प्रदर्शित करने वाली Views के लिए, प्रीव्यू में अलग-अलग डेटा के साथ कई इंस्टेंस बनाएँ। यह सिम्युलेटर में स्क्रीन के बीच स्विच करने और डेटा दर्ज करने से तेज़ है।

विभिन्न अवस्थाओं के साथ प्रीव्यू

प्रीव्यू समूह 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 बनाम सिम्युलेटर — तुलना

Canvas और सिम्युलेटर एक दूसरे के पूरक हैं, प्रतिस्थापन नहीं। Canvas लेआउट के दौरान त्वरित पुनरावृत्ति के लिए आदर्श है: तत्काल प्रतिक्रिया के साथ कोड संपादित करें। सिम्युलेटर अंतिम सत्यापन के लिए आवश्यक है: वास्तविक प्रदर्शन, कस्टम जेस्चर, सिस्टम अलर्ट और हार्डवेयर सुविधाओं (कैमरा, सेंसर) के साथ एकीकरण।

WWDC 2024 के अनुसार, Apple Canvas को प्रारंभिक विकास के लिए एक उपकरण के रूप में और सिम्युलेटर को एकीकरण परीक्षण के लिए रखता है। UI विकास के 60% समय Canvas में बिताने की सिफारिश की जाती है, 40% — सिम्युलेटर या डिवाइस पर परीक्षण के लिए।

अनुशंसा: Canvas में डिज़ाइन करें, सिम्युलेटर पर परीक्षण करें। बटन और नेविगेशन के जेस्चर लॉजिक के लिए Live Preview का उपयोग करें, लेकिन एनिमेशन, नेटवर्क अनुरोधों और हार्डवेयर फ़ंक्शंस का अंतिम परीक्षण सिम्युलेटर या वास्तविक डिवाइस पर करें।

Canvas के साथ काम करने के सुझाव

सुझाव 1: Selectable मोड का उपयोग करें। Selectable मोड (कर्सर आइकन) में, आप प्रीव्यू के किसी भी तत्व पर क्लिक कर सकते हैं और इंस्पेक्टर में उसकी पदानुक्रम, मॉडिफायर और फ्रेम देख सकते हैं। यह लेआउट डीबगिंग के लिए उपयोगी है: आप बिना प्रिंट किए तुरंत पैडिंग, ऑफसेट और तत्व का आकार देखते हैं।

सुझाव 2: Embed In Diagram। Canvas तत्वों को समूहित कर सकता है: दो या अधिक Views चुनें, Embed In Diagram पर क्लिक करें — Canvas VStack/HStack/ZStack बनाएगा और कोड को स्वचालित रूप से पुनर्निर्माण करेगा। यह मैन्युअल रूप से ब्रैकेट टाइप किए बिना जटिल पदानुक्रम बनाने में तेज़ी लाता है।

सुझाव 3: Canvas Preview Cache साफ़ करें। यदि Canvas अपडेट होना बंद कर देता है, तो Product → Preview Cache साफ़ करें। Xcode कैश्ड PreviewProvider बाइनरी को हटा देगा और उन्हें स्क्रैच से पुनर्निर्माण करेगा। यह Canvas हैंग होने की 90% समस्याओं को हल करता है।

Canvas गति का अनुकूलन

धीमा Canvas आमतौर पर अत्यधिक संख्या में प्रीव्यू के कारण होता है। जटिल Views के लिए, 6–8 के समूह के बजाय केवल एक प्रीव्यू का उपयोग करें। बिना जेस्चर वाली Views के लिए Live Preview बंद करें — स्थिर मोड तेज़ी से रेंडर होता है। सुनिश्चित करें कि PreviewProvider वास्तविक नेटवर्क अनुरोधों के बजाय मॉक का उपयोग करता है।

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

previewLayout(.sizeThatFits) Canvas का सबसे तेज़ मोड है क्योंकि यह डिवाइस सीमाओं के बिना केवल View सामग्री रेंडर करता है। दैनिक लेआउट कार्य के लिए इसका उपयोग करें, केवल अंतिम जाँच के लिए .device चालू करें।