PreviewProvider — यह क्या है, SwiftUI प्रोटोकॉल और Xcode में सेटअप

PreviewProvider क्या है?

PreviewProvider एक SwiftUI प्रोटोकॉल है जो Xcode Canvas में पूर्वावलोकन सामग्री बनाने के लिए अनुबंध को परिभाषित करता है। प्रोटोकॉल में एक अनिवार्य गुण होता है: previews प्रकार some View का। previews द्वारा लौटाया गया कोई भी मान Canvas में एक इंटरैक्टिव पूर्वावलोकन के रूप में प्रदर्शित होता है। PreviewProvider को विरासत की आवश्यकता नहीं है — एक extension में स्थिर कार्यान्वयन पर्याप्त है।

संरचनात्मक रूप से, PreviewProvider SwiftUI रनटाइम का हिस्सा नहीं है — यह विशुद्ध रूप से एक डेवलपमेंट टूल है। प्रोटोकॉल @available(iOS 13.0, *) विशेषता से चिह्नित है और रिलीज़ बिल्ड में संकलित नहीं होता है, क्योंकि Xcode उत्पादन से पूर्वावलोकन कोड को बाहर करने के लिए सशर्त संकलन का उपयोग करता है। इसका मतलब है कि PreviewProvider बाइनरी आकार या एप्लिकेशन प्रदर्शन को प्रभावित नहीं करता है।

previews प्रोटोकॉल

previews गुण PreviewProvider की एकमात्र आवश्यकता है। इसे कोई भी View लौटाना चाहिए: सरल Text से लेकर Group और ForEach के साथ जटिल पदानुक्रम तक। Xcode लौटाई गई View को Canvas में रेंडर करता है, सिस्टम सेटिंग्स (थीम, आकार, फ़ॉन्ट) लागू करता है।

import SwiftUI

struct GreetingView: View {
    let name: String
    
    var body: some View {
        Text("Hello, \(name)!")
            .padding()
    }
}

// PreviewProvider — static implementation
struct GreetingView_Previews: PreviewProvider {
    static var previews: some View {
        GreetingView(name: "World")
    }
}

नामकरण परंपरा: Apple पूर्वावलोकन संरचना को {ViewName}_Previews नाम देने की सलाह देता है। यह संकलक के लिए अनिवार्य नहीं है, लेकिन पठनीयता और प्रोजेक्ट नेविगेशन में सुधार करता है। Xcode नई SwiftUI फ़ाइल बनाते समय स्वचालित रूप से इस टेम्पलेट को सम्मिलित करता है।

PreviewProvider कैसे काम करता है: प्रोटोकॉल और previews विधि

कार्य तंत्र PreviewProvider स्थिर प्रेषण पर आधारित है: Xcode केवल Debug कॉन्फ़िगरेशन के लिए PreviewProvider extension को संकलित करता है और Canvas निर्माण प्रक्रिया के दौरान previews को कॉल करता है। हर बार कोड बदलने पर, Xcode केवल संशोधित PreviewProvider को पुनः संकलित करता है, जिससे लगभग तत्काल पूर्वावलोकन अद्यतन सुनिश्चित होता है।

SwiftUI सिम्युलेटर या डिवाइस पर पूर्वावलोकन और अंतिम UI के बीच सटीक मिलान की गारंटी नहीं देता है — Canvas सरलीकृत रेंडरिंग का उपयोग करता है। विलंब वाले एनिमेशन गलत प्रदर्शित हो सकते हैं, और कुछ UIKit घटक (MapKit, WebView) अतिरिक्त कॉन्फ़िगरेशन के बिना Canvas में रेंडर नहीं होते हैं।

Group के माध्यम से एकाधिक पूर्वावलोकन

Group एक View के कई अवस्थाओं को एक साथ प्रदर्शित करने की अनुमति देता है, विभिन्न कॉन्फ़िगरेशन तैयार करते समय पुनरावृत्ति को गति देता है। Group के अंदर प्रत्येक पूर्वावलोकन स्वतंत्र रूप से रेंडर होता है।

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ButtonView(title: "Primary", style: .primary)
                .previewDisplayName("Primary")
            
            ButtonView(title: "Disabled", style: .primary)
                .disabled(true)
                .previewDisplayName("Disabled")
            
            ButtonView(title: "Secondary", style: .secondary)
                .previewDisplayName("Secondary")
        }
    }
}

