نمای کلی ترسیمی‌های بُرداری

امتحان کردن روش Compose
Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه نمایش گرافیک در Compose آشنا شوید.
ImageVector →

نکات کلیدی

  • ترسیمی بُرداری یک گرافیک بُرداری است که در فایل XML به‌عنوان مجموعه‌ای از نقاط، خطوط، و منحنی‌ها به‌همراه اطلاعات رنگ مربوط به آن تعریف می‌شود.
  • ترسیمی‌های بُرداری مقیاس‌پذیر هستند، یعنی می‌توان اندازه آن‌ها را بدون افت کیفیت نمایش تغییر داد. این امر آن‌ها را برای استفاده در برنامه‌های Android ایده‌آل می‌کند، زیرا می‌تواند به کاهش اندازه فایل‌های APK شما و بهبود عملکرد کمک کند.
  • می‌توانید با کلیک راست کردن روی پوشه ترسیمی در پروژه‌تان و انتخاب «جدید > دارایی بُرداری»، ترسیمی‌های بُرداری را در «استودیو Android» ایجاد کنید. همچنین می‌توانید فایل‌های SVG را به‌عنوان ترسیمی‌های بُرداری به «استودیو Android» وارد کنید.
خلاصه تولیدشده توسط Google Bard در ۲۴ ژوئیه ۲۰۲۳

مقدمه

VectorDrawable گرافیکی بُرداری است که در فایل XML به‌عنوان مجموعه‌ای از نقاط، خطوط، و منحنی‌ها به‌همراه اطلاعات رنگ مربوط به آن تعریف شده است. مزیت اصلی استفاده از ترسیمی بُرداری، مقیاس‌پذیری تصویر است. این نوع تصویر را می‌توان بدون افت کیفیت نمایش مقیاس‌بندی کرد، یعنی اندازه همان فایل برای تراکم‌های مختلف صفحه‌نمایش بدون افت کیفیت تصویر تغییر می‌کند. این کار باعث می‌شود فایل‌های APK کوچک‌تر شوند و توسعه‌دهنده به تعمیر و نگهداری کمتری نیاز داشته باشد. همچنین می‌توانید بااستفاده از چندین فایل XML به‌جای چندین تصویر برای هر وضوح نمایش، از تصاویر بُرداری برای پویانمایی استفاده کنید.

این صفحه و ویدیو زیر نمای کلی از نحوه ایجاد ترسیمی‌های برداری در XML ارائه می‌دهند. «استودیو Android» همچنین می‌تواند فایل‌های SVG را به قالب ترسیمی بُرداری تبدیل کند، همان‌طور که در استفاده از افزودن گرافیک بُرداری چندچگالی شرح داده شده است.

‫Android 5.0 (سطح API‏ ۲۱) اولین نسخه‌ای بود که به‌طور رسمی از ترسیمی‌های برداری با VectorDrawable و AnimatedVectorDrawable پشتیبانی می‌کرد، اما می‌توانید با کتابخانه پشتیبانی Android که کلاس‌های VectorDrawableCompat و AnimatedVectorDrawableCompat را ارائه می‌دهد، از نسخه‌های قدیمی‌تر پشتیبانی کنید.

درباره کلاس VectorDrawable

VectorDrawable شیء قابل‌ترسیم ایستایی را تعریف می‌کند. مشابه قالب SVG، هر گرافیک برداری به‌عنوان یک سلسله‌مراتب درختی تعریف می‌شود که از اشیاء path و group تشکیل شده است. هر path حاوی هندسه طرح کلی شیء است و group حاوی جزئیات تبدیل است. همه مسیرها به همان ترتیبی که در فایل XML ظاهر می‌شوند، ترسیم می‌شوند.

شکل ۱. سلسله‌مراتب نمونه دارایی ترسیمی بُرداری

ابزار استودیوی دارایی بُرداری روشی ساده برای افزودن گرافیک بُرداری به پروژه به‌عنوان فایل 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 تصویر زیر را ارائه می‌دهد:

