نمای کلی نقشه های وکتوری

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

نکات کلیدی

  • وکتور قابل ترسیم یک گرافیک برداری است که در یک فایل XML به عنوان مجموعه ای از نقاط، خطوط و منحنی ها به همراه اطلاعات رنگ مرتبط با آن تعریف می شود.
  • نقشه های برداری مقیاس پذیر هستند، به این معنی که می توان اندازه آنها را بدون از دست دادن کیفیت نمایش تغییر داد. این آنها را برای استفاده در برنامه های اندروید ایده آل می کند، زیرا می تواند به کاهش اندازه فایل های APK شما و بهبود عملکرد کمک کند.
  • می توانید با کلیک راست بر روی پوشه قابل ترسیم در پروژه خود و انتخاب New > Vector Asset، نقشه های برداری را در Android Studio ایجاد کنید. همچنین می‌توانید فایل‌های SVG را به‌عنوان رسم برداری وکتور به اندروید استودیو وارد کنید.
خلاصه تولید شده توسط Google Bard در 24 جولای 2023

مقدمه

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 ظاهر می شوند ترسیم می شوند.

شکل 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 تصویر زیر را ارائه می دهد:

درباره کلاس AnimatedVectorDrawable

AnimatedVectorDrawable انیمیشن را به ویژگی های یک گرافیک برداری اضافه می کند. می‌توانید یک گرافیک برداری متحرک را به‌عنوان سه فایل منبع جداگانه یا به‌عنوان یک فایل XML که کل قابل ترسیم را تعریف می‌کند، تعریف کنید. بیایید برای درک بهتر به هر دو روش نگاه کنیم: چندین فایل XML و یک فایل XML .

چندین فایل XML

با استفاده از این روش، می توانید سه فایل 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>