पसंद के मुताबिक ड्रॉइंग बनाना

लिखने का तरीका आज़माएं
Android के लिए, Jetpack Compose हमारा सुझाया गया यूज़र इंटरफ़ेस (यूआई) टूलकिट है. Compose में लेआउट इस्तेमाल करने का तरीका जानें.

किसी कस्टम व्यू का सबसे अहम हिस्सा, उसका लुक है. पसंद के मुताबिक ड्रॉइंग आपके ऐप्लिकेशन की आवश्यकता के अनुसार आसान या जटिल हो सकता है. यह दस्तावेज़ में कुछ सबसे सामान्य ऑपरेशन शामिल हैं.

ज़्यादा जानकारी के लिए, यह देखें ड्रॉ करने लायक जानकारी.

onड्रॉ() में बदलाव करें

कस्टम व्यू बनाने का सबसे ज़रूरी चरण, onDraw() अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है तरीका. onDraw() का पैरामीटर Canvas ऑब्जेक्ट है जिसे व्यू खुद ड्रॉ करने के लिए इस्तेमाल कर सकता है. Canvas क्लास टेक्स्ट, लाइन, बिटमैप, और कई अन्य ग्राफ़िक बनाने के तरीके तय करता है प्रिमिटिव. onDraw() में इन तरीकों का इस्तेमाल करके, कस्टम यूज़र इंटरफ़ेस (यूआई) के साथ काम करता है.

सबसे पहले Paint ऑब्जेक्ट. अगले सेक्शन में, Paint के बारे में ज़्यादा जानकारी दी गई है.

ड्रॉइंग ऑब्जेक्ट बनाएं

कॉन्टेंट बनाने android.graphics अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है फ़्रेमवर्क ड्रॉइंग को दो हिस्सों में बांटता है:

  • क्या बनाना है, इसे Canvas मैनेज करता है.
  • ड्रॉ करने का तरीका, जिसे Paint मैनेज करता है.

उदाहरण के लिए, Canvas लाइन बनाने का तरीका देता है और Paint लाइन के रंग को तय करने के तरीके बताता है. Canvas में रेक्टैंगल बनाने का तरीका होता है और Paint तय करता है कि उस आयत को रंग से भरना है या उसे खाली छोड़ना है. Canvas से उन आकारों के बारे में पता चलता है जिन्हें स्क्रीन पर बनाया जा सकता है और Paint हर आकार के रंग, स्टाइल, फ़ॉन्ट वगैरह के बारे में बताता है कोई बदलाव नहीं किया जा सकता.

कुछ भी ड्रॉ करने से पहले, एक या एक से ज़्यादा Paint ऑब्जेक्ट बनाएं. कॉन्टेंट बनाने नीचे दिए गए उदाहरण में ऐसा init तरीके से किया गया है. यह तरीका जिसे Java से कंस्ट्रक्टर से कॉल किया गया है, लेकिन इसे इनलाइन तरीके से Kotlin.

Kotlin

@ColorInt
private var textColor    // Obtained from style attributes.

@Dimension
private var textHeight   // Obtained from style attributes.

private val textPaint = Paint(ANTI_ALIAS_FLAG).apply {
    color = textColor
    if (textHeight == 0f) {
        textHeight = textSize
    } else {
        textSize = textHeight
    }
}

private val piePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    style = Paint.Style.FILL
    textSize = textHeight
}

private val shadowPaint = Paint(0).apply {
    color = 0x101010
    maskFilter = BlurMaskFilter(8f, BlurMaskFilter.Blur.NORMAL)
}

Java

private Paint textPaint;
private Paint piePaint;
private Paint shadowPaint;

@ColorInt
private int textColor;       // Obtained from style attributes.

@Dimension
private float textHeight;    // Obtained from style attributes.

private void init() {
   textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   textPaint.setColor(textColor);
   if (textHeight == 0) {
       textHeight = textPaint.getTextSize();
   } else {
       textPaint.setTextSize(textHeight);
   }

   piePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   piePaint.setStyle(Paint.Style.FILL);
   piePaint.setTextSize(textHeight);

   shadowPaint = new Paint(0);
   shadowPaint.setColor(0xff101010);
   shadowPaint.setMaskFilter(new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL));
   ...
}

