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