ভেক্টর অঙ্কনযোগ্য ওভারভিউ

কম্পোজ পদ্ধতিটি চেষ্টা করুন

জেটপ্যাক কম্পোজ হলো অ্যান্ড্রয়েডের জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে কীভাবে গ্রাফিক্স প্রদর্শন করতে হয় তা জানুন।

ইমেজ ভেক্টর →

মূল বিষয়গুলো

• ভেক্টর ড্রয়েবল হলো একটি ভেক্টর গ্রাফিক যা একটি XML ফাইলে বিন্দু, রেখা এবং বক্ররেখার একটি সেট হিসেবে এর সংশ্লিষ্ট রঙের তথ্যসহ সংজ্ঞায়িত করা হয়।
• ভেক্টর ড্রয়েবলগুলো স্কেলেবল, অর্থাৎ প্রদর্শনের গুণমান নষ্ট না করেই এগুলোর আকার পরিবর্তন করা যায়। এই কারণে এগুলো অ্যান্ড্রয়েড অ্যাপে ব্যবহারের জন্য আদর্শ, কারণ এটি আপনার APK ফাইলের আকার কমাতে এবং পারফরম্যান্স উন্নত করতে সাহায্য করে।
• আপনার প্রোজেক্টের ড্রয়েবল ফোল্ডারে রাইট-ক্লিক করে এবং New > Vector Asset নির্বাচন করার মাধ্যমে আপনি অ্যান্ড্রয়েড স্টুডিওতে ভেক্টর ড্রয়েবল তৈরি করতে পারেন। এছাড়াও, আপনি SVG ফাইলগুলোকে ভেক্টর ড্রয়েবল হিসেবে অ্যান্ড্রয়েড স্টুডিওতে ইম্পোর্ট করতে পারেন।

ভূমিকা

এই পৃষ্ঠা এবং নিচের ভিডিওতে XML-এ কীভাবে ভেক্টর ড্রয়েবল তৈরি করতে হয় তার একটি সংক্ষিপ্ত বিবরণ দেওয়া হয়েছে। অ্যান্ড্রয়েড স্টুডিও SVG ফাইলগুলিকেও ভেক্টর ড্রয়েবল ফরম্যাটে রূপান্তর করতে পারে, যেমনটি 'Add multi-density vector graphics' ব্যবহার অংশে বর্ণনা করা হয়েছে।

অ্যান্ড্রয়েড ৫.০ (এপিআই লেভেল ২১) ছিল প্রথম সংস্করণ যা VectorDrawable এবং AnimatedVectorDrawable এর মাধ্যমে ভেক্টর ড্রয়েবলকে আনুষ্ঠানিকভাবে সমর্থন করে, কিন্তু আপনি অ্যান্ড্রয়েড সাপোর্ট লাইব্রেরির সাহায্যে পুরোনো সংস্করণগুলোকেও সমর্থন করতে পারেন, যা VectorDrawableCompat এবং AnimatedVectorDrawableCompat ক্লাসগুলো সরবরাহ করে।

VectorDrawable ক্লাস সম্পর্কে

VectorDrawable একটি স্ট্যাটিক ড্রয়েবল অবজেক্টকে সংজ্ঞায়িত করে। SVG ফরম্যাটের মতোই, প্রতিটি ভেক্টর গ্রাফিককে একটি ট্রি হায়ারার্কি হিসেবে সংজ্ঞায়িত করা হয়, যা path এবং group অবজেক্ট দ্বারা গঠিত। প্রতিটি path অবজেক্টটির আউটলাইনের জ্যামিতি থাকে এবং group রূপান্তরের জন্য বিস্তারিত তথ্য থাকে। XML ফাইলে পাথগুলো যে ক্রমে থাকে, ঠিক সেই ক্রমেই অঙ্কিত হয়।

চিত্র ১. একটি ভেক্টর ড্রয়েবল অ্যাসেটের নমুনা স্তরবিন্যাস।

ভেক্টর অ্যাসেট স্টুডিও টুলটি একটি XML ফাইল হিসেবে প্রজেক্টে ভেক্টর গ্রাফিক যোগ করার একটি সহজ উপায় প্রদান করে।

উদাহরণ XML

এখানে একটি নমুনা VectorDrawable XML ফাইল দেওয়া হলো, যা চার্জিং মোডে থাকা একটি ব্যাটারির ছবি রেন্ডার করে।

<!-- 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>

এই XML-টি নিম্নলিখিত ছবিটি রেন্ডার করে:

AnimatedVectorDrawable ক্লাস সম্পর্কে

