מפת הסיביות (bitmap) של התמונה לעומת הוקטור של התמונה

שני הסוגים הנפוצים ביותר של פורמטים של תמונות הם תמונות רסטר ותמונות וקטוריות.

פורמט גרפי של רסטר מכיל פיקסלים: ריבועים קטנים נפרדים שמכילים צבע (שמורכב מערכי אדום, ירוק, כחול ואלפא). כשמציבים הרבה פיקסלים ביחד, אפשר ליצור תמונה מפורטת מאוד, כמו צילום. לגרפיקה מסוג רסטר יש רזולוציה קבועה (מספר קבוע של פיקסלים). זה אומר שאם מגדילים את התמונה, היא מאבדת פרטים ועלולה להיראות מפוקסלת. דוגמאות לפורמטים של גרפיקת רסטר: JPEG,‏ PNG ו-WEBP.

תרשים 1. דוגמה לקובץ JPEG.

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

איור 2. דוגמה לווקטור (סיומות הקבצים הן ‎ .xml או מוגדרות בקוד Kotlin).

ImageBitmap

ב-Compose, אפשר לטעון תמונת רסטר (שנקראת בדרך כלל Bitmap) למופע של ImageBitmap, ו-BitmapPainter אחראי לשרטוט מפת הסיביות (bitmap) במסך.

בתרחישים בסיסיים, אפשר להשתמש ב-painterResource() כדי ליצור ImageBitmap, והוא מחזיר אובייקט Painter (במקרה הזה – BitmapPainter):

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
VectorVsBitmapSnippets.kt

אם אתם צריכים התאמה אישית נוספת (לדוגמה, הטמעה של צייר בהתאמה אישית) וצריכים גישה ל-ImageBitmap עצמו, אתם יכולים לטעון אותו באופן הבא:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

‫VectorPainter אחראי לציור של ImageVector במסך. ‫ImageVector תומך בקבוצת משנה של פקודות Scalable Vector Graphics ‏ (SVG). לא את כל התמונות אפשר לייצג כווקטורים (לדוגמה, אי אפשר להפוך תמונות שצילמתם במצלמה לווקטור).

כדי ליצור ImageVector בהתאמה אישית, אפשר לייבא קובץ XML קיים של פריט גרפי וקטורי שניתן לשרטוט (מייבאים אותו ל-Android Studio באמצעות כלי הייבוא) או להטמיע את המחלקה ולהנפיק פקודות נתיב באופן ידני.

במקרים בסיסיים, painterResource() פועל ב-ImageVectors באותו אופן שבו הוא פועל במחלקה ImageBitmap, ומחזיר VectorPainter כתוצאה. ‫painterResource() מטפל בטעינה של VectorDrawables ו-BitmapDrawables אל VectorPainter ו-BitmapPainter בהתאמה. כדי לטעון VectorDrawable לתמונה, משתמשים בפקודה:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
VectorVsBitmapSnippets.kt

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

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt