הוספת גרפיקה וקטורית בדחיסות מרובות

ב-Android Studio יש כלי שנקרא Vector Asset Studio, שמאפשר להוסיף סמלים של Material Design ולייבא קובצי Scalable Vector Graphic ‏(SVG) ו-Adobe Photoshop Document ‏(PSD) לפרויקט כפריטים גרפיים וקטוריים שניתנים לשרטוט. שימוש בפריטים גרפיים וקטוריים שניתן לשרטוט במקום במפות סיביות מקטין את גודל ה-APK, כי אפשר לשנות את הגודל של אותו קובץ בהתאם לצפיפויות שונות של המסך בלי לפגוע באיכות התמונה. בגרסאות קודמות של Android שלא תומכות בפריטים גרפיים וקטוריים שניתן לשרטוט, Vector Asset Studio יכול להמיר את הפריטים הגרפיים הווקטוריים שניתן לשרטוט לגדלים שונים של מפות סיביות לכל צפיפות מסך בזמן ה-build.

מידע על Vector Asset Studio

הכלי Vector Asset Studio מוסיף לפרויקט גרפיקה וקטורית כקובץ XML שמתאר את התמונה. יכול להיות שיהיה קל יותר לתחזק קובץ XML אחד מאשר לעדכן כמה גרפיקות רסטר ברזולוציות שונות.

כדי להשתמש בפריטים גרפיים וקטוריים שניתן לשרטוט עם Jetpack Compose, צריך להגדיר את רמת ה-API המינימלית ל-Android 5.0 (רמת API‏ 21) ומעלה.

ב-Android 4.4 (רמת API 20) ומטה אין תמיכה בפריטים גרפיים וקטוריים שניתן לשרטוט. אם רמת ה-API המינימלית נמצאת בטווח הזה, ב-Vector Asset Studio יש שתי אפשרויות:

  • יצירת קובצי PNG (ברירת המחדל): Vector Asset Studio יוצר תמונות רסטר של הפריט הגרפי הווקטורי שניתן לשרטוט, ומצרף את הפריטים הגרפיים הווקטוריים והרסטריים שניתנים לשרטוט ל-APK. אפשר להפנות לפריטים גרפיים וקטוריים שניתנים לשרטוט בתור Drawable בקוד Kotlin או בתור @drawable בקוד XML. כשהאפליקציה פועלת, התמונה הווקטורית או הרסטרית המתאימה מוצגת באופן אוטומטי בהתאם לרמת ה-API.
  • שימוש ב-AndroidX בגרסה 1.0.0 ואילך: כדי להשתמש רק בפריטים גרפיים וקטוריים שניתן לשרטוט, צריך לשנות את הקובץ build.gradle לפני שמפעילים את Vector Asset Studio, כמו שמתואר במאמר AndroidX. הכיתה VectorDrawableCompat ב-AndroidX מאפשרת לתמוך ב-VectorDrawable ב-Android מגרסה 2.1 (רמת API‏ 7) ואילך.

סוגי גרפיקה וקטורית נתמכים

במפרט של Google Material Design יש סמלי Material שאפשר להשתמש בהם באפליקציות ל-Android. בעזרת Vector Asset Studio אפשר לבחור, לייבא ולשנות את הגודל של סמלי Material, וגם להגדיר את האטימות ואת הגדרת השיקוף מימין לשמאל (RTL).

ב-Vector Asset Studio אפשר גם לייבא קובצי SVG ו-PSD משלכם. ‫SVG הוא תקן פתוח מבוסס-XML של World Wide Web Consortium‏ (W3C). פורמט הקובץ PSD תומך בתכונות של Adobe Photoshop. ‫Vector Asset Studio תומך בתקנים החיוניים, אבל לא בכל התכונות של SVG ו-PSD. כשמציינים קובץ SVG או PSD, ‏Vector Asset Studio נותן משוב מיידי לגבי השאלה אם קוד הגרפיקה נתמך או לא. הוא ממיר את הקובץ לקובץ XML שמכיל קוד VectorDrawable. אם מופיעות שגיאות, צריך לוודא שהפריט הגרפי הווקטורי שניתן לשרטוט מופיע כמו שצריך. מידע נוסף על תכונות PSD מותרות זמין במאמר תמיכה והגבלות בקובצי PSD.

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