previewDisplayName Canvas में प्रत्येक पूर्वावलोकन में एक लेबल जोड़ता है, जो कई अवस्थाओं की तुलना करते समय विशेष रूप से उपयोगी होता है। Group में पूर्वावलोकन की अधिकतम संख्या सीमित नहीं है, लेकिन 6–8 से अधिक Canvas को धीमा कर देते हैं।

Xcode में पूर्वावलोकन कॉन्फ़िगरेशन

Xcode प्रदान करता है पूर्वावलोकन प्रदर्शन को कॉन्फ़िगर करने के लिए कई संशोधक। मुख्य हैं: previewDevice — एक विशिष्ट डिवाइस का अनुकरण करता है (iPhone 16 Pro, iPad Air, Apple Watch Ultra), previewLayout — आकार सेट करता है (device, fixed, sizeThatFits)। इन संशोधकों का संयोजन पूर्वावलोकन वातावरण पर पूर्ण नियंत्रण देता है।

previewDevice डिवाइस के नाम के साथ एक स्ट्रिंग स्वीकार करता है, उदाहरण के लिए "iPhone 16 Pro" या "iPad Pro 13-inch (M4)"। उपलब्ध डिवाइसों की सूची Xcode में स्थापित सिम्युलेटर पर निर्भर करती है। यदि डिवाइस नहीं मिलता है, Canvas बिना त्रुटि के डिफ़ॉल्ट डिवाइस पर पूर्वावलोकन प्रदर्शित करता है।

विभिन्न डिवाइसों के लिए पूर्वावलोकन

सामान्य अभ्यास अनुकूलनशीलता जांचने के लिए एक View को एक साथ कई डिवाइसों पर दिखाना है। इसके लिए डिवाइस नामों की सरणी के साथ ForEach का उपयोग किया जाता है।

struct AdaptiveView_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE (3rd generation)", "iPhone 16 Pro Max", "iPad Pro 13-inch (M4)"], id: \.self) { device in
            AdaptiveView()
                .previewDevice(.previewDevice(device))
                .previewDisplayName(device)
        }
    }
}

PreviewProvider उदाहरण

व्यावहारिक उदाहरण PreviewProvider के विभिन्न उपयोग परिदृश्य दिखाते हैं: सरल पूर्वावलोकन से लेकर लाइव डेटा और UIKit अनुकूलता के साथ जटिल कॉन्फ़िगरेशन तक।

मॉक डेटा के साथ पूर्वावलोकन

मॉक डेटा पूर्वावलोकन के लिए एक मानक पैटर्न है जब View एक मॉडल स्वीकार करता है। वास्तविक API के बजाय, परीक्षण डेटा प्रतिस्थापित किया जाता है, जो एप्लिकेशन चलाए बिना UI स्थिति की दृश्य पुष्टि की अनुमति देता है।

struct UserProfileView: View {
    let user: User
    
    var body: some View {
        VStack {
            AsyncImage(url: user.avatarURL)
                .clipShape(Circle())
            Text(user.name)
                .font(.title)
            Text(user.bio)
                .font(.body)
                .foregroundColor(.secondary)
        }
    }
}

struct UserProfileView_Previews: PreviewProvider {
    static var previews: some View {
        UserProfileView(user: .mock)
            .previewDisplayName("Profile")
        
        UserProfileView(user: .mockLongName)
            .previewDisplayName("Long Name")
    }
}

UIViewRepresentable के माध्यम से UIKit पूर्वावलोकन

UIKit अनुकूलता — PreviewProvider UIViewRepresentable में लिपटे UIKit घटकों के साथ भी काम करता है। यह पूरे प्रोजेक्ट को माइग्रेट किए बिना SwiftUI Canvas में मौजूदा UIKit दृश्यों का पूर्वावलोकन करने की अनुमति देता है।

