वेक्टर ड्रॉएबल की खास जानकारी

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

प्रमुख बिंदु

  • ड्रॉ करने लायक वेक्टर, एक ऐसा वेक्टर ग्राफ़िक होता है जिसे एक्सएमएल फ़ाइल में पॉइंट, लाइनों, और कर्व के साथ रंग की जानकारी भी दिखाता है.
  • ड्रॉ करने वाले वेक्टर का साइज़ बढ़ाया जा सकता है. इसका मतलब है कि डिसप्ले क्वालिटी खोए बिना उनका साइज़ बदला जा सकता है. इससे उन्हें Android ऐप्लिकेशन में इस्तेमाल करने के लिए बेहतरीन बनाया जाता है, क्योंकि इससे आपके डिवाइस की स्क्रीन का साइज़ कम करने में APK फ़ाइलों को डाउनलोड करने और उनकी परफ़ॉर्मेंस को बेहतर बनाने के लिए किया जा सकता है.
  • Android Studio में ड्रॉ करने लायक फ़ोल्डर पर राइट क्लिक करके, वेक्टर ड्रॉ करने की सुविधा बनाई जा सकती है और नया > चुनकर वेक्टर ऐसेट. SVG फ़ाइलों को यहां भी इंपोर्ट किया जा सकता है वेक्टर ड्रॉएबल के तौर पर Android Studio.
Google Bard ने 24 जुलाई, 2023 को यह खास जानकारी जनरेट की थी

परिचय

VectorDrawable एक वेक्टर ग्राफ़िक है किसी एक्सएमएल फ़ाइल में पाइंट, लाइनों, और कर्व के सेट के रूप में रंग की जानकारी. ड्रॉ करने लायक वेक्टर इस्तेमाल करने का सबसे बड़ा फ़ायदा इमेज है बढ़ाए जा सकने की क्षमता. इसे डिसप्ले क्वालिटी खोए बिना स्केल किया जा सकता है, जिसका मतलब है कि इमेज क्वालिटी खोए बिना अलग-अलग स्क्रीन डेंसिटी के लिए एक ही फ़ाइल का साइज़ बदला जाता है. इससे APK फ़ाइलें छोटी हो जाती हैं और डेवलपर का रखरखाव कम हो जाता है. आप यह भी कर सकते हैं ऐनिमेशन के लिए एक से ज़्यादा एक्सएमएल फ़ाइलों के बजाय, कई एक्सएमएल फ़ाइलों को इस्तेमाल करके वेक्टर इमेज का इस्तेमाल करना हर डिसप्ले रिज़ॉल्यूशन के लिए इमेज.

इस पेज और नीचे दिए गए वीडियो में, एक्सएमएल में वेक्टर ड्रॉबल बनाने के तरीके की खास जानकारी दी गई है. Android Studio, SVG फ़ाइलों को वेक्टर ड्रॉ किए जा सकने वाले फ़ॉर्मैट में भी बदल सकता है, जैसा कि यहां बताया गया है मल्टी-डेंसिटी वेक्टर ग्राफ़िक जोड़ें का इस्तेमाल करके.

Android 5.0 (एपीआई लेवल 21) पहला वर्शन था, जिसमें वेक्टर ड्रॉ करने की सुविधा के साथ आधिकारिक तौर पर काम किया जा सकता था VectorDrawable अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है और AnimatedVectorDrawable, लेकिन Android की सहायता लाइब्रेरी की मदद से, पुराने वर्शन पर भी काम किया जा सकता है. इससे आपको VectorDrawableCompat और AnimatedVectorDrawableCompat क्लास.

वेक्टरड्रॉएबल क्लास के बारे में जानकारी

VectorDrawable एक स्टैटिक ड्रॉबल के बारे में बताता है ऑब्जेक्ट है. SVG फ़ॉर्मैट की तरह ही, हर वेक्टर ग्राफ़िक को एक ट्री के तौर पर दिखाया जाता है हैरारकी के हिसाब से, जो path और group ऑब्जेक्ट से मिलकर बना होता है. हर path में ऑब्जेक्ट के आउटलाइन की ज्यामिति होती है और group में बदलाव की जानकारी शामिल है. सभी पाथ बनाए गए हैं उसी क्रम में होना चाहिए जिसमें वे एक्सएमएल फ़ाइल में दिखते हैं.

पहला डायग्राम. ड्रॉ करने लायक वेक्टर ऐसेट की सैंपल हैरारकी

वेक्टर ऐसेट Studio टूल की मदद से, प्रोजेक्ट में वेक्टर ग्राफ़िक आसानी से जोड़ा जा सकता है .

एक्सएमएल का उदाहरण

