דף זה תורגם על ידי Cloud Translation API.

סקירה כללית של פריטים גרפיים וקטוריים

נקודות עיקריות

פריט גרפי וקטורי שניתן לשרטוט הוא גרפיקה וקטורית שמוגדרת בקובץ XML כקבוצה של נקודות, קווים ועקומות, יחד עם פרטי הצבע המשויכים.
אפשר לשנות את הגודל של רכיבי גרפיקה וקטוריים ללא פגיעה באיכות התצוגה. לכן הן אידיאליות לשימוש באפליקציות ל-Android, כי הן יכולות לעזור להקטין את גודל קובצי ה-APK ולשפר את הביצועים.
כדי ליצור פריטים גרפיים וקטוריים ב-Android Studio, לוחצים לחיצה ימנית על התיקייה שניתנת להזזה בפרויקט ובוחרים באפשרות New > Vector Asset (חדש > נכס וקטורי). אפשר גם לייבא קובצי SVG ל-Android Studio כ-vector drawables.

סיכום שנוצר על ידי Google Bard ב-24 ביולי 2023

מבוא

VectorDrawable הוא גרפיקה וקטורית שמוגדרת בקובץ XML כקבוצה של נקודות, קווים ועקומות, יחד עם פרטי הצבע המשויכים. היתרון העיקרי של שימוש בקובץ גרפי וקטורי הוא יכולת מדרגיות התמונה. אפשר לשנות את הגודל שלו בלי לפגוע באיכות התצוגה, כלומר אותו קובץ משתנה בהתאם לצפיפות המסך בלי לפגוע באיכות התמונה. כך מתקבלים קובצי APK קטנים יותר ופחות תחזוקה מצד המפתחים. אפשר גם להשתמש בתמונות וקטוריות לאנימציה על ידי שימוש בכמה קובצי XML במקום בכמה תמונות לכל רזולוציית תצוגה.

בדף הזה ובסרטון שבהמשך מפורטת סקירה כללית על יצירת רכיבי גרפיקה וקטוריים ב-XML. אפשר גם להמיר קובצי SVG לפורמט של גרפיקה וקטורית שניתן לציור ב-Android Studio, כפי שמתואר במאמר הוספת גרפיקה וקטורית ברזולוציות שונות.

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 מסוג 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 של NavigationVectorDrawable: 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 Bundle. בזמן בניית האפליקציה, התג 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>

פתרון לתאימות לאחור של פריטים גרפיים וקטורים שניתן לשרטוט

כדי לתמוך בתמונות וקטוריות שניתן לצייר (vector drawable) ובתמונות וקטוריות שניתן לצייר עם אנימציה (animated vector drawable) במכשירים עם גרסאות פלטפורמה ישנות יותר מ-Android 5.0 (רמת API‏ 21), או להשתמש בפונקציות של fillColor, ‏ fillType ו-strokeColor בגרסאות ישנות יותר מ-Android 7.0 (רמת API‏ 24), VectorDrawableCompat ו-AnimatedVectorDrawableCompat זמינים דרך שתי ספריות תמיכה: support-vector-drawable ו-animated-vector-drawable, בהתאמה.

ב-Android Studio 1.4 נוספה תמיכה מוגבלת בתאימות לרכיבי drawable וקווים וקשתות וקובצי PNG נוצרים בזמן ה-build. עם זאת, ספריות התמיכה של רכיבי ה-vector drawable ושל רכיבי ה-vector drawable האנימציה מציעות גמישות ותאימות רחבה – הן ספריות תמיכה, כך שאפשר להשתמש בהן בכל הגרסאות של פלטפורמת Android, החל מ-Android 2.1 (רמת API 7 ואילך). כדי להגדיר את האפליקציה כך שתשתמש בספריות תמיכה של רכיבי vector, מוסיפים את האלמנט vectorDrawables לקובץ build.gradle במודול האפליקציה.

משתמשים בקטע הקוד הבא כדי להגדיר את הרכיב vectorDrawables:

Groovy

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// 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"
    }
}

Kotlin

// 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) ומעלה. באופן שבו מערכת Android טוענת אובייקטים שניתנים להזזה, לא כל מקום שמקבל מזהה שניתן להזזה, כמו בקובץ XML, תומך בטעינה של פריטי גרפיקה וקטוריים. הוספנו לחבילה android.support.v7.appcompat כמה תכונות שיעזרו לכם להשתמש בקלות ב-vector drawables. ראשית, כשמשתמשים בחבילה android.support.v7.appcompat עם ImageView או עם תת-כיתות כמו ImageButton ו-FloatingActionButton, אפשר להשתמש במאפיין החדש app:srcCompat כדי להפנות לרכיבי drawable של וקטורים וגם לכל רכיב drawable אחר שזמין ל-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 ואילך תומכת בתכונות הבאות:

Path Morphing (PathType evaluator) משמש להמרת נתיב אחד לנתיב אחר.
Path Interpolation (אינטרפולציה של נתיב) – משמש להגדרת אינטרפולטור גמיש (שמיוצג כנתיב) במקום אינטרפולטורים שהוגדרו על ידי המערכת, כמו 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 של][=VectorDrawable: 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 בגרסה 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>