UIKit में लाइव पूर्वावलोकन का उपयोग करना

Xcode में लाइव पूर्वावलोकन के कार्यान्वयन के बाद से, मैंने इसे अपने SwiftUI कोड के परीक्षण और डिबगिंग के लिए एक अत्यधिक कुशल और सुविधाजनक तरीका पाया है। वास्तविक समय में मेरे एनिमेशन का पूर्वावलोकन करने की क्षमता ने नाटकीय रूप से विकास के समय को कम कर दिया है, जिससे यह SwiftUI के साथ मेरे काम के लिए एक आदर्श उपकरण बन गया है। मैं अब अपने कोड का परीक्षण करने के लिए सिमुलेटर या भौतिक उपकरणों पर निर्भर नहीं हूं, क्योंकि लाइव पूर्वावलोकन एक सहज और सहज अनुभव प्रदान करता है।

UIKit समृद्ध और इंटरैक्टिव यूजर इंटरफेस बनाने के लिए एक शक्तिशाली उपकरण है। सिम्युलेटर या डिवाइस पर ऐप को बनाए और चलाए बिना अपने विचारों के डिज़ाइन और लेआउट पर जल्दी से पुनरावृति करना मुश्किल हो सकता है। वहीं लाइव पूर्वावलोकन काम आता है।

UIKit के साथ लाइव पूर्वावलोकन का उपयोग करने के लिए, हमें अपने UIViewControllers और UIViews को SwiftUI व्यू में रैप करना होगा। यह प्रोटोकॉल UIViewControllerRepresentableऔर का उपयोग करके प्राप्त किया जा सकता है UIViewRepresentable।

UIViewControllerRepresentableऔर UIViewRepresentableSwiftUI ढांचे में प्रोटोकॉल हैं जो आपको SwiftUI वातावरण में क्रमशः UIViewControllerया का प्रतिनिधित्व करने की अनुमति देते हैं। ये प्रोटोकॉल उन तरीकों और गुणों को परिभाषित करते हैं जिनकी आवश्यकता SwiftUI वातावरण में एक या उदाहरण UIViewबनाने और प्रबंधित करने के लिए होती है।UIViewControllerUIView

रैपर की स्थापना

हम एक नई फाइल बनाएंगे और उसे नाम देंगे LivePreview। हम SwiftUI ढांचे को आयात करेंगे और इस फ़ाइल के नाम UIViewControllerPreviewऔर उसके भीतर दो स्ट्रक्चर्स को परिभाषित करेंगे। UIViewPreviewप्रत्येक के अनुरूप UIViewControllerRepresentableऔर UIViewRepresentableक्रमशः

UIViewControllerPreviewऔर UIViewPreviewसामान्य संरचनाएं हैं जो एक प्रकार का पैरामीटर लेती हैं ViewControllerऔर Viewजो क्रमशः UIViewControllerऔर UIViewप्रोटोकॉल के अनुरूप होती हैं।

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable
struct UIViewPreview<View: UIView>: UIViewRepresentable

UIViewControllerRepresentable का हस्ताक्षर नीचे जैसा है:

protocol UIViewControllerRepresentable : View where Self.Body == Never

• makeUIViewController(context:) -> UIViewController: इस विधि का उपयोग UIViewController उदाहरण बनाने के लिए किया जाता है जिसका उपयोग पूर्वावलोकन में किया जाएगा।
• updateUIViewController(_:context:): इस विधि का उपयोग UIViewController उदाहरण को अद्यतन करने के लिए किया जाता है जब SwiftUI दृश्य पदानुक्रम बदलता है।

UIViewControllerRepresentable का हस्ताक्षर नीचे जैसा है:

protocol UIViewRepresentable : View where Self.Body == Never

• makeUIView(context:) -> UIView: इस पद्धति का उपयोग उस UIViewउदाहरण को बनाने के लिए किया जाता है जिसका उपयोग पूर्वावलोकन में किया जाएगा।
• updateUIView(_:context:): इस विधि का उपयोग UIViewउदाहरण को अद्यतन करने के लिए किया जाता है जब SwiftUI दृश्य पदानुक्रम बदलता है।

कार्यान्वयन

हम अपनी संरचना में अनिवार्य कार्य स्थापित करेंगे जिसका मैंने पहले उल्लेख किया था।

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable {
    let viewController: ViewController

    init(_ viewController: ViewController) {
        self.viewController = viewController
    }

    func makeUIViewController(context: Context) -> ViewController {
        viewController
    }

    func updateUIViewController(_ uiViewController: ViewController, context: Context) { }
}

struct UIViewPreview<View: UIView>: UIViewRepresentable {
    let view: View

    init(_ view: View) {
        self.view = view
    }

    func makeUIView(context: Context) -> UIView {
        return view
    }

    func updateUIView(_ view: UIView, context: Context) {
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
    }
}

struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
        UIViewControllerPreview(ViewController())
    }
}

एक बार यह सेट हो जाने के बाद, हम कमांड + ऑप्शन + रिटर्न पर क्लिक करके कैनवस मोड खोल सकते हैं। यह कैनवस को सहायक संपादक विंडो में खोलेगा, जिससे हम अपने ViewController का लाइव पूर्वावलोकन देख सकेंगे।

जैसा कि हम अपने व्यू कंट्रोलर में बदलाव करते हैं, जैसे कि इसके व्यू के बैकग्राउंड कलर को अपडेट करना, जैसे ऊपर दिए गए जीआईएफ में, जिसे मैंने साझा किया था, हम उन बदलावों को लाइव पूर्वावलोकन के भीतर रीयल-टाइम में देख सकते हैं।

संक्षेप में, हमारे UIKit UIViewControllerको प्रोटोकॉल के अनुरूप संरचना में लपेटकर, हम अपने उपयोगकर्ता इंटरफ़ेस पर डिज़ाइन और पुनरावृति करते समय एक अधिक कुशल वर्कफ़्लो की अनुमति देते UIViewControllerRepresentableहुए लाइव पूर्वावलोकन का विस्तार कर सकते हैं ।UIViewController

अगर आपको यह लेख पढ़ने में मज़ा आया और इसे मददगार पाया, तो कृपया इसे कुछ क्लैप देने पर विचार करें और भविष्य में इस तरह की और सामग्री के लिए मुझे फॉलो करें ❤️