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

רוצה לנסות את שיטת הכתיבה?

Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. מידע על הצגת גרפיקה ב'כתיבה'.

ImageVector →

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

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

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

מבוא

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

בדף הזה ובסרטון שבהמשך מפורטת סקירה כללית על יצירת רכיבי גרפיקה וקטוריים ב-XML. אפשר גם להמיר קובצי SVG לפורמט drawable של וקטור ב-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 הזה יוצר את התמונה הבאה:

מידע על סיווג מונפש VectorDrawable

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 של Animator שנעשה בהם שימוש ב-XML של AnimatorDrawable קובץ: 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>

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

כדי לתמוך בתמונות וקטוריות שניתן לצייר (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. עם זאת, את פריט הגרפיקה הווקטורי ניתן לצייר וספריות תמיכה ניתנות לשרטוט וקטורים מונפשים מציעות גם גמישות וגם תאימות רחבה – זו ספריית תמיכה, כך שאפשר להשתמש בה הגרסאות של פלטפורמת Android החל מ-Android 2.1 (רמת API 7 ומעלה). כדי להגדיר כדי להשתמש בספריות של תמיכה בווקטורים, מוסיפים את 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
    }
}

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 כמה תכונות שיעזרו לכם להשתמש בקלות ב-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 היא שיטת השילוב הכי חסינה בפני שגיאות פריטים שניתנים להזזה בווקטורים לאפליקציה.

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

• שינוי נתיבים (בודק PathType) משמש לשינוי נתיבים לנתיב אחד לנתיב אחר.
• אינטרפולציה של נתיב שמשמשת להגדרת אינטרפולטור (המיוצג כנתיב) במקום בשיטה המוגדרת על ידי המערכת אינטרפולטורים כמו 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 של][=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 של Animator שנעשה בו שימוש ב-XML של AnimatorDrawable קובץ: 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>