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

רוצה לנסות את שיטת הכתיבה?
Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך מציגים גרפיקה ב'כתיבה'
ImageVector →

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

  • פריט גרפי וקטורי שניתן לשרטוט הוא גרפיקה וקטורית שמוגדרת בקובץ XML כקבוצה של נקודות, קווים ועקומות, יחד עם פרטי הצבע המשויכים.
  • אפשר לשנות את הגודל של רכיבי גרפיקה וקטוריים ללא פגיעה באיכות התצוגה. לכן הן אידיאליות לשימוש באפליקציות ל-Android, כי הן יכולות לעזור להקטין את גודל קובצי ה-APK ולשפר את הביצועים.
  • כדי ליצור נכסי drawable וקטוריים ב-Android Studio, לוחצים לחיצה ימנית על תיקיית ה-drawable בפרויקט ובוחרים באפשרות 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) הייתה הגרסה הראשונה שתומכת באופן רשמי ב-vector drawables באמצעות 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 של][=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" />
     <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 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:

מגניב

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

Kotlin

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

Groovy

// 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 טוענת רכיבי drawable, לא בכל מקום שבו אפשר להזין מזהה drawable, כמו בקובץ XML, יש תמיכה בחיבור רכיבי drawable וקטוריים. לחבילה android.support.v7.appcompat נוספו כמה פיצ'רים כדי שיהיה קל להשתמש בפריטים וקטוריים שניתנים להזזה. ראשית, כשמשתמשים בחבילה 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" />

כדי לשנות רכיבי drawable בזמן הריצה, אפשר להשתמש ב-method‏ setImageResource() כמו בעבר. השימוש ב-AppCompat וב-app:srcCompat הוא השיטה הבטוחה ביותר לשילוב של רכיבי גרפיקה וקטורית באפליקציה.

ב-Support Library מגרסה 25.4.0 ואילך יש תמיכה בתכונות הבאות:

  • Path Morphing (PathType evaluator) משמש להמרת נתיב אחד לנתיב אחר.
  • Path Interpolation (אינטרפולציה של נתיב) – משמש להגדרת אינטרפולטור גמיש (שמיוצג כנתיב) במקום אינטרפולטורים שהוגדרו על ידי המערכת, כמו LinearInterpolator.

ב-Support Library מגרסה 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 מגרסה 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>