שיקולים לגבי קובצי SVG ו-PSD

פריטים גרפיים וקטוריים שניתנים לשרטוט מתאימים במיוחד לסמלים בסיסיים, כמו סמלים של Material. סמלי הפעלה של אפליקציות כוללים בדרך כלל הרבה פרטים, ולכן הם פועלים טוב יותר כתמונות רסטר.

הטעינה הראשונית של פריט גרפי וקטורי שניתן לשרטוט יכולה לצרוך יותר מחזורי מעבד (CPU) מאשר תמונת הרסטר המתאימה. לאחר מכן, השימוש בזיכרון והביצועים דומים בשני המקרים. מומלץ להגביל תמונה וקטורית לגודל של עד 200x200dp, אחרת יכול להיות שייקח יותר מדי זמן לשרטט אותה.

למרות שפריטים גרפיים וקטוריים שניתנים לשרטוט תומכים בצבע אחד או יותר, במקרים רבים כדאי לצבוע סמלים בשחור (android:fillColor="#FF000000"). בגישה הזו, אפשר להוסיף גוון לפריט הגרפי הווקטורי שניתן לשרטוט שהוספתם לפריסה, וצבע הסמל ישתנה לצבע הגוון. אם צבע הסמל הוא לא שחור, יכול להיות שצבע הסמל ישתלב עם הגוון.

פתרונות לתאימות לדורות קודמים של פריטים גרפיים וקטוריים שניתן לשרטוט

בטבלה הבאה מפורטות שתי השיטות שבהן אפשר להשתמש כדי לשמור על תאימות לדורות קודמים:

תכונה רכיבים גרפיים ב-APK רכיבי XML של VectorDrawable גרסה דגלי Build קוד האפליקציה
יצירת קובצי PNG וקטור ורסטר תמיכה בקבוצת משנה

‫SVG: פלאגין Android ל-Gradle בגרסה 1.5.0 ואילך

‫PSD: ‏Android Studio מגרסה 2.2 ואילך

ברירת מחדל תמיכה במגוון שיטות תכנות
‫AndroidX מגרסה 1.0 ואילך וקטור תמיכה מלאה פלאגין Android ל-Gradle בגרסה 3.2 ואילך נדרשות הצהרות של ספריית התמיכה קבוצת משנה של שיטות קידוד נתמכות

שימוש בפריטים גרפיים וקטוריים שניתן לשרטוט יכול להקטין את ה-APK, אבל הטעינה הראשונית של הפריטים האלה יכולה להימשך זמן רב יותר.

יצירת קובץ PNG

ב-Android מגרסה 5.0 (רמת API‏ 21) ואילך יש תמיכה בפריטים גרפיים וקטוריים שניתן לשרטט. אם רמת ה-API המינימלית של האפליקציה נמוכה יותר, Vector Asset Studio מוסיף לפרויקט את קובץ הפריט הגרפי הווקטורי שניתן לשרטוט. בנוסף, בזמן ה-build, ‏Gradle יוצר תמונות רסטר בפורמט PNG ברזולוציות שונות. ‫Gradle יוצר את צפיפויות ה-PNG שצוינו במאפיין generatedDensities של שפת Domain Specific Language‏ (DSL) בקובץ build.gradle.

ב-Android מגרסה 5.0 (רמת API‏ 21) ומעלה, Vector Asset Studio תומך בכל הרכיבים של VectorDrawable. כדי לשמור על תאימות לדורות קודמים עם Android מגרסה 4.4 (רמת API‏ 20) ומטה, Vector Asset Studio תומך ברכיבי ה-XML הבאים:

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

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

AndroidX

כדי להשתמש בשיטה הזו, צריך את AndroidX בגרסה 1.0 ומעלה ואת פלאגין Android ל-Gradle בגרסה 3.2 ומעלה, והיא משתמשת רק בפריטים גרפיים וקטוריים שניתנים לשרטוט. הכיתה VectorDrawableCompat ב-AndroidX מאפשרת לתמוך ב-VectorDrawable ב-Android מגרסה 2.1 (רמת API‏ 7) ואילך.

לפני שמשתמשים ב-Vector Asset Studio, צריך להוסיף הצהרה לקובץ build.gradle:

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

מגניב

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

הפעלת Vector Asset Studio

