ImageBitmap לעומת ImageVector

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

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

דוגמה לקובץ JPEG
איור 1: דוגמה לקובץ JPEG

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

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

ImageBitmap

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

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

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

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

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

ImageVector

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

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

בתרחישי שימוש פשוטים, painterResource() פועלת באותה דרך שבה היא פועלת במחלקה ImageBitmap, גם ב-ImageVectors, ומחזירה את הערך 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)
)

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

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