समय से पहले ऑब्जेक्ट बनाना एक ज़रूरी ऑप्टिमाइज़ेशन है. व्यू उसे बार-बार बदला जाता है और कई ड्रॉइंग ऑब्जेक्ट को शुरू करने में काफ़ी खर्चे की ज़रूरत होती है. अपने onDraw() तरीके में ड्रॉइंग ऑब्जेक्ट बनाना इससे आपके यूज़र इंटरफ़ेस (यूआई) की परफ़ॉर्मेंस कम हो जाती है.

लेआउट इवेंट मैनेज करना

अपने कस्टम व्यू को ठीक से ड्रॉ करने के लिए, पता लगाएं कि वह कितना साइज़ का है. कॉम्प्लेक्स कस्टम व्यू के साइज़ के हिसाब से, अक्सर कई लेआउट कैलकुलेशन करने पड़ते हैं और उनके आकार को स्क्रीन पर देखा जा सकता है. कभी भी अपने साइज़ के बारे में अनुमान न लगाएं स्क्रीन पर. भले ही सिर्फ़ एक ऐप्लिकेशन आपके व्यू का इस्तेमाल करे, तब भी वह ऐप्लिकेशन अलग-अलग स्क्रीन साइज़, एक से ज़्यादा स्क्रीन डेंसिटी, और अलग-अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को हैंडल कर सकें पोर्ट्रेट और लैंडस्केप मोड, दोनों में अनुपात.

हालांकि View में मेज़रमेंट को मैनेज करने के कई तरीके मौजूद हैं. इनमें से ज़्यादातर ओवरराइड किया गया. अगर आपको व्यू के साइज़ पर खास कंट्रोल नहीं चाहिए, तो सिर्फ़ इनमें से किसी एक तरीके को बदलें: onSizeChanged().

onSizeChanged() को तब कॉल किया जाता है, जब आपके व्यू को पहली बार साइज़ की तुलना भी कर सकते है. हिसाब लगाना पोज़िशन, डाइमेंशन, और व्यू के साइज़ से जुड़ी अन्य वैल्यू हर बार ड्रॉ करने पर हर बार उनका हिसाब लगाने के बजाय, onSizeChanged(). नीचे दिए गए उदाहरण में, onSizeChanged() वह जगह है जहां व्यू चार्ट के बाउंडिंग रेक्टैंगल और उसकी रिलेटिव पोज़िशन की गणना करता है टेक्स्ट लेबल और अन्य विज़ुअल एलिमेंट शामिल हैं.

जब आपके व्यू को कोई साइज़ असाइन किया जाता है, तो लेआउट मैनेजर यह मानता है कि इसमें व्यू की पैडिंग (जगह) शामिल होती है. पैडिंग वैल्यू को मैनेज करते समय, का साइज़. यहां onSizeChanged() का एक स्निपेट दिया गया है, जिसमें इसके लिए:

Kotlin

private val showText    // Obtained from styled attributes.
private val textWidth   // Obtained from styled attributes.

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    // Account for padding.
    var xpad = (paddingLeft + paddingRight).toFloat()
    val ypad = (paddingTop + paddingBottom).toFloat()

    // Account for the label.
    if (showText) xpad += textWidth.toFloat()
    val ww = w.toFloat() - xpad
    val hh = h.toFloat() - ypad

    // Figure out how big you can make the pie.
    val diameter = Math.min(ww, hh)
}

Java

private Boolean showText;    // Obtained from styled attributes.
private int textWidth;       // Obtained from styled attributes.

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    // Account for padding.
    float xpad = (float)(getPaddingLeft() + getPaddingRight());
    float ypad = (float)(getPaddingTop() + getPaddingBottom());

    // Account for the label.
    if (showText) xpad += textWidth;

    float ww = (float)w - xpad;
    float hh = (float)h - ypad;

    // Figure out how big you can make the pie.
    float diameter = Math.min(ww, hh);
}

अगर आपको अपने व्यू के लेआउट पैरामीटर पर ज़्यादा कंट्रोल चाहिए, तो onMeasure(). इस तरीके के पैरामीटर View.MeasureSpec अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है वे वैल्यू, जो आपको यह बताती हैं कि आपके व्यू के अभिभावक आपके व्यू को कितना बड़ा बनाना चाहते हैं और भले ही, वह साइज़ सबसे ज़्यादा हो या सिर्फ़ सुझाव के तौर पर. ऑप्टिमाइज़ेशन के तौर पर, ये वैल्यू, पैक किए गए पूर्णांकों के तौर पर सेव की जाती हैं. साथ ही, वैल्यू को बढ़ाने के लिए स्टैटिक तरीके का इस्तेमाल किया जाता है हर पूर्णांक में सेव की गई जानकारी को अनपैक करने के लिए View.MeasureSpec.