AnimatedVectorDrawable একটি ভেক্টর গ্রাফিকের প্রোপার্টিগুলোতে অ্যানিমেশন যোগ করে। আপনি একটি অ্যানিমেটেড ভেক্টর গ্রাফিককে তিনটি আলাদা রিসোর্স ফাইল হিসেবে অথবা সম্পূর্ণ ড্রয়েবলটি সংজ্ঞায়িত করে এমন একটিমাত্র XML ফাইল হিসেবে সংজ্ঞায়িত করতে পারেন। ভালোভাবে বোঝার জন্য চলুন দুটি পদ্ধতিই দেখে নেওয়া যাক: একাধিক XML ফাইল এবং একটিমাত্র XML ফাইল ।

একাধিক XML ফাইল

এই পদ্ধতি ব্যবহার করে, আপনি তিনটি পৃথক XML ফাইল সংজ্ঞায়িত করতে পারেন:

• একটি VectorDrawable XML ফাইল।
• একটি AnimatedVectorDrawable XML ফাইল যা টার্গেট VectorDrawable , অ্যানিমেট করার জন্য টার্গেট পাথ ও গ্রুপসমূহ, প্রোপার্টিসমূহ এবং ObjectAnimator অবজেক্ট বা AnimatorSet অবজেক্ট হিসেবে সংজ্ঞায়িত অ্যানিমেশনসমূহকে নির্ধারণ করে।
• একটি অ্যানিমেটর এক্সএমএল ফাইল।

একাধিক XML ফাইলের উদাহরণ

নিম্নলিখিত XML ফাইলগুলো একটি ভেক্টর গ্রাফিকের অ্যানিমেশন প্রদর্শন করে।

• VectorDrawable-এর XML ফাইল: 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>

• AnimatedVectorDrawable-এর XML ফাইল: 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>

• AnimatedVectorDrawable-এর XML ফাইলে ব্যবহৃত অ্যানিমেটর 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>

একক XML ফাইল

এই পদ্ধতি ব্যবহার করে, আপনি এক্সএমএল বান্ডেল ফরম্যাটের মাধ্যমে সম্পর্কিত এক্সএমএল ফাইলগুলোকে একটি একক এক্সএমএল ফাইলে একত্রিত করতে পারেন। অ্যাপটি বিল্ড করার সময়, aapt ট্যাগটি আলাদা রিসোর্স তৈরি করে এবং অ্যানিমেটেড ভেক্টরে সেগুলোকে রেফারেন্স করে। এই পদ্ধতির জন্য বিল্ড টুলস ২৪ বা তার উচ্চতর সংস্করণ প্রয়োজন, এবং এর আউটপুট পূর্ববর্তী সংস্করণগুলোর সাথে সামঞ্জস্যপূর্ণ।

একটি একক XML ফাইলের উদাহরণ

<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>

ভেক্টর ড্রয়েবলের পশ্চাৎ সামঞ্জস্য সমাধান

অ্যান্ড্রয়েড ৫.০ (এপিআই লেভেল ২১)-এর চেয়ে নিম্ন প্ল্যাটফর্ম সংস্করণে চালিত ডিভাইসগুলিতে ভেক্টর ড্রয়েবল এবং অ্যানিমেটেড ভেক্টর ড্রয়েবল সমর্থন করতে, অথবা অ্যান্ড্রয়েড ৭.০ (এপিআই লেভেল ২৪)-এর নিচের সংস্করণে fillColor , fillType এবং strokeColor কার্যকারিতা ব্যবহার করতে, যথাক্রমে support-vector-drawable এবং animated-vector-drawable দুটি সাপোর্ট লাইব্রেরির মাধ্যমে VectorDrawableCompat এবং AnimatedVectorDrawableCompat উপলব্ধ রয়েছে।

অ্যান্ড্রয়েড স্টুডিও ১.৪ বিল্ড টাইমে পিএনজি (PNG) ফাইল তৈরি করার মাধ্যমে ভেক্টর ড্রয়েবলের জন্য সীমিত কম্প্যাটিবিলিটি সাপোর্ট চালু করেছিল। তবে, ভেক্টর ড্রয়েবল এবং অ্যানিমেটেড ভেক্টর ড্রয়েবল সাপোর্ট লাইব্রেরিগুলো ফ্লেক্সিবিলিটি এবং ব্যাপক কম্প্যাটিবিলিটি উভয়ই প্রদান করে — এটি একটি সাপোর্ট লাইব্রেরি, তাই আপনি অ্যান্ড্রয়েড ২.১ (এপিআই লেভেল ৭+) পর্যন্ত সমস্ত অ্যান্ড্রয়েড প্ল্যাটফর্ম সংস্করণের সাথে এটি ব্যবহার করতে পারেন। আপনার অ্যাপকে ভেক্টর সাপোর্ট লাইব্রেরি ব্যবহার করার জন্য কনফিগার করতে, অ্যাপ মডিউলের build.gradle ফাইলে vectorDrawables এলিমেন্টটি যোগ করুন।