यहां VectorDrawable एक्सएमएल फ़ाइल का एक सैंपल दिया गया है, जो किसी इमेज को रेंडर करता है बैटरी का स्तर कुछ कम हो गया है. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

यह एक्सएमएल इस इमेज को रेंडर करता है:

एनिमेट की गई वेक्टरड्रॉएबल क्लास के बारे में जानकारी

AnimatedVectorDrawable किसी वेक्टर की प्रॉपर्टी में ऐनिमेशन जोड़ता है ग्राफ़िक. ऐनिमेशन वाले वेक्टर ग्राफ़िक को तीन अलग-अलग वेक्टर के तौर पर परिभाषित किया जा सकता है या एक एक्सएमएल फ़ाइल के तौर पर, जो ड्रॉ करने लायक पूरी प्रोसेस के बारे में बताती हो. आइए बेहतर ढंग से समझने के लिए दोनों तरीकों पर गौर करें: कई एक्सएमएल फ़ाइलें और सिंगल एक्सएमएल फ़ाइल.

एक से ज़्यादा एक्सएमएल फ़ाइलें

इस तरीके का इस्तेमाल करके, तीन अलग-अलग एक्सएमएल फ़ाइलों को तय किया जा सकता है:

  • VectorDrawable एक्सएमएल फ़ाइल.
  • एक AnimatedVectorDrawable एक्सएमएल फ़ाइल जो टारगेट VectorDrawable का पता लगाता है, ऐनिमेट करने के लिए पाथ और ग्रुप, प्रॉपर्टी, और तय किए गए ऐनिमेशन को टारगेट करना ObjectAnimator ऑब्जेक्ट या AnimatorSet ऑब्जेक्ट.
  • ऐनिमेटर एक्सएमएल फ़ाइल.

एक से ज़्यादा एक्सएमएल फ़ाइलों का उदाहरण

नीचे दी गई एक्सएमएल फ़ाइलें, वेक्टर ग्राफ़िक का ऐनिमेशन दिखाती हैं.

  • वेक्टरड्रॉएबल की एक्सएमएल फ़ाइल: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • एनिमेटेड वेक्टरड्रॉएबल की एक्सएमएल फ़ाइल: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • Animator XML फ़ाइलें, जो परिसर के अंदर होती हैं. ये, फ़ाइल: rotation.xml और path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

सिंगल एक्सएमएल फ़ाइल

इस तरीके का इस्तेमाल करके, मिलती-जुलती एक्सएमएल फ़ाइलों को एक साथ मर्ज किया जा सकता है एक्सएमएल बंडल फ़ॉर्मैट के ज़रिए एक्सएमएल फ़ाइल. ऐप्लिकेशन बनाते समय, aapt टैग अलग-अलग संसाधन बनाता है और उनका रेफ़रंस यहां देता है: वेक्टर का ऐनिमेशन. इस तरीके के लिए बिल्ड टूल 24 या उसके बाद वाले वर्शन की ज़रूरत होगी और आउटपुट पुराने सिस्टम के साथ काम करता है.

एक एक्सएमएल फ़ाइल का उदाहरण 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

वेक्टर ड्रॉएबल बैकवर्ड के साथ काम करने से जुड़ा समाधान

प्लैटफ़ॉर्म वर्शन के पुराने वर्शन वाले डिवाइसों पर ड्रॉ करने लायक और ऐनिमेट किए गए वेक्टर में वेक्टर इस्तेमाल करने की सुविधा होती है को Android 5.0 (एपीआई लेवल 21) से शुरू नहीं करना है या fillColor, fillType, और Android 7.0 (एपीआई लेवल 24) से पहले के वर्शन की strokeColor सुविधाएं, VectorDrawableCompat और AnimatedVectorDrawableCompat दो सहायता लाइब्रेरी के ज़रिए उपलब्ध होती हैं: support-vector-drawable और animated-vector-drawable, क्रम से.

Android Studio 1.4 में, वेक्टर के साथ काम करने की सीमित सुविधाएं उपलब्ध हैं ड्रॉबल सुविधा जोड़ी जा सकती है. इसके लिए, बिल्ड टाइम पर PNG फ़ाइलें जनरेट की जा सकती हैं. हालांकि, ड्रॉ करने लायक वेक्टर और ऐनिमेट किए गए वेक्टर, ड्रॉ करने लायक सपोर्ट लाइब्रेरी में कई तरह की सुविधाएं मिलती हैं. साथ ही, व्यापक संगतता — यह एक समर्थन लाइब्रेरी है, इसलिए आप इसका उपयोग सभी Android प्लैटफ़ॉर्म के वर्शन, Android 2.1 (एपीआई लेवल 7 या इसके बाद के वर्शन) पर वापस चले गए हैं. अपने वेक्टर सपोर्ट लाइब्रेरी का इस्तेमाल करने के लिए ऐप्लिकेशन, vectorDrawables जोड़ें ऐप्लिकेशन मॉड्यूल में आपकी build.gradle फ़ाइल का एलिमेंट.

