نمایش تصاویر لایه ای بر روی بوم

می‌توانید تصاویر منبع را ترکیب یا روی هم قرار دهید تا تصاویر لایه‌ای را روی بوم نمایش دهید. به عنوان مثال، می‌توانید نحوه ایجاد آیکون‌های برنامه Android Framework را با ترکیب پس‌زمینه‌ها و پیش‌زمینه‌های ترسیمی جداگانه تکرار کنید. برای نمایش تصاویر لایه باز باید موارد زیر را انجام دهید:

  • لایه بندی تصاویر روی بوم.
  • منبع را روی هم قرار دهید.

سازگاری نسخه

این پیاده سازی مستلزم آن است که 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 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 composable ارائه می شوند که از نقاش سفارشی برای ترکیب تصاویر منبع هنگام رندر استفاده می کند.

نتایج

نقاش سفارشی که دو تصویر را روی هم می‌پوشاند
شکل 1 : Image که از یک Painter سفارشی برای پوشاندن تصویر نیمه شفاف رنگین کمان روی تصویر یک سگ استفاده می کند.

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

تکنیک هایی را برای استفاده از تصاویر روشن و جذاب کشف کنید تا به برنامه اندروید خود ظاهر و احساس زیبایی ببخشید.

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.