vectorDrawables এলিমেন্টটি কনফিগার করতে নিম্নলিখিত কোড স্নিপেটটি ব্যবহার করুন:

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

// 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"
    }
}

// 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")
    }
}

আপনি Android 4.0 (API লেভেল 14) এবং তার উপরের সংস্করণে চালিত সমস্ত ডিভাইসে VectorDrawableCompat এবং AnimatedVectorDrawableCompat ব্যবহার করতে পারেন। Android যেভাবে ড্রয়েবল লোড করে, তাতে XML ফাইলের মতো ড্রয়েবল আইডি গ্রহণকারী সব জায়গা ভেক্টর ড্রয়েবল লোড করা সমর্থন করে না। android.support.v7.appcompat প্যাকেজটি ভেক্টর ড্রয়েবল ব্যবহার সহজ করার জন্য বেশ কিছু বৈশিষ্ট্য যুক্ত করেছে। প্রথমত, যখন আপনি ImageView বা ImageButton এবং FloatingActionButton এর মতো সাবক্লাসের সাথে android.support.v7.appcompat প্যাকেজ ব্যবহার করেন, তখন আপনি নতুন app:srcCompat অ্যাট্রিবিউটটি ব্যবহার করে ভেক্টর ড্রয়েবল এবং android:src তে উপলব্ধ অন্য যেকোনো ড্রয়েবলকে রেফারেন্স করতে পারেন।

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

রানটাইমে ড্রয়েবল পরিবর্তন করতে, আপনি আগের মতোই setImageResource() মেথডটি ব্যবহার করতে পারেন। আপনার অ্যাপে ভেক্টর ড্রয়েবল যুক্ত করার সবচেয়ে নির্ভরযোগ্য পদ্ধতি হলো AppCompat এবং app:srcCompat ব্যবহার করা।

সাপোর্ট লাইব্রেরি ২৫.৪.০ এবং এর পরবর্তী সংস্করণ নিম্নলিখিত বৈশিষ্ট্যগুলো সমর্থন করে:

• পাথ মর্ফিং (পাথটাইপ ইভ্যালুয়েটর) একটি পাথকে অন্য একটি পাথে রূপান্তর করতে ব্যবহৃত হয়।
• পাথ ইন্টারপোলেশন ব্যবহার করা হয় লিনিয়ার ইন্টারপোলেটরের মতো সিস্টেম-সংজ্ঞায়িত ইন্টারপোলেটরগুলোর পরিবর্তে একটি নমনীয় ইন্টারপোলেটর (যা একটি পাথ হিসাবে উপস্থাপিত হয়) সংজ্ঞায়িত করার জন্য।

সাপোর্ট লাইব্রেরি 26.0.0-beta1 এবং এর পরবর্তী সংস্করণ নিম্নলিখিত বৈশিষ্ট্যগুলো সমর্থন করে:

• পথ বরাবর চলাচল: জ্যামিতিক বস্তুটি একটি অ্যানিমেশনের অংশ হিসেবে যেকোনো পথ ধরে চলাচল করতে পারে।

সাপোর্ট লাইব্রেরি ব্যবহার করে একাধিক XML ফাইলের উদাহরণ

নিম্নলিখিত XML ফাইলগুলি একটি ভেক্টর গ্রাফিককে অ্যানিমেট করার জন্য একাধিক XML ফাইল ব্যবহারের পদ্ধতি প্রদর্শন করে।

• VectorDrawable-এর XML ফাইল: 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>

• AnimatedVectorDrawable-এর XML ফাইল: 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>

• AnimatedVectorDrawable-এর XML ফাইলে ব্যবহৃত অ্যানিমেটর XML ফাইল: rotation.xml
• <objectAnimator
     android:duration="6000"
     android:propertyName="rotation"
     android:valueFrom="0"
     android:valueTo="360" />

একক XML ফাইল

নিম্নলিখিত XML ফাইলটি একটি ভেক্টর গ্রাফিককে অ্যানিমেট করার জন্য একটিমাত্র XML ফাইল ব্যবহারের পদ্ধতি প্রদর্শন করে। অ্যাপটি বিল্ড করার সময়, aapt ট্যাগটি আলাদা রিসোর্স তৈরি করে এবং অ্যানিমেটেড ভেক্টরে সেগুলোকে রেফারেন্স করে। এই পদ্ধতির জন্য Build Tools 24 বা তার উচ্চতর সংস্করণ প্রয়োজন, এবং এর আউটপুট পূর্ববর্তী সংস্করণগুলোর সাথে সামঞ্জস্যপূর্ণ।

সাপোর্ট লাইব্রেরি ব্যবহার করে একটি একক XML ফাইলের উদাহরণ

<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>