মূল পয়েন্ট
- একটি ভেক্টর ড্রয়েবল হল একটি ভেক্টর গ্রাফিক যা একটি XML ফাইলে বিন্দু, রেখা এবং বক্ররেখার সাথে সম্পর্কিত রঙের তথ্যের সেট হিসাবে সংজ্ঞায়িত করা হয়।
- ভেক্টর ড্রয়েবলগুলি স্কেলযোগ্য, যার অর্থ প্রদর্শনের গুণমান নষ্ট না করেই তাদের আকার পরিবর্তন করা যেতে পারে। এটি এগুলিকে অ্যান্ড্রয়েড অ্যাপে ব্যবহারের জন্য আদর্শ করে তোলে, কারণ এটি আপনার APK ফাইলের আকার কমাতে এবং কর্মক্ষমতা উন্নত করতে সাহায্য করতে পারে৷
- আপনি আপনার প্রোজেক্টে আঁকাযোগ্য ফোল্ডারে ডান ক্লিক করে এবং নতুন > ভেক্টর সম্পদ নির্বাচন করে অ্যান্ড্রয়েড স্টুডিওতে ভেক্টর অঙ্কনযোগ্য তৈরি করতে পারেন। আপনি ভেক্টর অঙ্কনযোগ্য হিসাবে Android স্টুডিওতে SVG ফাইলগুলি আমদানি করতে পারেন।
ভূমিকা
একটিVectorDrawable
হল একটি ভেক্টর গ্রাফিক যা একটি XML ফাইলে বিন্দু, রেখা এবং বক্ররেখার সাথে সম্পর্কিত রঙের তথ্যের সেট হিসাবে সংজ্ঞায়িত করা হয়। একটি ভেক্টর অঙ্কনযোগ্য ব্যবহার করার প্রধান সুবিধা হল চিত্র মাপযোগ্যতা। এটি প্রদর্শনের গুণমান নষ্ট না করেই স্কেল করা যেতে পারে, যার মানে একই ফাইলটি চিত্রের গুণমান নষ্ট না করে বিভিন্ন স্ক্রীনের ঘনত্বের জন্য পুনরায় আকার দেওয়া হয়েছে। এর ফলে ছোট APK ফাইল এবং কম ডেভেলপার রক্ষণাবেক্ষণ হয়। আপনি প্রতিটি প্রদর্শন রেজোলিউশনের জন্য একাধিক চিত্রের পরিবর্তে একাধিক XML ফাইল ব্যবহার করে অ্যানিমেশনের জন্য ভেক্টর চিত্রগুলিও ব্যবহার করতে পারেন।এই পৃষ্ঠাটি এবং নীচের ভিডিওটি XML-এ ভেক্টর ড্রয়েবল কীভাবে তৈরি করতে হয় তার একটি ওভারভিউ প্রদান করে। অ্যান্ড্রয়েড স্টুডিও এসভিজি ফাইলগুলিকে ভেক্টর ড্রয়েবল ফরম্যাটে রূপান্তর করতে পারে, যেমন মাল্টি-ডেনসিটি ভেক্টর গ্রাফিক্স অ্যাড ব্যবহার করে বর্ণনা করা হয়েছে।
Android 5.0 (API লেভেল 21) হল প্রথম সংস্করণ যা আনুষ্ঠানিকভাবে ভেক্টর VectorDrawable
এবং AnimatedVectorDrawable
ড্রয়েবলের সাথে সমর্থন করে, তবে আপনি Android সমর্থন লাইব্রেরির সাথে পুরানো সংস্করণগুলিকে সমর্থন করতে পারেন, যা VectorDrawableCompat
এবং AnimatedVectorDrawableCompat
ক্লাসগুলি প্রদান করে৷
ভেক্টর ড্রয়েবল ক্লাস সম্পর্কে
VectorDrawable
একটি স্ট্যাটিক অঙ্কনযোগ্য বস্তুকে সংজ্ঞায়িত করে। SVG বিন্যাসের অনুরূপ, প্রতিটি ভেক্টর গ্রাফিককে একটি গাছের শ্রেণিবিন্যাস হিসাবে সংজ্ঞায়িত করা হয়, যা path
এবং group
অবজেক্টের সমন্বয়ে গঠিত। প্রতিটি path
বস্তুর রূপরেখার জ্যামিতি থাকে এবং group
রূপান্তরের জন্য বিশদ বিবরণ থাকে। সমস্ত পাথ XML ফাইলে প্রদর্শিত একই ক্রমে আঁকা হয়।
![](https://developer.android.com/static/images/guide/topics/graphics/vectorpath.png?authuser=4&hl=bn)
চিত্র 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 নিম্নলিখিত চিত্রটি রেন্ডার করে:
![](https://developer.android.com/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=4&hl=bn)
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>