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

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

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

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

מבוא

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

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

Android 5.0 (רמת API 21) הייתה הגרסה הראשונה שתמכה באופן רשמי במודעות וקטוריות ניתנות להזזה עם VectorDrawable ו-AnimatedVectorDrawable, אבל לתמוך בגרסאות ישנות יותר באמצעות ספריית התמיכה של Android, VectorDrawableCompat והקבוצה AnimatedVectorDrawableCompat כיתות.

מידע על המחלקה VectorDrawable

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

איור 1. היררכיה לדוגמה של נכס שניתן להזזה בווקטור

נכס וקטורי הכלי סטודיו מציע דרך פשוטה להוסיף לפרויקט גרפיקה וקטורית כקובץ 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

קובצי ה-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>

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

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

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

ספריית התמיכה בגרסה 25.4.0 ואילך תומכת בתכונות הבאות:

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