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

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

מידע על Vector Asset Studio

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

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

‫Android 4.4 (רמת API‏ 20) ומטה לא תומכות בנכסי וקטורים. אם רמת ה-API המינימלית מוגדרת לאחת מרמות ה-API האלה, יש לכם שתי אפשרויות כשאתם משתמשים ב-Vector Asset Studio: ליצור קובצי Portable Network Graphic‏ (PNG) (ברירת המחדל) או להשתמש בטכניקת התאימות לאחור ב-AndroidX.

לצורך תאימות לדורות קודמים, Vector Asset Studio יוצר תמונות רסטר של פריט גרפי וקטורי שניתן לשרטוט. הנכסים הווקטוריים והרסטריים נארזים יחד בקובץ ה-APK. אפשר להתייחס ל-vector drawables כאל Drawable בקוד Kotlin או כאל @drawable בקוד XML. כשהאפליקציה פועלת, מוצגת באופן אוטומטי תמונה וקטורית או תמונה רסטרית בהתאם לרמת ה-API.

אם רוצים להשתמש רק ב-vector drawables, אפשר להשתמש ב-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) ואילך. מידע נוסף זמין במאמר בנושא תמונות וקטוריות מונפשות בכלי הכתיבה.

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

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

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

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

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

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

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

‫SVG: פלאגין Android ל-Gradle 1.5.0 ואילך

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

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

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

יצירת PNG

‫Android מגרסה 5.0 (רמת API‏ 21) ואילך תומך בפריטים גרפיים וקטוריים שניתנים לשרטוט. אם לאפליקציה שלכם יש רמת API מינימלית נמוכה יותר, Vector Asset Studio מוסיף את קובץ הווקטור הניתן לציור לפרויקט. בנוסף, משך זמן של תהליך build, ‏ Gradle יוצר תמונות רסטר בפורמט PNG ברזולוציות שונות. ‫Gradle יוצר את צפיפויות ה-PNG שצוינו על ידי מאפיין generatedDensities של שפת התחום (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.

    איור 1. Vector Asset Studio.

  4. אם במקום זאת מופיעה תיבת הדו-שיח נדרש פלאגין Android חדש יותר ל-Gradle, צריך לתקן את גרסת Gradle באופן הבא:

    1. בוחרים באפשרות File > Project Structure (קובץ > מבנה הפרויקט).

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

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

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

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

      מופיע Vector Asset Studio.

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

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

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

הוספת סמל של Material

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

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

  2. בשדה Clip art (אוסף תמונות), לוחצים על הלחצן.

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

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

    בוחרים סמל של material ולוחצים על אישור. הסמל מופיע בתצוגה מקדימה של Vector Drawable.

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

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

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

      ברירת המחדל היא 24x24dp, שמוגדרת במפרט של 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. קבוצת המקורות לניפוי באגים מיועדת לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות File > Project Structure > app > Build Types. לדוגמה, אפשר להגדיר קבוצת מקורות בטא וליצור גרסה של סמל שכוללת את הטקסט BETA בפינה השמאלית התחתונה. מידע נוסף זמין במאמר בנושא הגדרת וריאציות של 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, בוחרים באפשרות קובץ מקומי.

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

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

    התמונה מופיעה בתצוגה מקדימה של Vector Drawable.

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

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

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

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

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

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

    • החלפה – בוחרים באפשרות הזו אם רוצים לשנות את גודל התמונה. אחרי שבוחרים את התמונה, הגודל שלה משתנה לגודל של התמונה עצמה. בכל פעם שמשנים את הגודל, השינוי מופיע באזור התצוגה המקדימה. ברירת המחדל היא 24x24dp, שמוגדרת במפרט של 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, כולל ניפוי באגים וגרסת הפצה. קבוצות המקורות של ניפוי הבאגים והגרסה מחליפות את קבוצת המקורות הראשית ומוחלות על גרסה אחת של בנייה. ה-debug source set מיועד לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות קובץ > מבנה הפרויקט > אפליקציה > סוגי 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 ונגישות אוטומטית באמצעות תיאורי תוכן.

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

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

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

    איור 4. קובץ XML וקטורי שמוצג בעורך הקוד ובחלון התצוגה המקדימה.

  2. עורכים את קוד ה-XML בהתאם למה שנתמך ברמת ה-API המינימלית:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אם רמת ה-API המינימלית שלכם כוללת את Android 4.4 (רמת API 20) ומטה, ויש לכם ב-APK קבצים תואמים של וקטורים ורסטרים, יש לכם שתי אפשרויות להפצת קובצי ה-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 הופכים למימדים של ה-vector drawable ושל אזור התצוגה.

לא אפשרי:

  • מצב הצבע של קובץ ה-PSD הוא דו-גווני או רב-ערוצי.

צורות

נתמך:

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

לא אפשרי:

  • כלל המילוי Even-odd שמשמש לצורות ב-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 מלבד text.

צורות

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

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

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

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

קבוצות

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

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

מילויים וקווים

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

מסכות

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

תכונות שלא נתמכות בכלי לייבוא קובצי SVG

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

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

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

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

מאמרי עזרה

צפיות בתוכן