میتوانید تصاویر منبع را ترکیب یا روی هم قرار دهید تا تصاویر لایهای را روی بوم نمایش دهید. به عنوان مثال، میتوانید نحوه ایجاد آیکونهای برنامه 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 ارائه می شوند که از نقاش سفارشی برای ترکیب تصاویر منبع هنگام رندر استفاده می کند.
نتایج
![نقاش سفارشی که دو تصویر را روی هم میپوشاند](https://developer.android.com/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?hl=fa)
Image
که از یک Painter
سفارشی برای پوشاندن تصویر نیمه شفاف رنگین کمان روی تصویر یک سگ استفاده می کند. مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fa)