אפשר למזג או להוסיף שכבות לתמונות המקור כדי להציג תמונות בשכבות על קנבס. לדוגמה, אפשר לשחזר את האופן שבו Android Framework יוצר סמלי אפליקציות על ידי שילוב בין רכיבי drawable נפרדים לרקע ולחזית. כדי להציג תמונות עם שכבות, צריך לבצע את הפעולות הבאות:
- להוסיף שכבות של תמונות לקנבס.
- להוסיף שכבת-על של המקור.
תאימות גרסאות
כדי להטמיע את הקוד הזה, צריך להגדיר את minSDK של הפרויקט לרמת API 21 ואילך.
יחסי תלות
שכבות של תמונות על קנבס
הקוד הבא מציב שכבות של שתי תמונות מקור אחת מעל השנייה, ומייצר תמונה משולבת על קנבס:
class OverlayImagePainter constructor( private val image: ImageBitmap, private val imageOverlay: ImageBitmap, private val srcOffset: IntOffset = IntOffset.Zero, private val srcSize: IntSize = IntSize(image.width, image.height), private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height) ) : Painter() { private val size: IntSize = validateSize(srcOffset, srcSize) override fun DrawScope.onDraw() { // draw the first image without any blend mode drawImage( image, srcOffset, srcSize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ) ) // draw the second image with an Overlay blend mode to blend the two together drawImage( imageOverlay, srcOffset, overlaySize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ), blendMode = BlendMode.Overlay ) } /** * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height */ override val intrinsicSize: Size get() = size.toSize() private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize { require( srcOffset.x >= 0 && srcOffset.y >= 0 && srcSize.width >= 0 && srcSize.height >= 0 && srcSize.width <= image.width && srcSize.height <= image.height ) return srcSize } }
נקודות עיקריות לגבי הקוד
- משתמשים ב-
OverlayImagePainter
, שהיא הטמעה מותאמת אישית שלPainter
שאפשר להשתמש בה כדי להוסיף שכבות-על לתמונה המקורית. שיטת המיזוג קובעת איך התמונות משולבות. התמונה הראשונה לא מחליפה שום דבר אחר, לכן אין צורך במצב מיזוג. שילוב התמונותOverlay
של התמונה השנייה מחליף את האזורים בתמונה הראשונה שמכוסים על ידי התמונה השנייה. - הערך של
DrawScope.onDraw()
מבוטל והשתיים תמונות מוטמעות זו על גבי זו בפונקציה הזו. - הערך של
intrinsicSize
מבוטל כדי לדווח בצורה נכונה על הגודל המובנה של התמונה המשולבת.
תמונת המקור של שכבת-העל
בעזרת הכלי המותאם אישית Painter
, אפשר להוסיף שכבת-על של תמונה מעל תמונה המקור באופן הבא:
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Image( painter = customPainter, contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier.wrapContentSize() )
נקודות עיקריות לגבי הקוד
- התמונות שרוצים לשלב נטענות כל אחת כמכונות של
ImageBitmap
, לפני שהן משולבות באמצעותOverlayImagePainter
. - התמונות המשולבות עוברות עיבוד באמצעות רכיב
Image
שמשלב את התמונות המקוריות באמצעות הצייר המותאם אישית בזמן העיבוד.
תוצאות
![כלי ציור בהתאמה אישית שמאפשר להציב שכבת-על של שתי תמונות אחת על גבי השנייה](https://developer.android.com/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?hl=he)
Image
שמשתמש ב-Painter
בהתאמה אישית כדי להוסיף שכבת-על של תמונה של קשת שקופה למחצה לתמונה של כלב.אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=he)