Custom UIView: यह क्या है, निर्माण और drawRect को ओवरराइड करना

Custom UIView क्या है और इसकी आवश्यकता कब होती है

Custom UIView एक उपयोगकर्ता-परिभाषित वर्ग है जो UIView से विरासत प्राप्त करता है, जिसमें डेवलपर कस्टम डिस्प्ले और इंटरैक्शन लॉजिक को लागू करने के लिए मानक विधियों को ओवरराइड करता है। UIKit में कई अंतर्निहित घटक शामिल हैं, लेकिन वे सभी परिदृश्यों को कवर नहीं करते: एनिमेटेड चार्ट, कस्टम स्विच, फ्रीहैंड ड्राइंग कैनवास, गेम तत्व या डेटा विज़ुअलाइज़ेशन के लिए कस्टम कार्यान्वयन की आवश्यकता होती है।

Apple कस्टम UIView बनाने की सिफारिश करता है जब मानक घटक आवश्यक कार्यक्षमता प्रदान नहीं कर सकते या जब एक ही कस्टम तत्व का उपयोग एप्लिकेशन में कई स्थानों पर किया जाता है। WWDC 2024 के अनुसार, मध्यम आकार के प्रोजेक्ट में कस्टम व्यू सभी UIView का औसतन 15-20% बनाते हैं।

सामान्य उपयोग के मामले

कस्टम UIView का उपयोग चार्ट और आरेख बनाने (Core Graphics के साथ रेखाएँ और आकृतियाँ बनाना), कस्टम प्रोग्रेस इंडिकेटर, एनिमेटेड बैकग्राउंड, फिंगर ड्राइंग तत्व और रीयल-टाइम डेटा विज़ुअलाइज़ेशन के लिए किया जाता है। इनमें से प्रत्येक मामले में, डेवलपर को CGContext तक पूर्ण पहुँच मिलती है और वह कोई भी ज्यामिति बना सकता है।

Custom UIView की आवश्यकता कब नहीं है

यदि किसी तत्व को मानक UIKit घटकों (UIButton, UIImageView, UILabel) से Auto Layout और प्रॉपर्टी कॉन्फ़िगरेशन का उपयोग करके इकट्ठा किया जा सकता है, तो UIView की उपक्लास बनाना अत्यधिक होगा। Apple पहले तैयार व्यू की संरचना का प्रयास करने और केवल कार्यक्षमता अपर्याप्त होने पर कस्टम ड्राइंग पर जाने की सिफारिश करता है।

Xcode में Custom UIView कैसे बनाएं

कस्टम UIView बनाना UIView से विरासत प्राप्त करने वाले वर्ग की घोषणा और अनिवार्य इनिशियलाइज़र को लागू करने से शुरू होता है। न्यूनतम कार्यान्वयन में कोड से निर्माण के लिए init(frame:) और Storyboard या XIB से लोड करने के लिए init(coder:) शामिल है।

import UIKit

class CircleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .clear
        setupLayerProperties()
    }

    private func setupLayerProperties() {
        layer.cornerRadius = bounds.width / 2
        layer.masksToBounds = true
    }
}

setupView() विधि में प्रारंभिक गुण सेट किए जाते हैं: पारदर्शी पृष्ठभूमि, परत सेटिंग्स। यदि व्यू Interface Builder में प्रदर्शित किया जाएगा, तो लाइव प्रीव्यू के लिए @IBDesignable और @IBInspectable जोड़ना उचित है।

UIView के जीवनचक्र विधियाँ

Custom UIView सिस्टम द्वारा जीवनचक्र विधियों के अनुक्रम के माध्यम से प्रबंधित किया जाता है जो एक विशिष्ट क्रम में कॉल की जाती हैं। इस चक्र को समझना व्यू की सही सेटअप और ड्राइंग के लिए अत्यंत महत्वपूर्ण है।

सभी विधियाँ सिस्टम द्वारा स्वचालित रूप से कॉल की जाती हैं, और डेवलपर को उन्हें मैन्युअल रूप से कॉल करने की आवश्यकता नहीं है। अपवाद setNeedsDisplay() है, जो सिस्टम को draw(_:) को फिर से कॉल करने का संकेत देता है।

ड्राइंग के लिए draw(_:) को ओवरराइड करना

draw(_:) Custom UIView में कस्टम ड्राइंग के लिए मुख्य विधि है। इसके अंदर, डेवलपर CGContext (ग्राफिक्स संदर्भ) तक पहुँच प्राप्त करता है और Core Graphics का उपयोग करके रेखाएँ, आकृतियाँ, पाठ और चित्र बना सकता है।

