שני הסוגים הנפוצים ביותר של פורמטים של תמונות הם תמונות רסטר ותמונות וקטוריות.
פורמט גרפי של רשת נקודות מכיל פיקסלים: ריבועים נפרדים קטנים שמכילים (מורכב מערכי אדום, ירוק, כחול ואלפא). כאשר ממקמים כמות גדולה של יחד, ניתן ליצור תמונה מפורטת מאוד, כמו תצלום. א' לגרפיקה מסוג רסטר יש רזולוציה קבועה (מספר קבוע של פיקסלים). המשמעות היא כשמגדילים את התמונה, מאבדים פרטים במקרה שתצוגת הפיקסלים עלולה לגרום יתרחשו. דוגמאות לפורמטים גרפיים של רשת נקודות: JPEG , PNG ו-WEBP.
![דוגמה לקובץ JPEG](https://developer.android.com/static/develop/ui/compose/images/graphics-sourceimage.jpg?authuser=8&hl=he)
מצד שני, תמונות וקטוריות הן ייצוגים מתמטיים ניתנים להרחבה של רכיב חזותי במסך. וקטור הוא קבוצת פקודות שמתארות איך לצייר התמונה על המסך - למשל, קו, נקודה או מילוי. בעת שינוי קנה מידה של וקטור הוא לא יאבד את האיכות כי הנוסחה המתמטית לא תיפגע את הקשרים בין הפקודות השונות. דוגמה טובה ל-ImageVector הם הסמלים של החומר, כי אפשר להגדיר את כולם באמצעות בנוסחאות מתמטיות.
![דוגמה וקטורית (סיומות הקבצים הן .xml או מוגדרות בקוד Kotlin)](https://developer.android.com/static/develop/ui/compose/images/graphics-shopping.png?authuser=8&hl=he)
ImageBitmap
בתהליך הכתיבה, ניתן לטעון תמונה מסוג רשת נקודות (שנקראת בדרך כלל 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)
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- צביעה בהתאמה אישית {:#custom- Painter}
- משאבים בכתיבה
- הטעינה של תמונות {:#loading-images}