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

রচনা পদ্ধতি চেষ্টা করুন
জেটপ্যাক কম্পোজ হল Android এর জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে গ্রাফিক্স কিভাবে প্রদর্শন করতে হয় তা শিখুন।
ইমেজভেক্টর →

মূল পয়েন্ট

  • একটি ভেক্টর ড্রয়েবল হল একটি ভেক্টর গ্রাফিক যা একটি XML ফাইলে বিন্দু, রেখা এবং বক্ররেখার সাথে সম্পর্কিত রঙের তথ্যের সেট হিসাবে সংজ্ঞায়িত করা হয়।
  • ভেক্টর ড্রয়েবলগুলি স্কেলযোগ্য, যার অর্থ প্রদর্শনের গুণমান নষ্ট না করেই তাদের আকার পরিবর্তন করা যেতে পারে। এটি এগুলিকে অ্যান্ড্রয়েড অ্যাপে ব্যবহারের জন্য আদর্শ করে তোলে, কারণ এটি আপনার APK ফাইলের আকার কমাতে এবং কর্মক্ষমতা উন্নত করতে সাহায্য করতে পারে৷
  • আপনি আপনার প্রোজেক্টে আঁকাযোগ্য ফোল্ডারে ডান ক্লিক করে এবং নতুন > ভেক্টর সম্পদ নির্বাচন করে অ্যান্ড্রয়েড স্টুডিওতে ভেক্টর অঙ্কনযোগ্য তৈরি করতে পারেন। আপনি ভেক্টর অঙ্কনযোগ্য হিসাবে Android স্টুডিওতে SVG ফাইলগুলি আমদানি করতে পারেন।
24 জুলাই, 2023-এ Google Bard দ্বারা তৈরি সারাংশ

ভূমিকা

একটি VectorDrawable হল একটি ভেক্টর গ্রাফিক যা একটি XML ফাইলে বিন্দু, রেখা এবং বক্ররেখার সাথে সম্পর্কিত রঙের তথ্যের সেট হিসাবে সংজ্ঞায়িত করা হয়। একটি ভেক্টর অঙ্কনযোগ্য ব্যবহার করার প্রধান সুবিধা হল চিত্র মাপযোগ্যতা। এটি প্রদর্শনের গুণমান নষ্ট না করেই স্কেল করা যেতে পারে, যার মানে একই ফাইলটি চিত্রের গুণমান নষ্ট না করে বিভিন্ন স্ক্রীনের ঘনত্বের জন্য পুনরায় আকার দেওয়া হয়েছে। এর ফলে ছোট APK ফাইল এবং কম ডেভেলপার রক্ষণাবেক্ষণ হয়। আপনি প্রতিটি প্রদর্শন রেজোলিউশনের জন্য একাধিক চিত্রের পরিবর্তে একাধিক XML ফাইল ব্যবহার করে অ্যানিমেশনের জন্য ভেক্টর চিত্রগুলিও ব্যবহার করতে পারেন।

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

Android 5.0 (API লেভেল 21) হল প্রথম সংস্করণ যা আনুষ্ঠানিকভাবে ভেক্টর VectorDrawable এবং AnimatedVectorDrawable সাথে সমর্থন করে, তবে আপনি Android সমর্থন লাইব্রেরির সাথে পুরানো সংস্করণগুলিকে সমর্থন করতে পারেন, যা VectorDrawableCompat এবং AnimatedVectorDrawableCompat ক্লাসগুলি প্রদান করে৷

ভেক্টর ড্রয়েবল ক্লাস সম্পর্কে

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

চিত্র 1. একটি ভেক্টর অঙ্কনযোগ্য সম্পদের নমুনা অনুক্রম

ভেক্টর সম্পদ স্টুডিও টুল একটি 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 ফাইলের উদাহরণ