כדי להפעיל את Vector Asset Studio:

  1. ב-Android Studio, פותחים פרויקט של אפליקציה ל-Android.

  2. בחלון Project, בוחרים באפשרות Android view.

  3. לוחצים לחיצה ימנית על התיקייה res ובוחרים באפשרות New (חדש) > Vector Asset (נכס וקטורי).

    האפשרות הזו בתפריט מופיעה גם בחלק מהתיקיות ומהתצוגות האחרות של הפרויקט.

    מופיע Vector Asset Studio.

    ‫Vector Asset Studio עם בחירה של סמל של material.
    תרשים 1. Vector Asset Studio.
  4. אם במקום זאת מופיעה תיבת הדו-שיח Need Newer Android Plugin for Gradle, צריך לתקן את גרסת Gradle באופן הבא:

    1. לוחצים על File (קובץ) > Project Structure (מבנה הפרויקט).

    2. בתיבת הדו-שיח Project Structure (מבנה הפרויקט), בוחרים באפשרות Project (פרויקט).

    3. בשדה Android Plugin Version, משנים את הגרסה של הפלאגין של Android ל-Gradle ל-1.5.0 או גרסה חדשה יותר, ולוחצים על OK.

      ‫Gradle מסנכרן את הפרויקט.

    4. בתצוגת Android בחלון Project, לוחצים לחיצה ימנית על התיקייה res ובוחרים באפשרות New > נכס וקטורי.

      מופיע Vector Asset Studio.

  5. ממשיכים עם ייבוא של גרפיקה וקטורית.

ייבוא של פרטי גרפי וקטורי

‫Vector Asset Studio עוזר לייבא קובץ גרפיקה וקטורית לפרויקט של האפליקציה. מבצעים את אחת מהפעולות הבאות:

הוספת סמל של Material

אחרי שפותחים את Vector Asset Studio, אפשר להוסיף סמל של material באופן הבא:

  1. ב-Vector Asset Studio, בוחרים באפשרות קליפ ארט.

  2. בשדה "קליפ ארט", לוחצים על הכפתור.

  3. תיבת הדו-שיח Select Icon מופיעה. כדי לסנן את הסמלים שמוצגים, בוחרים קטגוריית סמלים מהתפריט או מקלידים בשדה החיפוש, כמו שמוצג באיור 2.

    סינון סמלי Material ב-Vector Asset Studio.
    איור 2. סינון סמלי Material ב-Vector Asset Studio.

    בוחרים סמל של Material ולוחצים על אישור. הסמל מופיע ב-תצוגה מקדימה של פריט גרפי וקטורי שניתן לשרטוט.

  4. אם רוצים, משנים את שם המשאב, הגודל, האטימות והגדרת השיקוף מימין לשמאל (RTL):

    • שם – אם אתם לא רוצים להשתמש בשם ברירת המחדל, אתם יכולים להקליד שם חדש. אם שם המשאב כבר קיים בפרויקט, Vector Asset Studio יוצר באופן אוטומטי שם ייחודי (מוסיף מספר לסוף השם). השם יכול להכיל רק אותיות קטנות, קווים תחתונים וספרות.

    • שינוי – בוחרים באפשרות הזו אם רוצים לשנות את גודל התמונה. כשמקלידים גודל חדש, השינוי מופיע באזור התצוגה המקדימה.

      ברירת המחדל היא 24 x 24 dp, שמוגדרת במפרט של Material Design. מבטלים את הסימון בתיבה כדי לחזור לברירת המחדל.

    • אטימות – משתמשים בפס ההזזה כדי לשנות את רמת האטימות של התמונה. השינוי מופיע באזור התצוגה המקדימה.

    • הפעלת שיקוף אוטומטי לפריסה מימין לשמאל – בוחרים באפשרות הזו אם רוצים שתמונת ראי תוצג כשהפריסה היא מימין לשמאל, במקום משמאל לימין. לדוגמה, יש שפות שקוראים מימין לשמאל. אם יש לכם סמל של חץ, יכול להיות שתרצו להציג תמונת ראי שלו במקרה כזה. שימו לב: אם אתם עובדים עם פרויקט ישן יותר, יכול להיות שתצטרכו להוסיף גם את android:supportsRtl="true" לקובץ המניפסט של האפליקציה. היפוך אוטומטי נתמך ב-Android מגרסה 5.0 (רמת API‏ 21) ואילך, וב-AndroidX.

  5. לוחצים על הבא.

  6. אם רוצים, משנים את ספריית המודולים והמשאבים:

    • ‫Res Directory – בוחרים את קבוצת המקורות שבה רוצים להוסיף את הפריט הגרפי הווקטורי שניתן לשרטוט: src/main/res,‏ src/debug/res,‏ src/release/res או קבוצת מקורות שהמשתמש הגדיר. קבוצת המקורות הראשית חלה על כל וריאנט ה-build, כולל ניפוי באגים וגרסה. קבוצות המקורות לניפוי באגים ולגרסאות משתלטות על קבוצת המקורות הראשית ורלוונטיות לגרסה אחת של ה-build. קבוצת המקורות לניפוי באגים מיועדת לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות File‏ > Project Structure‏ > app‏ > Build Types. לדוגמה, אתם יכולים להגדיר קבוצת מקורות לבטא וליצור גרסה של סמל שכוללת את הטקסט "בטא" בפינה השמאלית התחתונה. מידע נוסף זמין במאמר הגדרת וריאנטים של build.

    באזור Output Directories מוצג הפריט הגרפי הווקטורי שניתן לשרטוט והספרייה שבה הוא יופיע.

  7. לוחצים על סיום.

    ‫Vector Asset Studio מוסיף קובץ XML שמגדיר את הפריט הגרפי הווקטורי שניתן לשרטוט לפרויקט בתיקייה app/src/main/res/drawable/. בתצוגת Android של החלון Project, אפשר לראות את קובץ ה-XML הווקטורי שנוצר בתיקייה drawable.

  8. מפתחים את הפרויקט.

    אם רמת ה-API המינימלית היא Android 4.4 (רמת API‏ 20) ומטה, ולא הפעלתם את טכניקת AndroidX, ‏ Vector Asset Studio יוצר קובצי PNG. בתצוגה Project Files בחלון Project, אפשר לראות את קובצי ה-PNG וקובצי ה-XML שנוצרו בתיקייה app/build/generated/res/pngs/debug/.

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

