मोबाइल डेवलपमेंट में कस्टम व्यू और ड्राइंग: सार, कौन सी API और यह कैसे काम करता है

कस्टम व्यू क्या हैं और मोबाइल एप्लिकेशन में इनकी आवश्यकता क्यों है

कस्टम व्यू यूज़र-डिफ़ाइंड इंटरफ़ेस घटक हैं जो अनोखी ग्राफिक्स बनाने के लिए मानक ड्राइंग और मापन विधियों को ओवरराइड करते हैं। ग्राफ़, एनिमेशन, आरेख, कस्टम चैट तत्व और AR मास्क — मोबाइल एप्लिकेशन में कस्टम व्यू के विशिष्ट उपयोग के मामले हैं। मानक UI घटक (Button, TextView, Label) 80% कार्यों को कवर करते हैं, लेकिन शेष 20% के लिए मोबाइल डेवलपमेंट में ड्राइंग पर पूर्ण नियंत्रण की आवश्यकता होती है। मोबाइल डेवलपमेंट में ड्राइंग एक ऐसा कौशल है जो जूनियर डेवलपर को सीनियर से अलग करता है।

कस्टम व्यू कब उचित हैं

मोबाइल एप्लिकेशन में कस्टम व्यू अनोखी 2D ग्राफिक्स, जटिल एनिमेशन, चार्ट और डेटा विज़ुअलाइज़ेशन के लिए आवश्यक हैं। यदि मानक UIKit आवश्यक तत्व प्रदान नहीं करता — तो एक कस्टम व्यू बनाया जाता है। मोबाइल एप्लिकेशन में, कस्टम व्यू का उपयोग प्रोग्रेस बार, कस्टम बटन, ग्रेडिएंट फिल, एनिमेटेड आइकन और उंगली से ड्राइंग के लिए कैनवस के लिए किया जाता है। अति प्रयोग न करना महत्वपूर्ण है — सरल शैलियों के लिए, Appearance API के माध्यम से मानक घटकों को कॉन्फ़िगर करना पर्याप्त है।

iOS पर कस्टम व्यू: drawRect और Core Graphics

iOS पर, कस्टम व्यू UIView से इनहेरिट करके और drawRect विधि को ओवरराइड करके बनाए जाते हैं। drawRect को पहले रेंडर पर और प्रत्येक setNeedsDisplay() कॉल के बाद कॉल किया जाता है। drawRect के अंदर, डेवलपर UIGraphicsGetCurrentContext() के माध्यम से CGContext प्राप्त करता है — लाइनों, आकृतियों, ग्रेडिएंट और टेक्स्ट के लिए एक कैनवस। Core Graphics (Quartz 2D) एक निम्न-स्तरीय CPU-आधारित रेंडरिंग इंजन है जो हर पिक्सेल पर पूर्ण नियंत्रण देता है। UIBezierPath संक्षिप्त सिंटैक्स के साथ पथ बनाने के लिए एक सुविधाजनक रैपर है।

class CircleView: UIView {
    private var fillColor: UIColor = .systemBlue

    override func drawRect(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }
        ctx.setFillColor(fillColor.cgColor)
        ctx.addEllipse(in: bounds.insetBy(dx: 4, dy: 4))
        ctx.drawPath(using: .fill)
    }

    func updateColor(_ newColor: UIColor) {
        fillColor = newColor
        setNeedsDisplay()
    }
}

Core Graphics: CGContext, CGGradient और ट्रांसफ़ॉर्मेशन

Core Graphics सभी ड्राइंग ऑपरेशनों के लिए CGContext — एक कैनवस प्रदान करता है। CGGradient CGColorSpace (sRGB, Display P3) के समर्थन के साथ लीनियर और रेडियल ग्रेडिएंट बनाता है। ट्रांसफ़ॉर्मेशन CGAffineTransform के माध्यम से किए जाते हैं — रोटेशन, स्केलिंग और ट्रांसलेशन के लिए 3x3 मैट्रिक्स। CGContextTranslateCTM, CGContextRotateCTM और CGContextScaleCTM कोऑर्डिनेट सिस्टम को संशोधित करते हैं। Core Graphics CPU पर काम करता है, इसलिए जटिल ग्राफिक्स प्रोसेसर को लोड कर सकते हैं — GPU त्वरण के लिए Metal का उपयोग करें।

आकृतियाँ बनाने के लिए UIBezierPath

