הוספת גרפיקה וקטורית עם צפיפות מרובה (תצוגות)

מושגים ויישום ב-Jetpack Compose

‫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 אחד מאשר לעדכן כמה תמונות רסטר ברזולוציות שונות.

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

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

תאימות לאחור ב-AndroidX

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

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

מגניב

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

כדי להשיג תאימות לאחור, צריך להשתמש בטכניקות קידוד של AndroidX, כמו שימוש במאפיין app:srcCompat במקום במאפיין android:src עבור רכיבי drawable וקטוריים. מידע נוסף זמין במאמר בנושא AndroidX.

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

בקובץ פריסה, אפשר להגדיר כל ווידג'ט שקשור לסמל, כמו ImageButton,‏ ImageView וכו', כך שיצביע על פריט גרפי וקטורי שניתן לשרטוט. לדוגמה, בפריסה הבאה מוצג וקטור ניתן לציור שמוצג על כפתור:

איור 1. פריט גרפי וקטורי שניתן לשרטוט שמוצג על לחצן בפריסת דף.

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

  1. פותחים פרויקט ומייבאים קובץ וקטורי.

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

  2. בתצוגת Android של החלון Project (פרויקט), לוחצים פעמיים על קובץ XML של פריסה, כמו content_main.xml.

  3. לוחצים על הכרטיסייה עיצוב כדי להציג את כלי העריכה של הפריסה.

  4. גוררים את הווידג'ט ImageButton מהחלון Palette אל Layout Editor.

  5. בתיבת הדו-שיח Resources, בוחרים באפשרות Drawable בחלונית הימנית, ואז בוחרים את ה-vector drawable שייבאתם. לוחצים על אישור.

    הפריט הגרפי הווקטורי שניתן לשרטוט מופיע ב-ImageButton בפריסה.

  6. כדי לשנות את צבע התמונה לצבע המשני שמוגדר בעיצוב, בחלון מאפיינים, מאתרים את המאפיין גוון ולוחצים על … .

  7. בתיבת הדו-שיח Resources, בוחרים באפשרות Color בחלונית הימנית, ואז בוחרים באפשרות colorAccent. לוחצים על אישור.

    הצבע של התמונה משתנה לצבע המשני בפריסה.

אם הפרויקט משתמש ב-AndroidX, הקוד ImageButton צריך להיות דומה לקוד הבא:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

אם הפרויקט לא משתמש ב-AndroidX, קוד ה-vector drawable יהיה android:src="@drawable/ic_build_black_24dp".

הפניה לפריט גרפי וקטורי שניתן לשרטוט בקוד

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

  • ברוב המקרים, אפשר להתייחס ל-vector drawables כאל @drawable בקוד XML או כאל Drawable בקוד Java.

    לדוגמה, קוד ה-XML הבא של הפריסה מחיל את התמונה על תצוגה:

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:src="@drawable/myimage" />

    הקוד הבא מאחזר את התמונה כ-Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    ה-method getResources() נמצא ב-class Context, שרלוונטי לאובייקטים של ממשק המשתמש, כמו פעילויות, מקטעים, פריסות, תצוגות וכו'.

  • אם האפליקציה שלכם משתמשת ב-AndroidX (גם אם אין הצהרת vectorDrawables.useSupportLibrary = true בקובץ build.gradle), אתם יכולים גם להפנות לפריט גרפי וקטורי שניתן לשרטוט באמצעות הצהרת app:srcCompat. לדוגמה:

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  app:srcCompat="@drawable/myimage" />

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

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

אפשר לגשת למשאבי פריט גרפי וקטורי שניתן לשרטוט רק מה-main thread.

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