ייבוא של קובץ SVG או PSD

אחרי שפותחים את Vector Asset Studio, אפשר לייבא קובץ SVG או PSD באופן הבא:

  1. ב-Vector Asset Studio, בוחרים באפשרות Local file.

    הקובץ צריך להיות בכונן מקומי. לדוגמה, אם הוא נמצא ברשת, צריך קודם להוריד אותו לכונן מקומי.

  2. לוחצים על … כדי לציין קובץ תמונה.

    התמונה מופיעה בתצוגה המקדימה של הפריט הגרפי הווקטורי שניתן לשרטוט.

    אם קובץ ה-SVG או ה-PSD מכיל תכונות שלא נתמכות, תופיע שגיאה בתחתית של Vector Asset Studio, כמו שמוצג באיור 3.

    ‫Vector Asset Studio מציג שגיאות בייבוא SVG.
    איור 3. ‫Vector Asset Studio מציג כמה שגיאות.

    אם מופיעות שגיאות, צריך לוודא שהפריט הגרפי הווקטורי שניתן לשרטוט שיובא מעובד כמו שצריך. גוללים ברשימה כדי לראות את השגיאות.

    רשימה של רכיבים נתמכים מופיעה במאמר פתרונות לתאימות לדורות קודמים של פריטים גרפיים וקטוריים שניתן לשרטוט. מידע נוסף על קובצי PSD מותרים זמין במאמר תמיכה בקובצי PSD והגבלות עליהם.

  3. אם רוצים, משנים את שם המשאב, הגודל, האטימות והגדרת השיקוף מימין לשמאל (RTL):

    • שם – אם לא רוצים להשתמש בשם ברירת המחדל, מקלידים שם חדש. אם שם המשאב כבר קיים בפרויקט, Vector Asset Studio יוצר באופן אוטומטי שם ייחודי (מוסיף מספר לסוף השם). השם יכול להכיל רק אותיות קטנות, קווים תחתונים וספרות.

    • שינוי – בוחרים באפשרות הזו אם רוצים לשנות את גודל התמונה. אחרי שבוחרים את התמונה, הגודל משתנה לגודל של התמונה עצמה. בכל פעם שמשנים את הגודל, השינוי מופיע באזור התצוגה המקדימה. ברירת המחדל היא 24 x 24 dp, שמוגדרת במפרט של Material Design.

    • אטימות – משתמשים בפס ההזזה כדי לשנות את רמת האטימות של התמונה. השינוי מופיע באזור התצוגה המקדימה.

    • הפעלת שיקוף אוטומטי לפריסה מימין לשמאל – בוחרים באפשרות הזו אם רוצים שתמונת ראי תוצג כשהפריסה היא מימין לשמאל, במקום משמאל לימין. לדוגמה, שפות מסוימות נקראות מימין לשמאל. אם יש לכם סמל של חץ, יכול להיות שתרצו להציג תמונת ראי שלו במקרה כזה. שימו לב: אם אתם עובדים עם פרויקט ישן יותר, יכול להיות שתצטרכו להוסיף את android:supportsRtl="true" לקובץ המניפסט של האפליקציה. התכונה "שיקוף אוטומטי" נתמכת ב-Android מגרסה 5.0 (רמת API‏ 21) ואילך, וב-AndroidX.

  4. לוחצים על הבא.

  5. אם רוצים, משנים את ספריית המשאבים:

    • ‫Res Directory – בוחרים את קבוצת המקורות שבה רוצים להוסיף את הפריט הגרפי הווקטורי שניתן לשרטוט: src/main/res,‏ src/debug/res,‏ src/release/res או קבוצת מקורות שהמשתמש הגדיר. קבוצת המקורות הראשית חלה על כל וריאנט ה-build, כולל ניפוי באגים וגרסה. קבוצות המקורות לניפוי באגים ולהפצה מבטלות את קבוצת המקורות הראשית, והן חלות על גרסה אחת של build. קבוצת המקורות לניפוי באגים מיועדת לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות File (קובץ) > Project Structure (מבנה הפרויקט) > app (אפליקציה) > Build Types (סוגי גרסאות build). לדוגמה, אפשר להגדיר קבוצת מקורות לבטא וליצור גרסה של סמל שכולל את הטקסט "BETA" בפינה הימנית התחתונה. למידע נוסף, קראו את המאמר הגדרת וריאנטים של build.

    באזור Output Directories מוצג הפריט הגרפי הווקטורי שניתן לשרטוט והספרייה שבה הוא יופיע.

  6. לוחצים על סיום.

    ‫Vector Asset Studio מוסיף קובץ XML שמגדיר את הפריט הגרפי הווקטורי שניתן לשרטוט לפרויקט בתיקייה app/src/main/res/drawable/. בתצוגת Android של החלון Project, אפשר לראות את קובץ ה-XML הווקטורי שנוצר בתיקייה drawable.

  7. מפתחים את הפרויקט.

    אם רמת ה-API המינימלית היא Android 4.4 (רמת API‏ 20) ומטה, ולא הפעלתם את טכניקת AndroidX, ‏ Vector Asset Studio יוצר קובצי PNG. בתצוגה Project Files בחלון Project, אפשר לראות את קובצי ה-PNG וקובצי ה-XML שנוצרו בתיקייה app/build/generated/res/pngs/debug/.

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