UIBezierPath CGPath के ऊपर एक ऑब्जेक्ट-ओरिएंटेड रैपर है। addArc(withCenter:radius:startAngle:endAngle:clockwise:) विधि चाप और वृत्त बनाती है, addCurve Bézier वक्र बनाती है। पथ addClip के माध्यम से यूनियन, इंटरसेक्शन और सबट्रैक्शन ऑपरेशन का समर्थन करते हैं। UIBezierPath कस्टम मास्क (maskView), क्लिपिंग पथ और जटिल आकृतियों — तारे, दिल, कस्टम आइकन के लिए सुविधाजनक है।

Android पर कस्टम व्यू: onDraw और Canvas

Android पर, एक कस्टम व्यू onDraw(Canvas) को ओवरराइड करके View को एक्सटेंड करता है। Canvas में मोबाइल डेवलपमेंट में सभी ड्राइंग विधियाँ शामिल हैं: drawCircle, drawRect, drawLine, drawText, drawBitmap, drawPath और drawRoundRect। Paint पैरामीटर कॉन्फ़िगर करता है — रंग, लाइन की मोटाई, शैली (FILL, STROKE, FILL_AND_STROKE), एंटी-अलियासिंग (isAntiAlias) और टेक्स्ट का आकार। onDraw प्रत्येक invalidate() पर कॉल किया जाता है और इसमें भारी ऑपरेशन नहीं होने चाहिए — सभी गणनाएँ कैश की जाती हैं।

class CustomCircleView(context: Context, attrs: AttributeSet?)
    : View(context, attrs) {

    private val paint = Paint().apply {
        style = Paint.Style.FILL
        color = Color.BLUE
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val cx = width / 2f
        val cy = height / 2f
        val radius = minOf(cx, cy) - 4f
        canvas.drawCircle(cx, cy, radius, paint)
    }
}

Android पर Path और एनिमेशन

Android पर Path, UIBezierPath के समतुल्य है: addCircle, addRect, addOval, lineTo, cubicTo और quadTo। PathMeasure पथ की लंबाई और किसी भी बिंदु पर निर्देशांक की गणना करता है — किसी पथ के साथ ऑब्जेक्ट की गति को एनिमेट करने के लिए उपयोगी। एनिमेशन के लिए, कॉलबैक में invalidate() के साथ ValueAnimator का उपयोग किया जाता है। एनिमेटर रंग, त्रिज्या, स्थिति बदल सकता है — कोई भी गुण जो ड्राइंग को प्रभावित करता है। Android पर कस्टम व्यू XML के माध्यम से एनिमेशन के लिए StateListDrawable और animated-vector का भी समर्थन करते हैं।

Canvas में Shader और ग्रेडिएंट

Android पर ग्रेडिएंट Shader के माध्यम से सेट किए जाते हैं — LinearGradient, RadialGradient और SweepGradient। Shader को paint.setShader(shader) के माध्यम से Paint को असाइन किया जाता है। LinearGradient दो बिंदुओं के बीच वैकल्पिक रंग स्थितियों के साथ एक लीनियर ग्रेडिएंट उत्पन्न करता है। RadialGradient — केंद्र से किनारों तक रेडियल। SweepGradient — एक केंद्र बिंदु के चारों ओर शंक्वाकार। Shader.TileMode (CLAMP, REPEAT, MIRROR) क्षेत्र की सीमाओं से परे व्यवहार को परिभाषित करता है।

Flutter में CustomPainter: Canvas पर ड्राइंग

Flutter CustomPainter का उपयोग करता है — paint(Canvas canvas, Size size) और shouldRepaint विधियों वाला एक क्लास। Flutter में Canvas वही विधियाँ प्रदान करता है जो Android में हैं: drawCircle, drawRect, drawLine, drawPath, drawParagraph और drawImage। Flutter में Paint रंग, मोटाई, शैली और एंटी-अलियासिंग कॉन्फ़िगर करता है। Flutter drawRect या onDraw का उपयोग नहीं करता — सभी ड्राइंग CustomPainter के माध्यम से होती है, जो CustomPaint विजेट में एम्बेडेड होता है।

class CirclePainter extends CustomPainter {
  final Color color;

  CirclePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill
      ..isAntiAlias = true;
    final radius = size.shortestSide / 2 - 4;
    canvas.drawCircle(size.center(Offset.zero), radius, paint);
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) =>
    oldDelegate.color != color;
}

shouldRepaint और RepaintBoundary