নিম্নলিখিত 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>
  • অ্যানিমেটর এক্সএমএল ফাইলগুলি যেগুলি অ্যানিমেটেডভেক্টর ড্রয়েবলের এক্সএমএল ফাইলে ব্যবহৃত হয়: 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 ফাইল

এই পদ্ধতিটি ব্যবহার করে, আপনি XML বান্ডেল বিন্যাসের মাধ্যমে সম্পর্কিত XML ফাইলগুলিকে একটি একক XML ফাইলে মার্জ করতে পারেন। অ্যাপটি তৈরি করার সময়, aapt ট্যাগ পৃথক সংস্থান তৈরি করে এবং অ্যানিমেটেড ভেক্টরে তাদের উল্লেখ করে। এই পদ্ধতির জন্য বিল্ড টুলস 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
            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 (API স্তর 21) এর চেয়ে কম প্ল্যাটফর্ম সংস্করণে চলমান ডিভাইসগুলিতে ভেক্টর ড্রয়েবল এবং অ্যানিমেটেড ভেক্টর ড্রয়েবল সমর্থন করতে, অথবা Android 7.0 (API স্তর 24) এর নীচে fillColor , fillType এবং strokeColor কার্যকারিতা ব্যবহার করুন, VectorDrawableCompat এবং AnimatedVectorDrawableCompat দুটি সমর্থনের মাধ্যমে উপলব্ধ: support-vector-drawable এবং যথাক্রমে animated-vector-drawable ।

অ্যান্ড্রয়েড স্টুডিও 1.4 বিল্ড টাইমে PNG ফাইল তৈরি করে ভেক্টর ড্রয়েবলের জন্য সীমিত সামঞ্জস্যপূর্ণ সমর্থন চালু করেছে। যাইহোক, ভেক্টর ড্রয়েবল এবং অ্যানিমেটেড ভেক্টর ড্রয়েবল সমর্থন লাইব্রেরিগুলি নমনীয়তা এবং বিস্তৃত সামঞ্জস্য উভয়ই অফার করে — এটি একটি সমর্থন লাইব্রেরি, তাই আপনি Android 2.1 (API স্তর 7+) এ সমস্ত অ্যান্ড্রয়েড প্ল্যাটফর্ম সংস্করণের সাথে এটি ব্যবহার করতে পারেন। ভেক্টর সমর্থন লাইব্রেরি ব্যবহার করার জন্য আপনার অ্যাপ কনফিগার করতে, অ্যাপ মডিউলে আপনার 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 ব্যবহার করতে পারেন। অ্যান্ড্রয়েড যেভাবে অঙ্কনযোগ্য আইডি লোড করে, এমন প্রতিটি জায়গা নয় যেটি একটি XML ফাইলের মতো, ভেক্টর অঙ্কনযোগ্য লোডিং সমর্থন করে। android.support.v7.appcompat প্যাকেজ ভেক্টর ড্রয়েবল ব্যবহার করা সহজ করার জন্য বেশ কয়েকটি বৈশিষ্ট্য যুক্ত করেছে। প্রথমত, যখন আপনি ImageView এর সাথে android.support.v7.appcompat প্যাকেজ ব্যবহার করেন বা 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 এবং উচ্চতর নিম্নলিখিত বৈশিষ্ট্যগুলিকে সমর্থন করে:

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

সমর্থন লাইব্রেরি ব্যবহার করে একাধিক 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 ফাইলে ব্যবহৃত হয়: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

একক XML ফাইল

নিম্নলিখিত XML ফাইলটি একটি ভেক্টর গ্রাফিককে অ্যানিমেট করার জন্য একটি একক XML ফাইল ব্যবহার করার পদ্ধতি প্রদর্শন করে। অ্যাপটি তৈরি করার সময়, aapt ট্যাগ পৃথক সংস্থান তৈরি করে এবং অ্যানিমেটেড ভেক্টরে তাদের উল্লেখ করে। এই পদ্ধতির জন্য বিল্ড টুলস 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>