הפניה לנכס וקטורי ב-Jetpack Compose

אחרי שמשתמשים ב-Vector Asset Studio כדי להוסיף נכס לתיקייה res/drawable, אפשר להפנות אליו בקוד.

ב-Jetpack Compose, הדרך הנפוצה ביותר להציג את הווקטור היא באמצעות הפונקציה הקומפוזבילית Icon או Image.

התוכן הקומפוזבילי Icon הוא הדרך הרגילה להציג נכסים קטנים ומונוכרומטיים. הוא מספק תמיכה מובנית בעקרונות של Material Design, כמו החלת גוונים דינמיים על סמך עיצובים של Material 3 ונגישות אוטומטית באמצעות תיאורי תוכן.

משתמשים ב-API‏ painterResource כדי לספק נכסים וקטוריים ב-XML לפונקציה הקומפוזבילית:

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

לווקטורים מורכבים וצבעוניים, משתמשים ב-composable‏ Image:

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

לתרחישים מורכבים אחרים, כמו התאמה אישית של קובץ אימג' או אופטימיזציה של הביצועים, ראו עבודה עם קובצי אימג'. כדי להוסיף אנימציה לווקטורים, קראו את המאמר תמונות וקטוריות מונפשות ב-Compose.

שינוי קוד XML שנוצר על ידי Vector Asset Studio

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