सिस्टम स्वचालित रूप से draw(_:) को कॉल करता है जब व्यू पहली बार स्क्रीन पर दिखाई देता है। बाद की कॉल setNeedsDisplay() के माध्यम से शुरू की जाती है, जो व्यू को पुनः ड्राइंग की आवश्यकता के रूप में चिह्नित करता है। महत्वपूर्ण: draw(_:) को सीधे कॉल न करें — यह कैशिंग तंत्र को तोड़ता है और प्रदर्शन को कम करता है।

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    // पृष्ठभूमि भरना
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // एक वृत्त बनाना
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

इस उदाहरण में, draw(_:) पृष्ठभूमि को नीले रंग से भरता है और किनारों से 20 पिक्सेल के अंतर के साथ एक सफेद वृत्त बनाता है। draw(_:) की प्रत्येक कॉल समान-परिणामी होनी चाहिए — समान मापदंडों के साथ कई कॉल समान परिणाम देनी चाहिए।

प्रभावी draw(_:) के नियम

Apple draw(_:) के अंदर काम कम करने की सिफारिश करता है — UIBezierPath पहले से बनाएं, छवियों को कैश करें और भारी गणना न करें। यदि व्यू स्थिर है, तो लगातार पुनः ड्राइंग के बजाय रेंडर की गई छवि के साथ UIImageView का उपयोग करने पर विचार करें।

CALayer बनाम draw(_:): क्या चुनें

CALayer अंतर्निहित परत है जो UIView की दृश्य सामग्री का प्रबंधन करती है। कस्टम ड्राइंग के कई कार्यों को draw(_:) को ओवरराइड किए बिना CALayer गुणों को कॉन्फ़िगर करके हल किया जा सकता है, जो काफी अधिक कुशल है।

Apple Engineering (2024) के अनुसार, CALayer स्तर पर संचालन GPU पर चलते हैं, जबकि draw(_:) CPU-आधारित Core Graphics रेंडरिंग के माध्यम से काम करता है। एनिमेशन और स्मूथ ट्रांज़िशन के लिए, CALayer और CABasicAnimation का उपयोग करना बेहतर है।

एनिमेशन के साथ वेक्टर आकृतियाँ बनाने के लिए CAShapeLayer का उपयोग करें — यह हार्डवेयर त्वरित है और draw(_:) को कॉल किए बिना path, strokeStart और strokeEnd एनिमेशन का समर्थन करता है।

Custom UIView प्रदर्शन अनुकूलन

Custom UIView का प्रदर्शन सीधे एनिमेशन की सहजता और समग्र उपयोगकर्ता अनुभव को प्रभावित करता है। मुख्य समस्याएँ draw(_:) के अत्यधिक कॉल, सबव्यू के असंगत लेआउट और कैशिंग की कमी से उत्पन्न होती हैं।

अनावश्यक पुनः ड्राइंग से बचें

setNeedsDisplay() की प्रत्येक कॉल व्यू की पूर्ण पुनः ड्राइंग को ट्रिगर करती है। यदि परिवर्तन केवल व्यू के भाग को प्रभावित करते हैं, तो एक विशिष्ट आयत के साथ setNeedsDisplay(_:) का उपयोग करें। CALayer गुणों (backgroundColor, cornerRadius, shadow) के लिए पुनः ड्राइंग की आवश्यकता नहीं है — वे GPU स्तर पर अपडेट होते हैं।

रेंडर की गई सामग्री को कैश करना

यदि Custom UIView की सामग्री शायद ही कभी बदलती है, तो इसे UIGraphicsImageRenderer में एक बार रेंडर करें और UIImage के रूप में सहेजें। अगली पुनः ड्राइंग पर, कैश की गई छवि प्रदर्शित करने के लिए draw(at:) का उपयोग करें — यह Core Graphics के माध्यम से पुनः रेंडर करने की तुलना में दस गुना तेज़ है।

func renderToImage() -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: bounds.size)
    return renderer.image { ctx in
        drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
}

स्थिर परतों के लिए shouldRasterize का उपयोग करें

CALayer पर shouldRasterize गुण परत के बिटमैप प्रतिनिधित्व की कैशिंग सक्षम करता है। पारदर्शिता और छाया वाले स्थिर व्यू के लिए इसे चालू करें — इससे कम्पोज़िटिंग लोड कम होता है। एनिमेटेड व्यू के लिए इसे बंद करें: प्रत्येक परिवर्तन पर कैश रीसेट हो जाता है, और रैस्टराइज़ेशन केवल प्रदर्शन को ख़राब करता है।