यहां onMeasure() को लागू करने का एक उदाहरण दिया गया है. इसमें लागू करता है, तो यह अपने क्षेत्र को इतना बड़ा बनाने की कोशिश करता है जिससे चार्ट को उतना ही बड़ा बनाया जा सके लेबल के रूप में:

Kotlin

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    // Try for a width based on your minimum.
    val minw: Int = paddingLeft + paddingRight + suggestedMinimumWidth
    val w: Int = View.resolveSizeAndState(minw, widthMeasureSpec, 1)

    // Whatever the width is, ask for a height that lets the pie get as big as
    // it can.
    val minh: Int = View.MeasureSpec.getSize(w) - textWidth.toInt() + paddingBottom + paddingTop
    val h: Int = View.resolveSizeAndState(minh, heightMeasureSpec, 0)

    setMeasuredDimension(w, h)
}

Java

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   // Try for a width based on your minimum.
   int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
   int w = resolveSizeAndState(minw, widthMeasureSpec, 1);

   // Whatever the width is, ask for a height that lets the pie get as big as it
   // can.
   int minh = MeasureSpec.getSize(w) - (int)textWidth + getPaddingBottom() + getPaddingTop();
   int h = resolveSizeAndState(minh, heightMeasureSpec, 0);

   setMeasuredDimension(w, h);
}

इस कोड में तीन ज़रूरी बातों का ध्यान रखना चाहिए:

  • इन कैलकुलेशन के लिए व्यू की पैडिंग (जगह) को ध्यान में रखा जाता है. जैसा बताया गया है तो यहां दी गई जानकारी व्यू की ज़िम्मेदारी है.
  • हेल्पर मेथड resolveSizeAndState() अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है का इस्तेमाल किया जाता है, ताकि चौड़ाई और ऊंचाई की आखिरी वैल्यू बनाई जा सके. यह हेल्पर, रिटर्न करता है View.MeasureSpec की एक सही वैल्यू व्यू का ज़रूरी साइज़, onMeasure() में पास की गई वैल्यू के मुताबिक होना चाहिए.
  • onMeasure() की कोई रिटर्न वैल्यू नहीं है. इसके बजाय, जिस तरीके से अपने नतीजों को कॉल करके setMeasuredDimension(). इस तरीके से कॉल करना ज़रूरी है. अगर आप इस कॉल को छोड़ देते हैं, तो View क्लास की वजह से रनटाइम में अपवाद हो सकता है.

जगह बदलना

ऑब्जेक्ट बनाने और कोड को मेज़र करने के बाद, onDraw(). हर व्यू, onDraw() को अलग-अलग तरीके से लागू करता है. हालांकि, कुछ ऐसे सामान्य ऑपरेशन हैं जिन्हें ज़्यादातर व्यू मिलते हैं:

  • इसका इस्तेमाल करके टेक्स्ट बनाएं drawText(). कॉल करके टाइपफ़ेस की जानकारी दें setTypeface() अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है कॉल करके टेक्स्ट का रंग बदलें setColor().
  • इनका इस्तेमाल करके शुरुआती आकार बनाना drawRect(), drawOval(), और drawArc(). कॉल करके बदलें कि आकृतियां भरी हुई हैं, आउटलाइन की गई है या दोनों हैं setStyle().
  • जटिल आकार बनाने के लिए Path अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है क्लास. Path में लाइनें और कर्व जोड़कर आकार तय करें ऑब्जेक्ट है, तो इसका इस्तेमाल करके आकार बनाएं drawPath(). शुरुआती आकारों की तरह, पाथ को आउटलाइन किया जा सकता है, भरा जा सकता है या दोनों को setStyle() के आधार पर.
  • LinearGradient बनाकर, ग्रेडिएंट फ़िल तय करें ऑब्जेक्ट हैं. कॉल करें setShader() अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है भरी हुई आकृतियों पर अपने LinearGradient का इस्तेमाल करने के लिए.
  • बिटमैप बनाने के लिए इनका इस्तेमाल करें drawBitmap().

नीचे दिया गया कोड, टेक्स्ट, लाइन, और आकार का मिला-जुला रूप बनाता है:

Kotlin

private val data = mutableListOf<Item>() // A list of items that are displayed.