כשמשתמשים בטכניקה ליצירת קובצי PNG, הכלי Vector Asset Studio מוודא שהפריט הגרפי הווקטורי שניתן לשרטוט וקובצי ה-PNG תואמים, ושהמניפסט מכיל את הקוד המתאים. אם תוסיפו קוד שלא נתמך ב-Android 4.4 (רמת API ‏20) ובגרסאות קודמות, יכול להיות שיהיו הבדלים בין תמונות הווקטור לתמונות ה-PNG. אתם גם צריכים לוודא שהמניפסט מכיל את הקוד שתומך בשינויים שלכם.

כדי לשנות את קובץ ה-XML של הווקטור כשלא משתמשים בשיטת AndroidX:

  1. בחלון Project, לוחצים לחיצה כפולה על קובץ ה-XML הווקטורי שנוצר בתיקייה drawable.

    קובץ ה-XML מופיע בחלונות העורך והתצוגה המקדימה.

    קובץ XML וקטורי שמוצג בחלון של עורך הקוד והתצוגה המקדימה.
    איור 4. קובץ XML וקטורי שמוצג בעורך הקוד ובחלון התצוגה המקדימה.
  2. עורכים את קוד ה-XML בהתאם למה שנתמך ברמת ה-API המינימלית:

    • ‫Android מגרסה 5.0 (רמת API‏ 21) ואילך – Vector Asset Studio תומך בכל הרכיבים של Drawable ו-VectorDrawable. אפשר להוסיף רכיבי XML ולשנות ערכים. ב-Jetpack Compose, אפשר לטעון את הפריט הגרפי הווקטורי שניתן לשרטוט לתוך ImageVector כדי להתאים אותו אישית.

    • ‫Android 4.4 (רמת API‏ 20) וגרסאות קודמות – Vector Asset Studio תומך בכל הרכיבים של Drawable ובקבוצת משנה של הרכיבים של VectorDrawable. ברשימה הזו מפורטים פתרונות לתאימות לדורות קודמים של פריטים גרפיים וקטוריים שניתן לשרטוט. אתם יכולים לשנות ערכים בקוד שנוצר ולהוסיף רכיבי XML נתמכים.

  3. בונים את הפרויקט ובודקים שהפריט הגרפי הווקטורי שניתן לשרטוט ותמונות הרסטר התואמות נראים אותו דבר.

    חשוב לזכור שקובצי ה-PNG שנוצרו עשויים להיראות אחרת בחלון Preview מאשר באפליקציה, בגלל מנועי רינדור שונים ושינויים שבוצעו בפריט הגרפי הווקטורי שניתן לשרטוט לפני ה-build. אם תוסיפו קוד לקובץ ה-XML של הווקטור שנוצר על ידי Vector Asset Studio, תכונות שלא נתמכות ב-Android מגרסה 4.4 (רמת API‏ 20) ומטה לא יופיעו בקובצי ה-PNG שנוצרו. לכן, כשמוסיפים קוד, תמיד צריך לבדוק שקובצי ה-PNG שנוצרו תואמים לפריט הגרפי הווקטורי שניתן לשרטוט. כדי לעשות את זה, אפשר ללחוץ לחיצה כפולה על קובץ ה-PNG בתצוגה Project Files בחלון Project. גם בשוליים השמאליים של Code Editor מוצגת תמונת ה-PNG כשהקוד מתייחס לרכיב שניתן לשרטוט, כמו שמוצג באיור 5.

    תמונת PNG שמוצגת בשוליים הימניים של עורך הקוד.
    איור 5. תמונת PNG שמוצגת בשוליים הימניים של עורך הקוד.

מחיקת פריט גרפי וקטורי שניתן לשרטוט מפרויקט

