نکات کلیدی
- وکتور قابل ترسیم یک گرافیک برداری است که در یک فایل XML به عنوان مجموعه ای از نقاط، خطوط و منحنی ها به همراه اطلاعات رنگ مرتبط با آن تعریف می شود.
- نقشه های برداری مقیاس پذیر هستند، به این معنی که می توان اندازه آنها را بدون از دست دادن کیفیت نمایش تغییر داد. این آنها را برای استفاده در برنامه های اندروید ایده آل می کند، زیرا می تواند به کاهش اندازه فایل های APK شما و بهبود عملکرد کمک کند.
- می توانید با کلیک راست بر روی پوشه قابل ترسیم در پروژه خود و انتخاب New > Vector Asset، نقشه های برداری را در Android Studio ایجاد کنید. همچنین میتوانید فایلهای SVG را بهعنوان رسم برداری وکتور به اندروید استودیو وارد کنید.
مقدمه
VectorDrawable
یک گرافیک برداری است که در یک فایل XML به عنوان مجموعه ای از نقاط، خطوط و منحنی ها به همراه اطلاعات رنگ مرتبط با آن تعریف می شود. مزیت اصلی استفاده از قابلیت ترسیم برداری، مقیاس پذیری تصویر است. می توان آن را بدون از دست دادن کیفیت نمایش مقیاس کرد، به این معنی که اندازه یک فایل برای تراکم های مختلف صفحه بدون از دست دادن کیفیت تصویر تغییر می کند. این منجر به فایلهای APK کوچکتر و نگهداری کمتر توسعهدهنده میشود. همچنین می توانید با استفاده از چندین فایل XML به جای چندین تصویر برای هر وضوح نمایش، از تصاویر برداری برای انیمیشن استفاده کنید.این صفحه و ویدیوی زیر یک نمای کلی از نحوه ایجاد ترسیمهای برداری در XML ارائه میدهند. Android Studio همچنین میتواند فایلهای SVG را به فرمت قابل ترسیم برداری تبدیل کند، همانطور که در استفاده از افزودن گرافیک برداری چند چگالی توضیح داده شده است.
Android 5.0 (سطح API 21) اولین نسخهای بود که رسماً از ترسیمهای برداری با VectorDrawable
و AnimatedVectorDrawable
پشتیبانی کرد، اما میتوانید نسخههای قدیمیتر را با کتابخانه پشتیبانی Android که کلاسهای VectorDrawableCompat
و AnimatedVectorDrawableCompat
را ارائه میکند، پشتیبانی کنید.
درباره کلاس VectorDrawable
VectorDrawable
یک شی قابل کشیدن ثابت را تعریف می کند. مشابه فرمت SVG، هر گرافیک برداری به عنوان یک سلسله مراتب درختی تعریف می شود که از path
و اشیاء group
تشکیل شده است. هر path
شامل هندسه طرح کلی شی و group
شامل جزئیات برای تبدیل است. همه مسیرها به همان ترتیبی که در فایل XML ظاهر می شوند ترسیم می شوند.
![](https://developer.android.com/static/images/guide/topics/graphics/vectorpath.png?hl=fa)
شکل 1. نمونه سلسله مراتب یک دارایی قابل ترسیم برداری
ابزار Vector asset studio یک راه ساده برای افزودن یک گرافیک برداری به پروژه به عنوان یک فایل XML ارائه می دهد.
مثال XML
در اینجا یک نمونه فایل XML 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>
این XML تصویر زیر را ارائه می دهد:
![](https://developer.android.com/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?hl=fa)
درباره کلاس AnimatedVectorDrawable
AnimatedVectorDrawable
انیمیشن را به ویژگی های یک گرافیک برداری اضافه می کند. میتوانید یک گرافیک برداری متحرک را بهعنوان سه فایل منبع جداگانه یا بهعنوان یک فایل XML که کل قابل ترسیم را تعریف میکند، تعریف کنید. بیایید برای درک بهتر به هر دو روش نگاه کنیم: چندین فایل XML و یک فایل XML .
چندین فایل XML
با استفاده از این روش، می توانید سه فایل XML جداگانه تعریف کنید:
- یک فایل XML
VectorDrawable
. - یک فایل XML
AnimatedVectorDrawable
کهVectorDrawable
هدف، مسیرها و گروههای هدف را برای متحرک کردن، ویژگیها و انیمیشنهای تعریف شده بهعنوان اشیاءObjectAnimator
یاAnimatorSet
تعریف میکند. - یک فایل XML انیماتور.
نمونه ای از چندین فایل XML
فایل های XML زیر انیمیشن یک گرافیک برداری را نشان می دهند.
- فایل XML VectorDrawable:
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>
- فایل XML AnimatedVectorDrawable:
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>
- فایلهای XML Animator که در فایل XML AnimatedVectorDrawable استفاده میشوند:
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 Bundle در یک فایل 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 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) هستند، یا استفاده از ویژگیهای fillColor
، fillType
و strokeColor
زیر Android 7.0 (سطح API 24)، VectorDrawableCompat
و AnimatedVectorDrawableCompat
از طریق دو کتابخانه پشتیبانی در دسترس هستند: support-vector-drawable
و animated-vector-drawable
به ترتیب.
اندروید استودیو 1.4 با تولید فایلهای PNG در زمان ساخت، پشتیبانی از سازگاری محدود را برای ترسیمهای برداری معرفی کرد. با این حال، کتابخانههای قابل ترسیم بردار و قابل ترسیم بردار متحرک، هم انعطافپذیری و هم سازگاری گسترده را ارائه میدهند - این یک کتابخانه پشتیبانی است، بنابراین میتوانید با تمام نسخههای پلتفرم Android به Android 2.1 (سطح API 7+) از آن استفاده کنید. برای پیکربندی برنامه خود برای استفاده از کتابخانه های پشتیبانی برداری، عنصر vectorDrawables
را به فایل build.gradle
خود در ماژول برنامه اضافه کنید.
برای پیکربندی عنصر 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") } }
میتوانید از VectorDrawableCompat
و AnimatedVectorDrawableCompat
در همه دستگاههای دارای Android نسخه 4.0 (سطح API 14) و بالاتر استفاده کنید. روشی که اندروید فایلهای ترسیمی را بارگیری میکند، نه هر مکانی که شناسه قابل ترسیم را میپذیرد، مانند یک فایل XML، از بارگذاری کششهای برداری پشتیبانی میکند. بسته 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" />
برای تغییر drawable ها در زمان اجرا، می توانید از متد setImageResource()
مانند قبل استفاده کنید. استفاده از AppCompat
و app:srcCompat
بیدقتترین روش برای ادغام ترسیمهای برداری در برنامه شما است.
کتابخانه پشتیبانی 25.4.0 و بالاتر از ویژگی های زیر پشتیبانی می کند:
- Path Morphing (PathType Evaluator) برای تبدیل یک مسیر به مسیر دیگر استفاده می شود.
- درونیابی مسیر برای تعریف یک درون یابی انعطاف پذیر (که به عنوان یک مسیر نشان داده می شود) به جای درون یابی های تعریف شده توسط سیستم مانند LinearInterpolator استفاده می شود.
کتابخانه پشتیبانی 26.0.0-beta1 و بالاتر از ویژگی های زیر پشتیبانی می کند:
- حرکت در امتداد مسیر شی هندسی می تواند به عنوان بخشی از یک انیمیشن در امتداد یک مسیر دلخواه حرکت کند.
نمونه ای از چندین فایل XML با استفاده از کتابخانه پشتیبانی
فایل های XML زیر رویکرد استفاده از چندین فایل XML برای متحرک سازی یک گرافیک برداری را نشان می دهد.
- فایل XML VectorDrawable:
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>
- فایل XML AnimatedVectorDrawable:
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>
- فایل XML Animator که در فایل XML AnimatedVectorDrawable استفاده می شود:
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>