private var shadowBounds = RectF()       // Calculated in onSizeChanged.
private var pointerRadius: Float = 2f    // Obtained from styled attributes.
private var pointerX: Float = 0f         // Calculated in onSizeChanged.
private var pointerY: Float = 0f         // Calculated in onSizeChanged.
private var textX: Float = 0f            // Calculated in onSizeChanged.
private var textY: Float = 0f            // Calculated in onSizeChanged.
private var bounds = RectF()             // Calculated in onSizeChanged.
private var currentItem: Int = 0         // The index of the currently selected item.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    canvas.apply {
        // Draw the shadow.
        drawOval(shadowBounds, shadowPaint)

        // Draw the label text.
        drawText(data[currentItem].label, textX, textY, textPaint)

        // Draw the pie slices.
        data.forEach {item ->
            piePaint.shader = item.shader
            drawArc(
                bounds,
                360 - item.endAngle,
                item.endAngle - item.startAngle,
                true,
                piePaint
            )
        }

        // Draw the pointer.
        drawLine(textX, pointerY, pointerX, pointerY, textPaint)
        drawCircle(pointerX, pointerY, pointerRadius, textPaint)
    }
}

// Maintains the state for a data item.
private data class Item(
    var label: String,      
    var value: Float = 0f,

    @ColorInt
    var color: Int = 0,

    // Computed values.
    var startAngle: Float = 0f,
    var endAngle: Float = 0f,

    var shader: Shader
)

Java

private List<Item> data = new ArrayList<Item>();  // A list of items that are displayed.

private RectF shadowBounds;                       // Calculated in onSizeChanged.
private float pointerRadius;                      // Obtained from styled attributes.
private float pointerX;                           // Calculated in onSizeChanged.
private float pointerY;                           // Calculated in onSizeChanged.
private float textX;                              // Calculated in onSizeChanged.
private float textY;                              // Calculated in onSizeChanged.
private RectF bounds;                             // Calculated in onSizeChanged.
private int currentItem = 0;                      // The index of the currently selected item.

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // Draw the shadow.
    canvas.drawOval(
            shadowBounds,
            shadowPaint
    );

    // Draw the label text.
    canvas.drawText(data.get(currentItem).label, textX, textY, textPaint);

    // Draw the pie slices.
    for (int i = 0; i < data.size(); ++i) {
        Item it = data.get(i);
        piePaint.setShader(it.shader);
        canvas.drawArc(
                bounds,
                360 - it.endAngle,
                it.endAngle - it.startAngle,
                true, 
                piePaint
        );
    }

    // Draw the pointer.
    canvas.drawLine(textX, pointerY, pointerX, pointerY, textPaint);
    canvas.drawCircle(pointerX, pointerY, pointerRadius, textPaint);
}

// Maintains the state for a data item.
private class Item {
    public String label;
    public float value;
    @ColorInt
    public int color;

    // Computed values.
    public int startAngle;
    public int endAngle;

    public Shader shader;
}    

ग्राफ़िक इफ़ेक्ट लागू करना

Android 12 (एपीआई लेवल 31) ने RenderEffect अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है क्लास का इस्तेमाल करती है, जिसमें सामान्य ग्राफ़िक इफ़ेक्ट लागू होते हैं, जैसे कि धुंधला करना, कलर फ़िल्टर, Android शेडर इफ़ेक्ट वगैरह View ऑब्जेक्ट और हैरारकी को ध्यान में रखकर डिज़ाइन किया गया है. इफ़ेक्ट को चेन इफ़ेक्ट के तौर पर जोड़ा जा सकता है. इनमें ये शामिल हैं आंतरिक और बाहरी असर या ब्लेंड किए हुए असर दिखाने होते हैं. इस सुविधा के लिए सहायता डिवाइस की प्रोसेसिंग पावर पर निर्भर करता है.

आप वीडियो के नीचे दी गई चीज़ों पर भी इफ़ेक्ट लागू कर सकते हैं इसके लिए RenderNode कॉल करके View View.setRenderEffect(RenderEffect).

RenderEffect ऑब्जेक्ट को लागू करने के लिए, यह तरीका अपनाएं:

view.setRenderEffect(RenderEffect.createBlurEffect(radiusX, radiusY, SHADER_TILE_MODE))

प्रोग्राम के हिसाब से व्यू को बनाया जा सकता है या एक्सएमएल लेआउट से इनफ़्लेट किया जा सकता है और व्यू बाइंडिंग का इस्तेमाल करके उसे वापस लाना या findViewById().