כדי להסיר פריט גרפי וקטורי שניתן לשרטוט מפרויקט:

  1. בחלון Project, מוחקים את קובץ ה-XML שנוצר על ידי בחירת הקובץ ולחיצה על המקש Delete (או בחירה באפשרות Edit > Delete).

    מופיעה תיבת הדו-שיח Safe Delete.

  2. אפשר לבחור אפשרויות כדי למצוא איפה הקובץ נמצא בשימוש בפרויקט, ואז ללחוץ על OK.

    ‫Android Studio מוחק את הקובץ מהפרויקט ומהאחסון. עם זאת, אם בחרתם לחפש מקומות בפרויקט שבהם נעשה שימוש בקובץ ונמצאו כמה שימושים, תוכלו לראות אותם ולהחליט אם למחוק את הקובץ.

  3. בוחרים באפשרות Build (פיתוח) > Clean Project (ניקוי הפרויקט).

    כל קובצי ה-PNG וה-XML שנוצרו באופן אוטומטי ותואמים לפריט הגרפי הווקטורי שניתן לשרטוט שנמחק, יוסרו מהפרויקט ומהכונן.

העברת אפליקציה שמכילה פריטים גרפיים וקטוריים שניתן לשרטוט

אם השתמשתם בטכניקת AndroidX או שרמת ה-API המינימלית שלכם היא Android 5.0 (רמת API‏ 21) ומעלה, ה-APK יכיל את הפריטים הגרפיים הווקטוריים שניתנים לשרטוט שהוספתם באמצעות Vector Asset Studio. קובצי ה-APK האלה יהיו קטנים יותר מאשר אם התמונות הווקטוריות היו מומרות לקובצי PNG.

אם רמת ה-API המינימלית שלכם כוללת את Android 4.4 (רמת API ‏20) ומטה, ויש לכם פריטים גרפיים וקטוריים שניתנים לשרטוט ותמונות רסטר תואמות בפרויקט, יש לכם שתי אפשרויות להעברת קובצי ה-APK:

  • יוצרים קובץ APK אחד שכולל גם את הפריטים הגרפיים הווקטוריים שניתנים לשרטוט וגם את הייצוגים הרסטריים התואמים. הפתרון הזה הוא הפשוט ביותר להטמעה.
  • ליצור קובצי APK נפרדים לרמות API שונות. אם לא כוללים את תמונות הרסטר התואמות ב-APK ל-Android מגרסה 5.0 (רמת API‏ 21) ואילך, ה-APK יכול להיות קטן בהרבה. מידע נוסף זמין במאמר תמיכה בכמה חבילות APK.

תמיכה והגבלות על קובצי PSD

‫Vector Asset Studio לא תומך בכל התכונות של קובצי PSD. ברשימה הבאה מפורטים המאפיינים של קובצי PSD שנתמכים ושלא נתמכים, וגם כמה פרטים על ההמרה.

מסמך

סוגי קבצים נתמכים:

  • מצב צבע PSD של מפת סיביות, גווני אפור, צבעים מאונדקסים, RGB,‏ Lab או CMYK.
  • עומק צבע של 8, 16 או 32 סיביות.

פרטי ההמרה:

  • מידות המסמך ב-PSD הופכות למידות של הפריט הגרפי הווקטורי שניתן לשרטוט ושל אזור התצוגה.

סוגי קבצים לא נתמכים:

  • מצב צבע PSD של שני גוונים או ריבוי ערוצים.

צורות

סוגי קבצים נתמכים:

  • מסכות חיתוך, אם בסיס החיתוך הוא צורה אחרת.
  • פעולות על צורות, כולל מיזוג/הוספה, חיתוך, חיסור והחרגה.

סוגי קבצים לא נתמכים:

  • כלל מילוי זוגי-אי זוגי שמשמש לצורות ב-Photoshop. ב-Android 6.0 (רמת API‏ 23) ומטה, פריטים גרפיים וקטוריים שניתנים לשרטוט תומכים רק בכלל המילוי שאינו אפס. בצורות עם חיתוך עצמי, המגבלה הזו יכולה להוביל להבדלים בעיבוד בין קובץ ה-PSD לבין הפריט הגרפי הווקטורי שניתן לשרטוט שנוצר. כדי לפתור את הבעיה, מוסיפים את המאפיין android:fillType="evenOdd" לצורה בפריט הגרפי הווקטורי שניתן לשרטוט. לדוגמה:

    <vector xmlns:android="https://schemas.android.com/apk/res/android"
      android:viewportHeight="168"
      android:height="24dp"
      android:viewportWidth="209"
      android:width="24dp">
    
      <path
          android:fillAlpha="1.0"
          android:fillColor="#000000"
          android:fillType="evenOdd"
          android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
    </vector>

