הצגת תמונות בשכבות על קנבס

אפשר למזג או להוסיף שכבות לתמונות המקור כדי להציג תמונות בשכבות על קנבס. לדוגמה, אפשר לשחזר את האופן שבו 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 שמשלב את התמונות המקוריות באמצעות הצייר המותאם אישית בזמן העיבוד.

תוצאות

כלי ציור בהתאמה אישית שמאפשר להציב שכבת-על של שתי תמונות אחת על גבי השנייה
תרשים 1: Image שמשתמש ב-Painter בהתאמה אישית כדי להוסיף שכבת-על של תמונה של קשת שקופה למחצה לתמונה של כלב.

אוספים שמכילים את המדריך הזה

המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:

כאן מוסבר איך להשתמש בתמונות ובסרטונים בהירים ומעניינים כדי ליצור מראה מעוצב ויפה לאפליקציה ל-Android.

יש לכם שאלות או משוב

אתם יכולים להיכנס לדף השאלות הנפוצות שלנו ולקרוא מדריכים מהירים, או ליצור איתנו קשר ולספר לנו מה דעתכם.