struct MapViewRepresentable: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView()
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // Configure map
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapViewRepresentable()
    }
}

PreviewProvider और SwiftUI Canvas

Canvas Xcode का दृश्य संपादक है जो PreviewProvider के आउटपुट को वास्तविक समय में रेंडर करता है। PreviewProvider कार्यान्वयन के बिना, Canvas खाली रहता है। Canvas और PreviewProvider एक जोड़ी के रूप में काम करते हैं: PreviewProvider परिभाषित करता है कि क्या दिखाना है, Canvas परिभाषित करता है कि कहाँ और कैसे।

यह समझना महत्वपूर्ण है: Canvas पूर्वावलोकन निष्पादन वातावरण है, PreviewProvider का विकल्प नहीं। भले ही डेवलपर Canvas न खोले, PreviewProvider का उपयोग Canvas आइकन पर होवर करने पर पॉपअप पूर्वावलोकन के माध्यम से त्वरित कोड जांच के लिए किया जा सकता है। WWDC 2024 के अनुसार, Apple यूनिट टेस्ट लिखने के समान, प्रत्येक View के लिए PreviewProvider लिखने की अनुशंसा करता है।

अनुशंसा: प्रोजेक्ट में प्रत्येक सार्वजनिक View के लिए PreviewProvider लिखें। यह नए डेवलपर्स के ऑनबोर्डिंग को गति देता है, कोड समीक्षा को सरल बनाता है, और पूरे प्रोजेक्ट को बनाए बिना त्वरित दृश्य परिवर्तन सत्यापन की अनुमति देता है।

PreviewProvider के साथ सामान्य समस्याएँ

समस्या 1: पूर्वावलोकन अपडेट नहीं होता। यदि Canvas कोड परिवर्तनों को प्रतिबिंबित नहीं करता है, तो कारण आमतौर पर DerivedData कैश है। Product → Clean Build Folder (⇧⌘K) के माध्यम से DerivedData साफ़ करें या ~/Library/Developer/Xcode/DerivedData फ़ोल्डर को हटा दें। सफाई के बाद, Canvas पूर्वावलोकन को नए सिरे से बनाता है।

समस्या 2: PreviewProvider @StateObject नहीं देखता। PreviewProvider View का एक स्थिर उदाहरण बनाता है, इसलिए इंजेक्शन की आवश्यकता वाली निर्भरताएँ (ViewModels, सेवाएँ) आरंभकर्ता या डिफ़ॉल्ट मान वाले @StateObject के माध्यम से पारित की जानी चाहिए। पूर्वावलोकन में वास्तविक सेवाओं के बजाय मॉक ऑब्जेक्ट का उपयोग करें।

समस्या 3: Canvas में एनिमेशन काम नहीं करते। Canvas सभी SwiftUI एनिमेशन का समर्थन नहीं करता है — विशेष रूप से वे जो समय पर निर्भर करते हैं (withAnimation विलंब के साथ, .spring)। एनिमेशन परीक्षण के लिए, एप्लिकेशन को सिम्युलेटर पर चलाएँ। Canvas स्थिर लेआउट सत्यापन के लिए उपयुक्त है।

निर्भरताओं के साथ PreviewProvider को ठीक करना

निर्भरता इंजेक्शन जटिल ViewModels के साथ PreviewProvider को काम करने का सबसे अच्छा तरीका है। परीक्षण डेटा के साथ एक अलग ViewModel उदाहरण बनाएं और इसे View आरंभकर्ता को पास करें।

struct DashboardView: View {
    @StateObject var viewModel: DashboardViewModel
    
    var body: some View {
        List(viewModel.items) { item in
            Text(item.title)
        }
    }
}

struct DashboardView_Previews: PreviewProvider {
    static var previews: some View {
        DashboardView(viewModel: DashboardViewModel.mock)
    }
}

मॉक एक्सटेंशन: ViewModel के लिए एक extension बनाएं जो स्थिर .mock उदाहरण प्रदान करता है। यह परीक्षण डेटा को ViewModel के पास रखता है और PreviewProvider को पठनीय बनाता है।