קווי מתאר ומילויים

סוגי קבצים נתמכים:

  • קווים, כולל צבע, אטימות, רוחב, חיבור, קצה, מקפים ויישור.
  • מילויים וקווי מתאר בצבע אחיד.
  • צבעי קו מתאר וצבע מילוי שצוינו כ-RGB,‏ Lab או CMYK.

פרטי ההמרה:

  • אם קו הוא מקווקו, נחתך באמצעות בסיס חיתוך או משתמש ביישור שונה מהמרכז, Vector Asset Studio ממיר אותו לצורת מילוי בפריט הגרפי הווקטורי שניתן לשרטוט.

סוגי קבצים לא נתמכים:

  • מילויים וקווי מתאר בצבעים שאינם אחידים, כמו מעברי צבעים.

אטימות

סוגי קבצים נתמכים:

  • שכבות של צורות עם אטימות של 0.

פרטי ההמרה:

  • ‫Vector Asset Studio מכפיל את אטימות המילוי באטימות השכבה כדי לחשב את אלפא המילוי.
  • הכלי מכפיל את האטימות של בסיס החיתוך (אם יש בסיס חיתוך) באלפא של המילוי כדי לחשב את האלפא הסופי של המילוי.
  • הכלי מכפיל את אטימות הקו באטימות השכבה כדי לחשב את ערך האלפא של הקו.
  • הכלי מכפיל את האטימות של בסיס החיתוך (אם יש בסיס חיתוך) באלפא של הקו כדי לחשב את האלפא הסופי של הקו.

שכבות

סוגי קבצים נתמכים:

  • כל שכבת צורה גלויה.

פרטי ההמרה:

  • הכלי Vector Asset Studio שומר את שמות השכבות בקובץ הפריט הגרפי הווקטורי שניתן לשרטוט.

סוגי קבצים לא נתמכים:

  • אפקטים של שכבות.
  • שכבות של התאמות וטקסט.
  • מצבי מיזוג (המערכת מתעלמת מהם).

תמיכה והגבלות בקובצי SVG

‫Vector Asset Studio לא תומך בכל התכונות של קובצי SVG. בקטע הבא מפורטות התכונות הנתמכות והתכונות שלא נתמכות כשהכלי ממיר קובץ SVG ל-VectorDrawable, וגם פרטים נוספים על ההמרה.

תכונות נתמכות

‫VectorDrawable תומך בכל התכונות של Tiny SVG 1.2, חוץ מטקסט.

צורות

‫VectorDrawable תומך בנתיבי SVG.

הכלי ממיר צורות בסיסיות כמו עיגולים, ריבועים ומצולעים לנתיבים.

טרנספורמציות

הכלי תומך במטריצות טרנספורמציה ומחיל אותן ישירות על נתיבי צאצא.

קבוצות

הכלי תומך ברכיבי קבוצה לתרגום, לשינוי קנה מידה ולסיבוב. קבוצות לא תומכות במאפיין אטימות.

הכלי גם מחיל על נתיבי הצאצא את הסגנון או האטימות של הקבוצה.

מילויים וקווי מתאר

אפשר למלא נתיבים ולהוסיף להם קווי מתאר באמצעות צבעים אחידים או מעברי צבע (ליניאריים, רדיאליים או זוויתיים). יש תמיכה רק בקווי מתאר ממורכזים. אין תמיכה במצבי מיזוג. אין תמיכה בנתיבים מקווקווים.

מסכות

הכלי תומך במסכת חיתוך אחת לכל קבוצה.

תכונות שלא נתמכות על ידי כלי הייבוא של SVG

כל תכונה שלא מופיעה בקטע תכונות נתמכות שלמעלה לא נתמכת. התכונות הבאות לא נתמכות:

  • אפקטים של סינון: אין תמיכה באפקטים כמו הטלת צללית, טשטוש ומטריצת צבעים.
  • טקסט: מומלץ להמיר טקסט לצורות באמצעות כלים אחרים.
  • מילוי תבניות

מקורות מידע נוספים

למידע נוסף על פרטי גרפי וקטורי, אפשר לעיין במקורות המידע הבאים:

תיעוד

צפייה בתוכן