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

איך עושים את זה ב-Compose
‫Jetpack Compose היא ערכת הכלים המומלצת לפיתוח ממשק משתמש ב-Android. איך מציגים גרפיקה ב-Compose.
ImageVector ←

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

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

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

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

מגניב

// 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 נוספו כמה תכונות שמאפשרות להשתמש בקלות בפריטים גרפיים וקטוריים שניתן לשרטוט. קודם כול, כשמשתמשים בחבילה 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 ואילך תומכת בתכונות הבאות:

  • שינוי צורה של נתיב (מעריך PathType) משמש לשינוי צורה של נתיב אחד לנתיב אחר.
  • 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 של 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>