shouldRepaint यह निर्धारित करता है कि CustomPainter को फिर से ड्रा करने की आवश्यकता है या नहीं। केवल तब true लौटाएं जब रेंडरिंग को प्रभावित करने वाला डेटा बदलता है — रंग, आकार, चार्ट डेटा। RepaintBoundary पुनः ड्राइंग को एक अलग लेयर में अलग करता है — उन विजेट के लिए उपयोग करें जो शायद ही कभी बदलते हैं। Flutter में setNeedsDisplay या invalidate नहीं है — पुनः ड्राइंग setState या ValueNotifier के माध्यम से परिवर्तनों को सुनकर ट्रिगर की जाती है।

Flutter में ग्रेडिएंट और ट्रांसफ़ॉर्मेशन

Flutter LinearGradient, RadialGradient और SweepGradient का समर्थन करता है — वही प्रकार जो Android में हैं। Gradient createShader(Rect bounds) के माध्यम से Paint के लिए Shader बनाता है। ट्रांसफ़ॉर्मेशन canvas.rotate, canvas.scale, canvas.translate और canvas.skew के माध्यम से किए जाते हैं। Flutter Transform विजेट के लिए 4x4 ट्रांसफ़ॉर्मेशन मैट्रिक्स (Matrix4) का उपयोग करता है। Flutter में ड्राइंग एनिमेशन CustomPainter को पुनः ड्रा करने के लिए setState के साथ AnimationController के माध्यम से बनाए जाते हैं।

कस्टम व्यू का मापन: sizeThatFits, onMeasure और computeDryLayout विधियाँ

कस्टम व्यू का सही मापन अनुमानित इंटरफ़ेस व्यवहार की नींव है। iOS पर, व्यू का आकार sizeThatFits और intrinsicContentSize के माध्यम से निर्धारित किया जाता है। sizeThatFits दी गई बाधाओं के लिए इष्टतम आकार लौटाता है। intrinsicContentSize — बाहरी बाधाओं के बिना सामग्री का प्राकृतिक आकार। Android पर, मापन MeasureSpec पैरामीटर (UNSPECIFIED, EXACTLY, AT_MOST) के साथ onMeasure में कार्यान्वित किया जाता है। Flutter में, आकार paint(Canvas, Size) को पास किया जाता है और computeDryLayout या LayoutBuilder के माध्यम से गणना की जा सकती है।

iOS पर sizeThatFits और intrinsicContentSize

intrinsicContentSize CGSize लौटाता है — इसकी सामग्री के आधार पर व्यू का प्राकृतिक आकार। setContentHuggingPriority और setContentCompressionResistancePriority खिंचाव और संपीड़न के दौरान व्यवहार को नियंत्रित करते हैं। sizeThatFits को Auto Layout में आकार की गणना के लिए सिस्टम द्वारा कॉल किया जाता है। कस्टम व्यू के लिए, intrinsicContentSize को ओवरराइड करें यदि आपके घटक का एक प्राकृतिक आकार है — उदाहरण के लिए, एक वृत्त हमेशा 100x100 होना चाहिए।

Android पर onMeasure और MeasureSpec

onMeasure widthMeasureSpec और heightMeasureSpec स्वीकार करता है। MeasureSpec में मोड और आकार होता है: UNSPECIFIED (बिना बाधाओं के, व्यू अपना आकार चुनता है), EXACTLY (माता-पिता से सटीक आकार), AT_MOST (अधिकतम आकार)। setMeasuredDimension(width, height) मापन परिणाम सहेजता है। डेटा बदलने पर, पुनः मापन के लिए requestLayout() कॉल करें। नेस्टेड ViewGroup को चाइल्ड तत्वों की व्यवस्था के लिए onLayout को ओवरराइड करने की आवश्यकता होती है।

Flutter में computeDryLayout

computeDryLayout पूर्ण लेआउट चक्र के बिना आकार की गणना के लिए RenderObject विधि है। LayoutBuilder.getSize — build विधि में उपलब्ध स्थान प्राप्त करने का एक विकल्प। Flutter में, कैनवस का आकार paint को Size के रूप में पास किया जाता है और इसके लिए अलग मापन की आवश्यकता नहीं होती — CustomPainter पास की गई सीमाओं के भीतर ड्रा करता है। हालांकि, कस्टम RenderObject के लिए, performLayout और computeDryLayout को ओवरराइड करना आवश्यक है।