Android
वेक्टरड्राइव और एनिमेटेडवेक्टरड्राएबल

बेसिक वेक्टरड्राएबल

एक VectorDrawable में कम से कम एक <path> टैग होना चाहिए जिसमें आकृति को परिभाषित किया गया हो

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,24 l12,-24 l12,24 z"/>
</vector>

यह एक काले त्रिकोण का उत्पादन करेगा:

का उपयोग करते हुए

एक <clip-path> एक आकृति को परिभाषित करता है जो एक खिड़की के रूप में कार्य करता है, केवल एक <path> के कुछ हिस्सों को दिखाने की अनुमति देता है कि क्या वे <clip-path> आकार के भीतर हैं और बाकी को काट रहे हैं।

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <clip-path
        android:name="square clip path"
        android:pathData="M6,6 h12 v12 h-12 z"/>
    <path
        android:name="triangle"
        android:fillColor="#FF000000"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

इस स्थिति में <path> एक काले त्रिकोण का निर्माण करता है, लेकिन <clip-path> एक छोटे वर्ग आकार को परिभाषित करता है, जो केवल त्रिकोण के हिस्से को दिखाने की अनुमति देता है:

टैग

एक <group> टैग स्केलिंग, रोटेशन, और एक में से एक या अधिक तत्वों की स्थिति की अनुमति देता है VectorDrawable समायोजित करने की:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
    <path
        android:pathData="M0,0 h4 v4 h-4 z"
        android:fillColor="#FF000000"/>

    <group
        android:name="middle square group"
        android:translateX="10"
        android:translateY="10"
        android:rotation="45">
        <path
            android:pathData="M0,0 h4 v4 h-4 z"
            android:fillColor="#FF000000"/>
    </group>

    <group
        android:name="last square group"
        android:translateX="18"
        android:translateY="18"
        android:scaleX="1.5">
        <path
            android:pathData="M0,0 h4 v4 h-4 z"
            android:fillColor="#FF000000"/>
    </group>
</vector>

ऊपर दिए गए उदाहरण कोड में तीन समान <path> टैग हैं, जो सभी काले वर्गों का वर्णन करते हैं। पहला वर्ग अन्यायपूर्ण है। दूसरा वर्ग एक <group> टैग में लपेटा जाता है जो इसे स्थानांतरित करता है और इसे 45 ° से घुमाता है। तीसरे वर्ग को एक <group> टैग में लपेटा गया है जो इसे स्थानांतरित करता है और इसे क्षैतिज रूप से 50% तक खींचता है। परिणाम इस प्रकार है:

एक <group> टैग में कई <path> और <clip-path> टैग हो सकते हैं। इसमें एक और <group> भी हो सकता है।

बेसिक एनिमेटिडवेक्टरड्राएबल

एक AnimatedVectorDrawable को कम से कम 3 घटकों की आवश्यकता होती है:

• एक VectorDrawable जो हेरफेर किया जाएगा
• एक objectAnimator जो परिभाषित करता है कि किस संपत्ति को बदलना है और कैसे
• AnimatedVectorDrawable ही जो जोड़ता है objectAnimator को VectorDrawable एनिमेशन बनाने के लिए

निम्नलिखित एक त्रिकोण बनाता है जो अपने रंग को काले से लाल रंग में परिवर्तित करता है।

VectorDrawable , फ़ाइल का नाम: triangle_vector_drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:name="triangle"
        android:fillColor="@android:color/black"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

objectAnimator , फ़ाइल नाम: color_change_animator.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="fillColor"
    android:duration="2000"
    android:repeatCount="infinite"
    android:valueFrom="@android:color/black"
    android:valueTo="@android:color/holo_red_light"/>

AnimatedVectorDrawable , फ़ाइल का नाम: triangle_animated_vector.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/triangle_vector_drawable">

    <target
        android:animation="@animator/color_change_animator"
        android:name="triangle"/>

</animated-vector>

ध्यान दें कि <target> निर्दिष्ट android:name="triangle" जो मेल खाता है <path> में VectorDrawable । एक VectorDrawable में कई तत्व शामिल हो सकते हैं और android:name संपत्ति का उपयोग यह परिभाषित करने के लिए किया जाता है कि किस तत्व को लक्षित किया जा रहा है।

परिणाम:

स्ट्रोक का उपयोग करना

एसवीजी स्ट्रोक का उपयोग करना सामग्री डिजाइन दिशानिर्देशों के अनुसार एकीकृत स्ट्रोक लंबाई के साथ वेक्टर ड्रॉबल बनाना आसान बनाता है:

समग्र प्रणाली आइकन परिवार को एकीकृत करने के लिए लगातार स्ट्रोक भार महत्वपूर्ण हैं। सभी स्ट्रोक इंस्टेंसेस के लिए 2dp चौड़ाई बनाए रखें, जिसमें कर्व्स, एंगल्स और आंतरिक और बाहरी दोनों स्ट्रोक शामिल हैं।

इसलिए, उदाहरण के लिए, यह है कि आप स्ट्रोक का उपयोग करके "प्लस" चिह्न कैसे बनाएंगे:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:strokeColor="#F000"
        android:strokeWidth="2"
        android:pathData="M12,0 V24 M0,12 H24" />
</vector>

• strokeColor स्ट्रोक के रंग को परिभाषित करता है।

• strokeWidth स्ट्रोक की चौड़ाई (dp में) को परिभाषित करता है (इस मामले में 2dp, जैसा कि दिशा-निर्देशों द्वारा सुझाया गया है)।

• pathData वह जगह है जहाँ हम अपनी SVG छवि का वर्णन करते हैं:

• M12,0 "कर्सर" को 12,0 की स्थिति में ले जाता है

• V24 12, 24 की स्थिति के लिए एक ऊर्ध्वाधर रेखा बनाता है

आदि, एसवीजी प्रलेखन और विशिष्ट पथ कमांडों के बारे में अधिक जानने के लिए w3schools से यह उपयोगी "एसवीजी पथ" ट्यूटोरियल देखें ।

परिणामस्वरूप, हमें यह नो-फ्रिल्स प्लस साइन मिला:

यह विशेष रूप से एक AnimatedVectorDrawable बनाने योग्य के लिए उपयोगी है , क्योंकि आप अब एक जटिल लंबाई के बजाय एक एकीकृत लंबाई के साथ एक ही स्ट्रोक के साथ काम कर रहे हैं।

AppCompat के माध्यम से वेक्टर संगतता

वैक्टर के लिए build.gradle में कुछ पूर्व-आवश्यकताएं build.gradle लिए एपीआई 7 और एनिमेटेडवेक्टरड्रैबल्स के लिए एपीआई 13 के लिए सभी तरह से काम करने के लिए नीचे दी गई हैं (वर्तमान में कुछ कैविट्स के साथ):

//Build Tools has to be 24+
buildToolsVersion '24.0.0'

defaultConfig {
    vectorDrawables.useSupportLibrary = true
    generatedDensities = []
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:24.1.1'
}

अपने layout.xml :

<ImageView
    android:id="@+id/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    appCompat:src="@drawable/vector_drawable"
    android:contentDescription="@null" />