vectorDrawables को कॉन्फ़िगर करने के लिए, यहां दिए गए कोड स्निपेट का इस्तेमाल करें एलिमेंट:

ग्रूवी

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

ग्रूवी

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

VectorDrawableCompat का इस्तेमाल किया जा सकता है और सभी AnimatedVectorDrawableCompat Android 4.0 (एपीआई लेवल 14) और उसके बाद के वर्शन वाले डिवाइसों पर. Android का ड्रॉएबल लोड करता है, लेकिन हर वह जगह नहीं है जहां ड्रॉएबल आईडी स्वीकार किया जाता है, जैसे कि एक्सएमएल में फ़ाइल है, जो वेक्टर ड्रॉबल लोड करने का समर्थन करती है. कॉन्टेंट बनाने android.support.v7.appcompat पैकेज में एक नंबर जोड़ा गया है वेक्टर ड्रॉबल का इस्तेमाल करना आसान बनाने के लिए सुविधाएं. सबसे पहले, जब आपको android.support.v7.appcompat पैकेज: ImageView या सब-क्लास का इस्तेमाल करें, जैसे कि ImageButton और FloatingActionButton, आपके पास ये विकल्प हैं वेक्टर ड्रॉएबल का रेफ़रंस देने के लिए, नई app:srcCompat एट्रिब्यूट का इस्तेमाल करें और android:src के लिए उपलब्ध किसी अन्य ड्रॉ के लिए भी: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

रनटाइम पर ड्रॉ किए जा सकने वाले आइटम बदलने के लिए, setImageResource() अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है दिया गया है. AppCompat का इस्तेमाल किया जा रहा है और app:srcCompat, इंटिग्रेट करने का सबसे आसान तरीका है वेक्टर को आपके ऐप्लिकेशन में ड्रॉ किया जा सकता है.

लाइब्रेरी 25.4.0 और इसके बाद के वर्शन में ये सुविधाएं काम करती हैं:

  • पाथ मॉर्फ़िंग (पाथ टाइप इवैलुएटर) का इस्तेमाल मॉर्फ़ करने के लिए किया जाता है एक पाथ से दूसरे पाथ में ले जाता है.
  • पाथ इंटरपोलेशन का इस्तेमाल सुविधाजनक सिस्टम से तय किए गए के बजाय इंटरपोलेटर (पाथ के तौर पर दिखाया जाता है) इंटरपोलेटर, जैसे कि लीनियर इंटरपोलेटर.

लाइब्रेरी 26.0.0-beta1 और इसके बाद के वर्शन में ये सुविधाएं काम करती हैं:

  • पाथ के साथ-साथ आगे बढ़ें ज्यामिति ऑब्जेक्ट आस-पास हो सकता है, ऐनिमेशन के हिस्से के तौर पर, आर्बिट्रेरी पाथ पर.

सहायता लाइब्रेरी का इस्तेमाल करने वाली कई एक्सएमएल फ़ाइलों का उदाहरण

यहां दी गई एक्सएमएल फ़ाइलें, एक से ज़्यादा एक्सएमएल फ़ाइलों के इस्तेमाल का तरीका बताती हैं का इस्तेमाल वेक्टर ग्राफ़िक को ऐनिमेट करने के लिए किया जाता है.

  • वेक्टरड्रॉएबल की एक्सएमएल फ़ाइल: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • एनिमेटेड वेक्टरड्रॉएबल की एक्सएमएल फ़ाइल: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • Animator की एक्सएमएल फ़ाइल, जिसका इस्तेमाल ऐनिमेटेडवेक्टरड्रॉएबल के एक्सएमएल में किया गया हो फ़ाइल: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

सिंगल एक्सएमएल फ़ाइल

यहां दी गई एक्सएमएल फ़ाइल, सिंगल एक्सएमएल फ़ाइल को इस्तेमाल करने का तरीका बताती है का इस्तेमाल वेक्टर ग्राफ़िक को ऐनिमेट करने के लिए किया जाता है. ऐप्लिकेशन बनाते समय, aapt टैग अलग-अलग संसाधन बनाता है और उनका रेफ़रंस यहां देता है: वेक्टर का ऐनिमेशन. इस तरीके के लिए बिल्ड टूल 24 या उसके बाद वाले वर्शन की ज़रूरत होगी और आउटपुट पुराने सिस्टम के साथ काम करता है.

सहायता लाइब्रेरी का इस्तेमाल करने वाली एक एक्सएमएल फ़ाइल का उदाहरण 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>