درباره کلاس AnimatedVectorDrawable

AnimatedVectorDrawable پویانمایی را به ویژگی‌های گرافیک بُرداری اضافه می‌کند. می‌توانید گرافیک برداری پویانمایی‌شده را به‌عنوان سه فایل منبع جداگانه یا به‌عنوان یک فایل XML واحد که کل drawable را تعریف می‌کند، تعریف کنید. برای درک بهتر، هر دو رویکرد را بررسی می‌کنیم: چند فایل 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 پویانما که در فایل 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» در یک فایل XML ادغام کنید. هنگام ساختن برنامه، برچسب aapt منابع جداگانه‌ای ایجاد می‌کند و در بردار پویانمایی‌شده به آن‌ها ارجاع می‌دهد. این رویکرد به Build Tools نسخه ۲۴ یا بالاتر نیاز دارد و خروجی با نسخه‌های قدیمی سازگار است.

نمونه‌ای از یک فایل 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 (سطح میانای برنامه‌سازی کاربردی ۲۱) را اجرا می‌کنند، یا برای استفاده از عملکردهای fillColor، fillType، و strokeColor در نسخه‌های پایین‌تر از Android 7.0 (سطح میانای برنامه‌سازی کاربردی ۲۴)، VectorDrawableCompat و AnimatedVectorDrawableCompat به‌ترتیب ازطریق دو کتابخانه پشتیبانی support-vector-drawable و animated-vector-drawable دردسترس هستند.

«استودیو Android» نسخه ۱.۴ با تولید فایل‌های PNG در زمان ساخت، پشتیبانی سازگاری محدودی را برای ترسیمی‌های بُرداری معرفی کرد. بااین‌حال، «کتابخانه‌های» پشتیبانی از ترسیمی بُرداری و ترسیمی بُرداری پویانمایی‌شده هم انعطاف‌پذیری و هم سازگاری گسترده‌ای را ارائه می‌دهند — این یک کتابخانه پشتیبانی است، بنابراین می‌توانید از آن با همه نسخه‌های پلاتفرم Android تا Android 2.1 (سطح ای‌پی‌آی ۷+) استفاده کنید. برای پیکربندی برنامه‌تان جهت استفاده از کتابخانه‌های پشتیبانی بُرداری، عنصر 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 نسخه ۴.۰ (سطح API‏ ۱۴) و بالاتر استفاده کنید. به‌دلیل نحوه بار کردن ترسیمی‌ها در Android، همه مکان‌هایی که شناسه ترسیمی را می‌پذیرند (مثلاً در فایل 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" />

برای تغییر دادن ترسیم‌پذیرها در زمان اجرا، می‌توانید از روش setImageResource() مثل قبل استفاده کنید. استفاده از AppCompat و app:srcCompat مطمئن‌ترین روش برای ادغام ترسیمی‌های برداری در برنامه شما است.

«کتابخانه پشتیبانی» نسخه ۲۵.۴.۰ و بالاتر از ویژگی‌های زیر پشتیبانی می‌کند:

  • Path Morphing (PathType evaluator) Used to morph one path into another path.
  • درون‌یابی مسیر برای تعریف درون‌یاب انعطاف‌پذیر (که به‌صورت مسیر نشان داده می‌شود) به‌جای درون‌یاب‌های تعریف‌شده توسط سیستم مانند 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 پویانما که در فایل XML AnimatedVectorDrawable استفاده می‌شود: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

یک فایل XML

فایل XML زیر رویکرد استفاده از یک فایل XML تکی را برای پویانمایی گرافیک بُرداری نشان می‌دهد. هنگام ساختن برنامه، برچسب aapt منابع جداگانه‌ای ایجاد می‌کند و در بردار پویانمایی‌شده به آن‌ها ارجاع می‌دهد. این رویکرد به Build Tools نسخه ۲۴ یا بالاتر نیاز دارد و خروجی با نسخه‌های قدیمی سازگار است.

نمونه‌ای از یک فایل 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>